Vue详解（MVVM设计模式、响应式原理、指令、计算属性、过滤器、动画、组件化、Vuex、VueRouter、Vue-CLI使用、Vue生命周期方法、Vue实例属性、搭配框架Element UI等）

var vm=new Vue({el:'#app',data:{a:1},methods:{},computed:{fun(){return }},directives:{instructName:{bind(el){}},filters:{capitalize1(value){return}},components:{template:'#info'},store:vx,router:vr,watch:{a:function(new,old){}})

Vue指令(directives)

Vue指令（常用指令介绍和使用、自定义全局与局部指令、钩子函数和钩子函数参数等）_AIWWY的博客-CSDN博客

Vue计算属性(computed)

用于解决Vue中插值语法（{{}}中写入数据）中写入表达式没有提示。在新建的Vue对象中添加computed属性，例如var vm=new Vue（{el:'#app',data:{},computed:{fun(){return }}），在插值语法中调用直接写入（{{fun}}）就会运行，注意不能在函数名后加括号，在data中也不能写有重名属性，可以和methods中函数重名（但只会实现methods中的重名函数）。

区别于fun定义在methods

{{fun}}会运行fun中的代码，将最后return的内容调用JSON.stringify()转化为字符串输出。而methods中会打印fun函数，需加括号才能执行。
计算属性只要返回的结果没有发生变化，那么计算属性就只会执行一次（写多个{{fun}}，实际上只会运行一次fun函数，其它多次都会返回第一次的值，如果是methods中的函数是每次都会去执行一遍的。当data中数据改变时，计算属性和方法一样会重新执行，不过一个1遍和一个为n遍）。
计算属性可以是对象，例如fun:{get(){return },set(data){}}，{{fun}}便会运行get函数中的内容，将返回值输出，当我们给fun赋值时例如vm.fun='abc'，便会执行set函数，data为赋值内容即'abc'。

Vue过滤器(filter)

只能在插值语法和v-bind中使用且可以连续使用。

Vue全局过滤器

Vue.fliter('capitalize1',function(value,a1,a2,..,an){return})

使用语法{{name|capitalize1(a1,a2,...,an)}}、bind:class='name|captalize1(a1,a2,...,an)'，第一个参数为过滤器的名称'capitalize1'，第二个参数为过滤器执行的函数，value值是name的值，a1,a2,..,an对应使用时传递过去的参数，使用时会执行该函数，将return的值最后返回输出。多条过滤器连续使用语法{{name|capitalize1|capitalize2|...|capitalizen}}，每个过滤器的value会是上一个过滤器return的值。

Vue局部过滤器

new Vue（{el:'#app',data:{},filters:{capitalize1:function(value){return}}})

参数含义同上。当全局过滤器和局部过滤器重名时，会采用局部过滤器。

Vue.use(plugin,...args)

理解为注册插件，当我们在想要使用插件的时候，需要先npm install -D plugin，然后在main.js中import导入，最后注册Vue.use(plugin)，之后便可以在实例中使用插件，注意Vue.use需要在你调用 new Vue() 启动应用之前完成，其中plugin代表插件名，可以链式编写。

第一个参数应是插件本身，可选的第二个参数是要传递给插件的选项。

插件可以是一个带 install() 方法的对象，亦或直接是一个将被用作 install() 方法的函数。插件选项 (Vue.use() 的第二个参数) 将会传递给插件的 install() 方法。

若 Vue.use() 对同一个插件多次调用，该插件只会被安装一次。

自定义插件

见Vue-CLI的封装自定义插件或VueRouter中自定义VueRouter

Vue动画

Vue动画详解（transition、transition-group标签、自定义动画类名前缀和类名、动画钩子函数、搭配velocity.css、animation.css使用）_AIWWY的博客-CSDN博客

Vue组件化(components)、插槽（slot）

Vue组件化（Vue全局组件和局部组件定义、创建组件和注册组件，组件中使用methods和data，component、keep-alive标签、父子组件的数据与方法传递和多级传递（bus通信））_AIWWY的博客-CSDN博客

mixins

局部混入

一种分发Vue组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项，当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项（合并其它对象中定义相同属性的内容）。例如new Vue({el:'#app',data:{a:1},mixins:[obj1,obj2,..,objn]})，外部定义了obj1~objn对象类似于{data:{},methods:{},computed:{}}，就会将data、methods、computed中的内容全部合并入Vue对应的属性中。

注意：生命周期方法中的混入可以理解为import引入（会先执行混入的，再执行组件中的），data、methods等如果有重名的以组件中的主。

全局混入

通过Vue.mixin({})函数，参数为混入的对象，注意全局混入，会混入vue中的每一个组件中（影响每一个之后创建的 Vue 实例），一般不使用。

Vuex(store)

Vuex（引入、states、mutations、getters、actions、modules、mapState等、namespace、异步请求修改数据图解、搭配devtools调试、数据持久化）_AIWWY的博客-CSDN博客

VueRouter(router)、自定义VueRouter

VueRouter(自定义VueRourter、使用方法、router-view\link、传递参数、路由嵌套、重定向、路由拦截（全局和局部守卫）、命名路由、路由模式（原理）、路由懒加载）_YF-SOD的博客-CSDN博客_router-link点击地址栏地址不变

watch

用于监听Vue中data的数据改变。例如new Vue({el:'#app',data:{a:1},watch:{a:function(new,old){}}})，表示当data中数据a发生变化时，调用watch中的a属性对应的函数，其中系统会给该函数传入2个参数分别为改变之后的值和改变之前的值。

监听路由地址变化

可用于判断是从哪一个url地址跳转过来，通过变量$route.path来监听，例如watch:{'$route.path':function(new,old){}}。

Vue生命周期方法和Vue实例方法（生命周期）

Vue生命周期方法（分类、生命周期方法调用时期示意图详解）、Vue实例方法（生命周期：mount、forceUpdate、nextTick、destroy）_AIWWY的博客-CSDN博客

Vue实例属性

this.$refs

一个对象，持有注册过ref属性的所有 DOM 元素和组件实例。例如div元素上添加属性ref='dom1'，那么this.$refs的对象中便添加了dom1属性并指向div元素（此时this.$refs.dom1指向的便是div原生节点），如果是组件标签也一样，并且还可以使用组件中的数据和方法进行修改赋值。

注意：当绑定的dom节点有异步请求数据时，该属性不一定能在mounted生命周期方法中完成绑定，它会等dom节点上的数据完全渲染后才会完成绑定。可以在setTimeout方法中查看。