Vue2 基础知识点

1、初始Vue

1、想让vue工作，就必须创建一个vue实例，且要转入一个配置对象；

2、root 容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；

3、root容器里的代码被称为【vue模板】

4、Vue实例和容器是一一对应的；*

5、真实开发中只有一个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(){}

 

2、模板语法有两大类：

1、插值语法:

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

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

2、指令语法：

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

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

备注：Vue中很多的指令，且形式都是：v-???，此处我们只是拿v-bind举例

 

3、Vue数据绑定：

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

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

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

备注：

1、双向绑定一般都应用在表单元素上（如：input、select等）

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

 

4、el与data的两种写法

1、el有两种写法

1.new.Vue时候配置属性。

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

2、data有两种写法

1.对象式

2.函数式

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

3、一个重要的原则

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

 

5、MVVM 模型

1、M:模型（Model）：data中的数据。

2、V:试图（View）