Vue | 模板语法、数据绑定、data与el的两种写法

目录

Vue模板语法有2大类：

Vue有2种数据绑定的方式：

data与el的2种写法：

---

Vue模板语法有2大类：

• 插值语法：

       功能:用于解析标签体内容。

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

• 指令语法：

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

       举例：v-bind:href='xxx' 或 简写为： :href='xxx'。 xxx同样要写js表达式，且可以直接读取           到data中的所有属性。

Vue有2种数据绑定的方式：

1. 单向绑定（v-bind):数据只能从data流向页面
2. 双向绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data。 

备注：

• 双向绑定一般都应用在表单类元素上（如：Input、select等）
• v-model:value 可以简写为 v-model,因为v-model默认收集的就是value值。 

data与el的2种写法：

• el有2种写法： 

1.  new Vue时候配置el属性
2. 先创建Vue实例，随后再通过vm.$mount('#root')指定el的值

• data有2种写法：

1. 对象式
2. 函数式

如何选择：当我们学习到组件时，data必须使用函数式，否则会报错。

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