vue的数据绑定，单向数据绑定以及双向数据绑定

单向数据绑定以及双向数据绑定

单向数据绑定 :value

<div id="div">
    <input type="text" :value="input_val">
</div>

<script>
    var app = new Vue({
        el: '#div',
        data: {
            input_val: 'hello world '
        }
    })
</script>

浏览器渲染结果： <div id="div"><input type="text" value="hello world"></div>

通过浏览器 REPL 环境可以进行修改 app.input_val = 'Vue'  

浏览器渲染结果： <div id="div"><input type="text" value="Vue"></div>

我们通过 vue 对象修改数据可以直接影响到 DOM 元素，但是，如果直接修改 DOM 元素，却不会影响到 vue 对象的数据

双向数据绑定 v-model

<div id="div">
    <input type="text" v-model="input_val" >
</div>

<script>
    var app = new Vue({
        el: '#div',
        data: {
            input_val: 'hello world '
        }
    })
</script>

通过 v-model 指令展示表单数据，此时就完成了 双向数据绑定  ；

不管 DOM 元素还是 vue 对象，数据的改变都会影响到另一个；