一、模板语法
1.插值语法：
插值语法往往用于标签体内容，标签体（起始标签和结束标签夹着的内容就是标签体内容）
举例：
代码语言：javascript复制 <template>
<h1>你好。{{name}}</h1>
</template> <script>
...
data(){
return{
name:'lqj'
}
}
</script>2.指令语法：
指令语法往往管理标签属性
举例：
代码语言：javascript复制 <template>
<h1>指令语法</h1>
<a v-bind:href="url">点我去火狐主页</a>
</template> <script>
...
data(){
return{
url:'https://home.firefoxchina.cn/'
}
}
</script>说明：如果绑定属性时前面加上v-bind:就会使得vue把后面“”里面的东西看作一个js表达式来执行！
例如：
代码语言：javascript复制 <template>
<a v-bind:x="lqj"></a>
</template> <script>
data:{
return{
name:'lqj',
xingbie:'男'
}
}
</script>上面的例子因为在x前面写了v-bind:所以vue把x绑定的lqj这个值看作一个js表达式（在这lqj被看作成了一个变量来执行） 又因为data的return里面没有定义lqj的变量值，所以在执行的过程中vue会报错，不会运行出结果！
注意：只有"v-bind:"可以简写成":"
总结： 1.插值语法： 功能：用于解析标签体内容。 写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
2.指令语法：vue中有很多指令语法（v-？？？） 此处我们先用v-bind：（解析属性标签举例子） 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。 举例：v-bind:href="xxx"或简写成:href="xxx"，xxx同样要写成js表达式， 且可以直接读取到data中的所有属性。 备注：vue中有很多的指令，且形式都是：v-???,此处我们知识拿v-bind举个例子
二、数据绑定
1.单项数据绑定：
v-bind: 举例：
代码语言：javascript复制 <template>
单项数据绑定：<input type="text" v-bind:value="name">
</template> <script>
...
data(){
return{
name:'lqj'
}
}
</script>以上的结果是在浏览器中如果在input框中输入东西是，vue开发者工具中的vc中的值 是不会改变的，这就是单向绑定（只能由vue开发者工具向dom之中传递数据）
2.双向数据绑定：
v-model： 举例：
代码语言：javascript复制 <template>
双项数据绑定：<input type="text" v-model:value="name">
</template> <script>
...
data(){
return{
name:'lqj'
}
}
</script>·以上的结果是在浏览器中如果在input框中输入东西时，我们会发现vue开发者工具中的vc里面的值 ·会跟着input框中的数据改变而改变！
·如果此时我们同时写了两个绑定事件（v-bind：和v-model：）这时我们要是改变v-model：的input框中的数据 ·v-bind：的input框中的数据也会随之改变，因为这是一个连锁反应： ·因为v-model：可以改变vue开发者工具里面的数据，而v-bind:中的数据时随着vue开发者工具里面的数据变化而变化的 ·所以v-model：的数据改变会间接带动v-bind：的数据所改变！
·注意：v-model：这个双向绑定只能应用到表单类元素上（输入类元素）
总结：vue2有两种数据绑定的方式： 1.单项数据绑定（v-bind:）数据只能从data流向页面。 2.双向数据绑定（v-model：）数据不仅可以从data流向页面，还可以从页面流向data。 备注： 1.双向绑定一般都是应用在表单雷元素上（如：input、select等） 2.v-model:value可以简写成v-model，因为v-model默认收集的就是value值。
