【Vue介绍】

Vue.js是一套构建用户界面的渐进式框架。

Vue 只关注视图层， 采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue.js 使用了基于 HTML 的模板语法，允许声明式地将 DOM 绑定至底层 Vue 实例的数据。

Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

 引入vue.js

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

vue中常见的指令和含义

v-text 渲染内容到节点中，不解析html
v-html 渲染内容到绑定的节点中，解析html
v-if 通过条件判断节点是否显示
v-show 通过条件判断节点是否显示
v-on 绑定事件，可以简写为@
v-bind 绑定属性 可以简写:
v-for 循环列表指令
v-model 表单双向绑定指令

 v-if和v-show的区别

当条件改变的时候v-if是通过DOM节点的添加和删除 控制结点的显示隐藏，v-show是通过css样式控制结点的显示隐藏，
v-if的切换成本比较高，v-show的渲染成本比较高，所以当切换的频繁的时候建议使用v-show，如果初次渲染数据比较多，建议使用v-if

 vue中key的作用

唯一标识DOM结点，可以提高vue的渲染效率，也可以避免因DOM结点的插入而导致DOM更新错误的问题。

Vue中常见的修饰符及含义

.stop 阻止事件冒泡
.capture 设置事件捕获
.prevent 阻止默认事件
.self 之间作用在本身触发
.once 事件只触发一次
.navtive 组件触发的是原生的js事件
键盘修饰符操作
.enter, .space, .....等
.number 修饰符可以将 输入的值转化为Number类型
.trim 修饰符会自动过滤掉输入的首尾空格
.lazy 把v-model改为失去焦点触发

Vue中过滤器定义

过滤器分为全局过滤器和局部过滤器，全局过滤器可以在任何页面调用，局部过滤器只能在当前组件调用，过滤器使用管道符|调用，可以串联使用
全局过滤器定义: Vue.filter("过滤器名字",()=>{});
局部过滤器 filters:{过滤器名字}

vue中生命周期

创建阶段

beforeCreate() 创建前阶段，这个时候还不能使用data中的数据

created() 创建完成 最早可以使用data中的数据

挂载阶段

beforeMount:在挂载开始之前被调用：相关的 render 函数首次被调用。

mounted: 挂载完成， DOM节点挂载到实例上去之后调用该钩子。

更新阶段

beforeUpdate:数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。

updated：数据更新完成并且DOM更新完成后调用

销毁阶段

beforeDestroy:实例销毁之前调用。在这一步，实例仍然完全可用。

destroyed:Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定