目录

Vue简介

Vue引用链接

Vue作用

Vue数据绑定过程

Vue的构建版本

MVVM设计模式

Vue实例方法、响应式原理详解、简易自定义Vue实现

var vm=new Vue({})

Vue指令(directives)

Vue计算属性(computed)

区别于fun定义在methods

Vue过滤器(filter)

Vue全局过滤器

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

Vue局部过滤器

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

Vue.use(plugin,...args)

自定义插件

Vue动画

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

mixins

局部混入

全局混入

Vuex(store)

VueRouter(router)、自定义VueRouter

watch

监听路由地址变化

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

Vue实例属性

this.$refs

Vue实例方法（数据、事件）

Vue-CLI（Command Line Interface）

搭配Vue使用框架

Element UI、Mint UI、Vant UI

Vue官网

---

Vue简介

Vue.js是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue引用链接

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

Vue作用

1. 通过数据驱动节点更新，无需操作DOM来更新界面。
2. 组件化开发，可以将网页拆分成一个个独立的组件来编写。

Vue数据绑定过程

1. 将未绑定的数据的界面展示给用户。
2. 根据模型中的数据和控制区域生成绑定数据之后的HTML代码。
3. 将绑定数据之后的HTML代码渲染在页面上。

Vue的构建版本

运行时版：不支持template模板，需要打包的时候提前编译（vue-cli创建的是运行时版，可以通过在vue.config.js中配置runtimeCompiler:true来转换为完整版的）。

完整版：包含运行时和编译器，体积比运行时版大10K左右，程序运行的时候把模板转换成render函数。

MVVM设计模式

M：Model，数据模型（保存数据，处理数据业务逻辑）；V：View，视图（展示数据，与用户交互）；VM：View Model，数据模型和视图的桥梁（例如M是中国人，V是美国人，VM就是翻译）。

MVVM设计模式最大的特点是支持数据的双向传递（数据可以从M→VM→V，也可以从V→VM→M）。

Vue是基于MVVM设计模式的，被控制的区域View，Vue实例对象：Vue Model，实例对象中的data：Model。

Vue实例方法、响应式原理详解、简易自定义Vue实现

Vue实例方法、响应式原理、自定义简易vue实现（数据$watch|set|delete、事件$on|once|off|emit、响应式原理详解、vue限制）_YF-SOD的博客-CSDN博客_vue watch once

var vm=new Vue({})

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

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

Vue实例方法（数据、事件）

 Vue实例方法、响应式原理（数据$watch|set|delete、事件$on|once|off|emit、响应式原理详解、vue2限制、限制解决方法详解、改变引用、不改变引用）_YF-SOD的博客-CSDN博客_vue watch once

Vue-CLI（Command Line Interface）

Vue-CLI入门（webpack入门、安装配置Vue-CLI（命令、手动、自动版本）、使用Vue-CLI创建组件和Vuex和Vue-router、配置跨域请求数据以及配置webpack添加插件等）_AIWWY的博客-CSDN博客

搭配Vue使用框架

Element UI、Mint UI、Vant UI

Element UI、Mint UI、Vant UI（基础使用、按需引入优化（按需打包使用到的组件）、官方文档链接）_AIWWY的博客-CSDN博客

Vue官网

Vue.js - 渐进式 JavaScript 框架 | Vue.js