Vue从入门到实战-基础精讲

1、vue实例

页面的入口点，就是从Vue的根实例开始，除了根实例，其他子组件也是vue实例。一个项目或者一个页面是由多个组件组成的，也就是由多个Vue实例组成的。从第二图的控制台，可以看到凡是以$开头的都是Vue实例的属性或者方法。

2、Vue 生命周期函数

从下图可以看出，总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。

创建前/后： 在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有。

载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。

更新前/后：当data变化时，会触发beforeUpdate和updated方法。

销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。

3、简单的模板语法

两个的区别就是v-text不会把HTML标签当做HTML标签显示，只是识别成字符串

4、计算属性、方法、侦听器

计算属性，有缓存概念，只有相关依赖属性变化了，才会执行。方法形式，只要重新渲染页面，就会执行。侦听器，也是只有相关依赖属性变化，才会执行。

如果一个功能这个三种都可以实现，优先选择计算属性，既简洁有提高性能！

5、计算属性的getter和setter

6、样式绑定

可以使用数组形式绑定，也可以使用对象形式绑定，对象的话，key就是样式名，而数组的话，是data里面的属性值。大家可以去在实际开发中体会一下！

7、条件渲染

v-if 是否渲染出来，v-show 是否显示出来，v-if v-if-else v-else如果使用，要连着写，不要中间插入任何其他。

8、列表渲染与改变列表值

列表渲染，一把就是数组形式和对象形式，但是在用v-for 遍历的时候需要注意的是，加属性key。

知道我为什么在加 key 属性的时候没有用index，而是用的他们可以唯一标识的字段呢？

这里大家需要注意一下，首先当在真实项目开发中，只有用到遍历v-for就一定加key属性，因为，不加的话，在用脚手架工具搭建的项目，启动后会有警告提示，而让大家使用数据的唯一标识的字段去作为key的值，是因为这样可以大大的提高性能，而使用index的话，无法让vue重复dom节点，性能降低。

如果想改变数组的值的同时，页面也变化，那么请使用变异方法，push pop shift unshift splice sort reverse

还有一个方法可以解决上面这个问题（数据变化，页面也变化）

就是可以使用全局的set()方法，也可以使用vue实例的$set()方法，具体数组和对象是怎么使用的呢？请看下图代码！

源码已上传到GitHub上了，请自行查看！

如果，文中有什么不对的地方，请大家指出来，共同进步，谢谢！