vue中的属性绑定和双向数据绑定

• 属性绑定

1. 属性绑定指令：v-bind:（可以缩写成“：”一个冒号）

   <div id="root">
       <div v-bind:title="title">hello world</div>
   </div>
   <script>
       new Vue({
           el:"#root",
           data{
               title:"this is hello world"
           }
       })
   </script>

   意思是当前title这个属性和“title”这个数据项进行绑定。

   V-bind:后面跟的是属性，“=”是JS表达式，可以写数据项和其他表达式。

• 双向数据绑定

1. 单向绑定：数据决定页面显示，但是页面无法决定数据的内容。
2. 双向绑定指令：v-model

   <div id="root">
       <div v-bind:title="title">hello world</div>
       <input v-model="content"/>
       <div>{{content}}</div>
   </div>
   <script>
       new Vue({
           el:"#root",
           data{
               title:"this is hello world",
               content:"this is content"
           }
       })
   </script>

    

   输入框中的内容根据data中的content显示，当输入框中内容改变，输入框下方的内容也随之改变。 

   输入框下方div根据数据显示。