Vue 模板语法 数据绑定

---

一、模板语法

1.插值

用处：使用变量改变标签中的内容
语法：{{xxx}},xxx是js表达式，也就是data中的值

<!--例子-->
<div id="app">
        <!-- 插值 -->
        {{obj.names}}
 </div>
   <!--obj.names值改变时，页面上同步改变-->

2.指令

用处:使用变量改变标签中的属性，事件等
语法: <a v-bind:href="x" > ,也可以使用简写<a :href="x" >，
同样是读取data中的内容(此处仅是拿v-bind举例)

<!--例子-->
<div id="app" :style="y"></div>
<!--y可以为字符串，对象或数组形式-->

---

二、数据绑定

vue中有两种数据绑定，单向数据绑定（v-bind） 双向数据绑定（v-model）

1.单向数据绑定

<div id="app">
      <input type="text" :value="x">
      <!--单项数据绑定x值变化，input的vlue值同步变化，
      但是在页面中改变或输入值，x不会变化 -->
 </div>

2.双向数据绑定

<div id="app">
      <input type="text" v-model="y">
      <!--双向项数据绑定x值变化，input的vlue值同步变化，
      同时在页面中改变或输入值，y也会同步变化 -->
 </div>