2021-08-10

Vue学习笔记

模板语法：

Vue模板语法有2大类:

1.插值语法:

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

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

2.指令语法:

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

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

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

v-bind可以将它后面双引号的内容转换成表达式。

v-bind：可以简写为一个冒号**：**

Vue的数据绑定：

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

1.单向绑定(v-bind):数据只能从data流向页面。(在浏览器页面显示的效果就是：在vue开发者工具中修改data值，但浏览器页面的数值会自动显示更新；而在页面方框中修改数据，vue中data不会发生改变，这就是单向)。

2.双向绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data.（无论在vue开发者工具中修改还是在页面方框中修改，只有一边的数据发生变化，另外一边也会改变。）

备注：

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的值。

2.data有2种写法

(1).对象式 (2).函数式

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

3.一个重要的原则:

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

MVVM模型：

vm：vue中的MVVM

Object defineproperty方法：

（对象定义方法）