vue第二章单向绑定和双向绑定

一、介绍什么是单向绑定和双向绑定

单向绑定：把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新。因此，我们不需要进行额外的DOM操作，只需要进行Model的操作就可以实现视图的联动更新。

双向绑定：把Model绑定到View的同时也将View绑定到Model上，这样就既可以通过更新Model来实现View的自动更新，也可以通过更新View来实现Model数据的更新。所以，当我们用JavaScript代码更新Model时，View就会自动更新，反之，如果用户更新了View，Model的数据也自动被更新了。

二、代码层面

单向数据绑定 (数据只能从data流向页面）

<a v-bind:href="url">点击</a> <input type="text" :value="msg"></input>

<script src="./js/vue.js"></script>
<script>
    new Vue({
        //el:'#root'
        // data:{
        //
        // },
        //以下是函数写法
        data(){
            return{
                msg:'zhaoliying',
                url:'https://www.baidu.com'
            }
        }
    }).$mount('#root')
</script>

双向数据绑定（数据从data流向页面，页面变更也能流向data）

<input type="text" v-model="msg"></input> 简单一点理解，双向绑定使用v-model，单想绑定使用v-bind:value或者:value