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上了,请自行查看!
如果,文中有什么不对的地方,请大家指出来,共同进步,谢谢!
联系客服