13/2-3 Dynamic Props.html

<!DOCTYPE html>
<html lang="en">

<head>
    <script type="text/javascript" src="vue.js"></script>
    <meta charset="UTF-8">
    <title>vue.js</title>
</head>

<body>
    <div id="app1">
        <div>
            <input v-model="parentMsg">
            <br>
            <child v-bind:my-message="parentMsg"></child>
            <br>
            <child :my-message="parentMsg"></child>
        </div>
    </div>
    <script>
    Vue.config.debug = true;
    Vue.component('child', {
        // camelCase in JavaScript
        props: ['myMessage'],
        template: '<span>{{ myMessage }}</span>'
    });
    var vm = new Vue({
        el: '#app1',
        data: {
            parentMsg: '台湾小凡'
        }

    });
    </script>
</body>

</html>