VUE学习笔记

学习资料来源：B站《尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通》

VUE特点:

• 采用组件化模式，提高代码复用率，且让代码更好维护。
• 声明式编码，让编码人员无需直接操作DOM，提高开发效率。
• 使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。

学习VUE之前要掌握的JavaScript基础知识

• ES6语法规范
• ES6模块化
• 包管理器
• 原型、原型链
• 数组常用方法
• axios
• promise

初识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(){}

Vue模板语法

插值语法：

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

功能：常用于标签体内容

指令语法：

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

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

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

Vue数据绑定：

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

备注：

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

data与el的2种写法：

1. el有两种写法
   1. new Vue时候配置el属性。
   2. 先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。
2. data有两种写法
   1. 对象式
   2. 函数式
   3. 如果选择：目前那种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
3. 一个重要的原则
   1. 由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。