vue笔记

初识vue：

1. 让vue工作要先创建一个vue实例，且要传入一个配置对象；

2. root容器里的代码依旧符合html规范，只是混入了一些特殊的vue语法；

3. vue实例和容器是一一对应的；

4. 真实开发中只有一个vue实例，并且会配合着组件一起使用；

5. root容器里的代码被称为‘vue模板’；

6. {{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；

7. 一旦data中的数据发生变化，那模板中用到的该数据的地方会自动更新 ；

注意区分：js表达式 和 js代码（语句）

1. 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：

（1）a

（2）a+b

（3）demo（1）

（4）x === y ？‘a’：‘b’

2. js代码（语句）

（1）if（）{}

（2）for（）{}

vue模板语法有2大类：

1. 插值语法：

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

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

2. 指令语法：

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

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

备注：vue中有很多的指令，且形式都是: v-???

vue中有两种数据绑定的方式：

1. 单向绑定（v-bind）：数据只能从data流向页面。

2. 双向绑定（v-model）:数据不仅能从data流向页面，还可以从页面流向data。

备注：

1. 双向绑定一般都应有在表单类元素上（如：input,select等）

2. v-model:value还可以简写为v-model，因为v-model默认收集的就是value的值。

data与el的2种写法

1.el有2种写法

（1）new vue时候配置el属性。

（2）先创建vue实例，随后在通过vm.$mount('#root')制定el的值。

3. data有2种写法

（1）对象式

（2）函数式

如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。

4. 一个重要的原则：由vue管理的函数，一定不要写箭头函数，不然this就不再是vue实例。