关于vue--学习笔记

vue作为前端主流的3大框架之一，目前在国内有着非常广泛的应用，由于其轻量和自底向上的渐进式设计思想，使其不仅仅被应用于PC系统，对于移动端，桌面软件（electronjs）等也有广泛的应用，与此诞生的优秀的开源框架比如elementUI，iView， ant-design-vue等也极大的降低了开发者的开发成本，并极大的提高了开发效率。

1. vue框架使用注意事项和最佳经验
   vue学习最快的方式就是实践，根据官网多写几个例子是掌握vue最快的方式。接下来笔者就来总结一下在开发vue项目中的一些实践经验。

1.1 vue生命周期以及不同生命周期下的应用

以上是vue官网上的生命周期的方法，大致划分一下分为创建前/后，挂载前/后，更新前/后，销毁前/后这四个阶段。各个阶段的状态总结如下：

beforeCreate：在beforeCreate生命周期执行时，data和methods中的数据还未初始化，所以此时不能使用data中的数据和methods中的方法

created：data 和 methods初始化完毕，此时可以使用methods 中的方法和data 中的数据

beforeMount：template模版已经编译好，但还未挂载到页面，此时页面还是上一个状态

mounted：此时Vue实例初始化完成了，DOM挂载完毕，可以直接操作dom或者使用第三发dom库

beforeUpdate： 此时data已更新，但还未同步页面

updated：data和页面都已经更新完成

beforeDestory：Vue实例进入销毁阶段，但所有的 data 和 methods ，指令， 过滤器等都处于可用状态

destroyed： 此时组件已经被销毁，data，methods等都不可用

根据以上介绍，页面第一次加载时会执行beforeCreate， created， beforeMount， mounted这四个生命周期，所以我们一般在created阶段处理http请求获取数据或者对data做一定的处理， 我们会在mounted阶段操作dom，比如使用jquery，或这其他第三方dom库。其次，根据以上不同周期下数据和页面状态的不同，我们还可以做其他更多操作，所以说每个生命周期的发展状态非常重要，一定要理解，这样才能对vue有更多的控制权。

1.2 vue常用的指令以及动态指令的使用
指令 (Directives) 是带有 v- 前缀的特殊属性，vue常用的指令有：

v-bind 用于响应式地更新 HTML属性

v-if 根据表达式的值的真假来决定是否插入/移除元素

v-on 用于监听 DOM 事件

v-show 用于决定是否展示该元素，底层通过display：none实现

v-html 在dom内插入html内容

v-for 循环

v-text 渲染指定dom的内容文本

v-cloak 和CSS规则如 [v-cloak] { display: none } 一起用，可以隐藏未编译的 Mustache 标签直到实例准备完毕

以上是比较常用的指令，具体用法就不一一举例了，其中v-cloak主要是用来避免页面加载时出现闪烁的问题，可以结合css的[v-cloak] { display: none }方式解决这一问题。关于指令的动态参数，使用也很简单，虽然是2.6.0 新增的，但是方法很灵活，具体使用如下：
<a v-on:[eventName]=“doSomething”> …