Vue学习笔记

• 主要针对笔者在学习中遇到的一些疑问进行记录
• 以前一直以为概念是不太重要的东西，所以一直疲于记录，但是最近发现这些原理的概念还是要在以后的学习和使用中不断反复琢磨才能更加灵活的使用，因此会在后期的学习中专门记录。

Vue 生命周期

---

Vue2.0 生命周期官网图

从图中我们可以看到Vue运行的整个生命周期以及各个阶段的动作。

• beforeCreate

组件实例刚刚被创建，组件属性计算之前，如data属性等；

• created

组件实例创建完成，属性已绑定，完成了数据的观测，但是DOM结构还没有生成(尚未挂载)，$el属性还不存在，不可用；

• beforeMount

模板编译/挂载之前

• mounted

模板编译/挂载之后，el挂载到实例上后调用，业务逻辑一般会在这里开始；

• beforeUpdate

组件更新之前

• updated

组件更新之后

• activated

组件被激活时调用：for keep-alive

• deactivate

组件被移除时调用：for keep-alive

• beforeDestory

组件销毁前调用，主要解绑一些使用addEventListener监听的事件；

• destoryed

组件销毁后调用

Vue插值

---

• 数据的展示使用{{}}，括号里面可以包括data里面的数据；
• 如果有的时候想输出HTML，而不是将数据解释后的纯文本，可以使用v-html ；

link的内容会被渲染为一个a标签，而不是纯文本，为了防止XSS攻击，可以将“<>”进行转义；

• 如果想显示{{}}标签，而不进行替换,使用v-pre即可跳过这个元素和他的子元素的编译过程;

{{hello,I'm 不会被编译}}

Vue过滤器

---

• Vue支持在{{}}插入的值的尾部添加一个管道符'|'来对数据进行过滤，用来格式化文本，如字母全部大写，货币千位或者逗号分隔符，可以自定义过滤的规则，通过给vue实例添加filters来设置；

过滤器也可以串联，而且可以接收参数

1. {{message |filterA | filterB}}

2. {{message |filterA('arg1',arg2")}}

内置指令

1. v-cloak

不需要表达式，它会在Vue实例结束编译时从绑定的HTML元素上移除，经常和CSS的display:none配合使用；

• v-cloak是一个解决初始化慢导致页面闪动的方法；

2. v-once

定义它的元素或组件只渲染一次，包括元素和组件的所有子节点；首次渲染后，不再随数据的变化重新渲染，被视为静态内容。

3. v-if, v-else-if,v-else

v-else-if要紧跟v-if.v-else要紧跟v-else-if或者v-if

4. v-show

v-show 的用法和v-if基本一致，不过v-show改变元素的display属性，v-show表示的值是false时，元素会隐藏；

• v-show不能再