Vue中的v-model指令和v-on的用法

数据的单向绑定v-bind

    <div id="app">
        <h3>{{msg}}</h3>
        <input type="text" v-bind:value="msg">
    </div>
    <script src="./lib/vue-2.4.0.js"></script>
    <script>
        // 创建一个vue实例
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '爱敲代码,爱学习,爱思考,简直是完美,没瑕疵!',
            },
            methods: {}
        });
    </script>

数据的单向绑定就是说当我该变vue的数据的时候,视图层的样式也会改变，这是单向的

demo01

v-bind-01.PNG

demo02

v-bind-02.PNG

demo03

在input表单里面输入'肥肥肥',看看vm中的msg的值会不会改变,不改变页面的数据就不能同步到vue中

v-bind-03.PNG

思考为什么要进行数据的双向绑定?或者什么时候需要数据的双向绑定？

当用在输入的时候,修改了表单的值的时候

    <div id="app">
        <h3>{{msg}}</h3>
        <input type="text" v-model:value="msg">
    </div>
    <script src="./lib/vue-2.4.0.js"></script>
    <script>
        // 创建一个vue实例
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '爱敲代码,爱学习,爱思考,简直是完美,没瑕疵!',
            },
            methods: {}
        });
    </script>

demo04

v-model-01.PNG

demo05

v-model-02.PNG

改变了视图层的数据,vue中的数据也发生了改变,这就是数据的双向绑定