vue模板语法和数据绑定和el、data的两种

vue模板语法有两大类：

1.插值语法：

            功能：用于解拆标签体内容

            写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性

2.指令语法：

            功能：用于解拆标签（包括：标签属性，标签体内容，绑定事件）

             举例：v-bind：href="xxx" 或简写程：href：“xxx”，xxx同样要写js表达式，

且可以直接读取到data中的所有属性。

             备注：Vue中有很多的指令，且形式都是：v-xxx，此处我们只是那v-bind举个例子。

1.差值语法

2. 指令语法

用于拆解标签，如下图v-bind指定href的值

3.数据绑定

单项数据绑定：

数据智能能从data流向页面

双向数据绑定：

数据不仅能从data流向页面，还可以从页面流向data

备注：

1.双向绑定一般都应用在表单类元素上(如：input，select)

2.v-model：value 可以简写为v-model，因为v-model默认手机的就是value值

v-bind就是一个单项数据绑定

v-modle是一个双向数据绑定，如下图，如果是v-modle那么在输入框输入值在开发者框中的值也会改变。

 v-bind：value可以简写为：：value    v-modle：value可以简写为v-modle

 

 4.el、data的两种写法

1.el有两种写法

(1).new Vue的时候配置el属性

（2）.先创建Vue实例，随后再通过vm.$mount('#root')指定el的值

 

2.data有两种写法

（1）.对象式

（2）.函数式

如何选择：目前都可以，到组件的时候，data必须使用函数式，否则会报错。

（3）.一个重要原则：由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。