一、简单介绍

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

二、优点

三、安装与部署

1. 直接script标签引入
   
2. 通过NPM下载
   $ npm install vue
3. 通过命令行工具(CLI)
   Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本

四、创建第一个vue应用

	
	
	
	   //这里用cdn的地址引入vue
	
	
		

	  	{{ message }} {{name}}    //引用message和name变量，这个{{}}是插值表达式
		
	
	

五、挂载点（el）

针对上述的简单例子，我们不禁会有几个关于挂载点的小问题？

1. Vue实例的作用范围是哪个呢？

 答：Vue会管理el选项命中的元素及其内部元素

2. 是否可以使用其他选择器？

答：可以使用其他选择器，但是建议使用id选择器

3. 是否可以设置其他的Dom元素呢？

答：可以使用其他的双标签，但是记住，不能挂载到html和body标签上，会报错

六、data数据对象

Vue中用到的数据定义在data中，data可以写复杂类型的数据，渲染复杂类型的数据时 ，只要符合js预发即可

七、Vue常见指令（即元素内部的属性）

• v-text

1、v-text的作用是：设置标签的文本内容（textContent）
2、默认写发会替换掉全部的文本内容，如果想要实现局部替换，则使用插值表达式的形式{{}}
3、例子：

//data中的message属性值会插入到div中作为其文本内容

• v-html

1、用法和v-text相似，作用是：设置元素的innerHTML
2、区别就是v-text只会解析文本内容，然后插入到对应元素内部，但v-html如果引用的值是一个html标签结构的，v-html就会将其解析成html，然后插入到对应元素内部

• v-on

v-on是为元素绑定事件的，它有一种简写方式@（v-on：===@），事件写在与el、data同级的methods对象中

这里还要提到一个事件修饰符（.修饰符），事件后面跟上.修饰符可以对事件进行限制，举个例子，@.entry=“xxx”,这样写只有按entry键才能触发xxx函数

• v-show

它是用来控制元素的显示状态，它的本质是修改元素的display，实现显示隐藏，指令后面的内容最终都会解析为布尔值

• v-if

它也是用来控制元素的显示状态，它的本质是通过操纵dom元素来切换显示状态，表达式为true时，元素存在于dom树中，false时从dom树中移除

• v-bind

作用：为元素绑定属性，完整写法v-bind：属性名，简写：直接省略v-bind，直接：属性名
注意：它只能实现数据的单向绑定，只能从M(model)->V(vi)

• v-for

作用：根据数据生成列表结构，数组经常和v-for一起使用，预发是（item,index）in 数组数据，item和index可以结合其他指令一同使用

• v-model

该指令可以实现表单元素和Model中数据的双向绑定，但是要注意，它只能用在表单元素中（input、select、checckbox、textarea这些）

Demo：inout中输入改变，也会同步影响data中的值，值改变了也会同步影响第一行引用message的显示

八、vue中使用样式

1.使用class类名样式

2.使用内联样式

九、过滤器

vue中允许你自定义过滤器，用于一些常见文本的格式化，它只能用于两个地方插值表达式（{{}}）和v-bind表达式中，一般分为两种（私有和全局）

9.1、全局过滤器

定义方式：

Vue.filter(\'过滤器名称\',function(data){      //直接用Vue来定义filter，所有的实例对象都能用
	return \"新的处理后的内容\"
})

调用方式：

{{ name | 过滤器名称 }}    //这段代码的意思就是说，原先引用的是name变量的值，他会经过过滤器的处理，返回的新的结果作为此处的最终结果

注意：调用过滤器的时候还可以给过滤器传参，放到过滤器定义时的函数的第二个形参位置，因为第一个默认是过滤器 | 符号前的变量值

9.2、私有过滤器

定义方式：

const vm2 =new Vue({
	el:\"#app\",
	data:{...}
	methods:{...}
	filters:{
		过滤器名称：function(){
			....
		}
	}
})

调用方式： 同上。。。

十、自定义指令

10.1、全局自定义指令

定义方式：

Vue.directive(\'自定义指令名称\'，{
	bind:function(el){...}       // 每当指令绑定到元素上时会立即执行该函数，只执行一次，但此时还没插入到DOM树中
	inserted:function(el){...}   //元素插入到DOM中时执行，只执行一次
	update:function(el){...}    //所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
	componentUpdated：function(){...}  //指令所在组件的 VNode 及其子 VNode 全部更新后调用。
	unbind：function(){...}   //只调用一次，指令与元素解绑时调用。
})

//每个函数中的第一个参数永远是el，表示被绑定了指令的那个元素

使用方式：

在你绑定的元素上用v-加上你自定义的指令名称：

10.2、私有自定义指令

定义方式：

directives: {          //也是和上述定义私有过滤器一样写在实例的directives属性中
  focus: {
    bind:function(el){...}       
	inserted:function(el){...} 
	update:function(el){...}  
  }
}

10.3、钩子函数参数

指令钩子函数会被传入以下参数：

el：指令所绑定的元素，可以用来直接操作 DOM。
binding：一个对象，包含以下 property：

• name：指令名，不包括 v- 前缀。
• value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
• oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
• expression：字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。
• arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
• modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
• vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
• oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。

10.3、函数简写

在很多时候，你可能想在 bind 和 update 时触发相同行为，而不关心其它的钩子。比如这样写：

Vue.directive(\'color-swatch\', function (el, binding) {     //直接在定义指令后跟函数，而不是上面的对象
  el.style.backgroundColor = binding.value
})

十一、vue实例的生命周期

11.1、创建期间的生命周期

• beforeCreate
• created
• beforeMount
• mounted

11.2、运行期间的生命周期

• beforeUpdate
• updated

11.3、销毁期间的生命周期

• beforeDestroy
• destroyed
  

十二、Vue过渡&动画

12.1、使用过渡类名实现动画

	


	

	  
	  
	        //transition标签是vue官方提供的，将要动画的元素包裹住
		  
你好
	  
	 
	
	
	

12.2、自定义动画的类名前缀（v-）

	

	    //给transition标签添加一个name属性来自定义动画类名前缀
		
你好
	
		

十三、组件

13.1、什么是vue组件：

vue中的组件的出现是为了拆分Vue实例的代码量的，能够让我们以不同的组件来划分不同的功能

13.2、创建组件的方式

• 方式一（全局组件）

	

	 
	     //直接用标签的形式使用自定义组件
	 
	
	
	

注意：如果在定义组件的时候，写的自定义组件名称是驼峰形式的，如上面那样，那么你在调用组件时要小写并以-连接，如果没有驼峰形式的，直接原样调用即可

• 方式二（全局组件）

	//直接在组将注册方法中，第二个参数中传入一个对象，template属性还是一样定义组件的html结构
	
	Vue.component(\'myCom1\',{
		template:\"
12312312312321
\"
	}) 

缺点：html结构如果有嵌套，这样写成字符串形式太麻烦了，不便于开发书写

• 方式三（全局组件）

	

	     //直接用标签的形式使用自定义组件
	
	
	//直接在控制元素外面定义个模板，这样便于开发者书写，有提示
	
	
	Vue.component(\'myCom1\',{
		template:\"#temp\"   //template原先的手写字符串替换成外面定义的模板元素，id要一致
	}) 

• 方式四（私有组件）

	//定义组件模板接口
	
	
	var app = new Vue({
		el: \'#app\',
		data: {
			flag : false
		},
		components:{     //私有组件还是在实例对象中添加components属性
			组件名称:{
				template:\"#temp\"
			}
		}
	});

13.3、组件中的data

注意：props中的数据是只读的，而组件自身内部的data是可读可写的

• 父组件向子组件传递方法

                 
	    //通过事件绑定方式去传递父组件的show方法，简写	@focus

• 子组件向父组件传递数据

13.6、通过ref获取dom元素和组件引用

直接在想要获取的dom元素和组件上写上ref属性，获取通过this.$refs就能获取，这样就不用操作dom就你能获取对应元素了

十四、路由（vue-router）

14.1、安装

1、直接下载 / CDN

https://unpkg.com/vue-router/dist/vue-router.js

Unpkg.com 提供了基于 NPM 的 CDN 链接。上面的链接会一直指向在 NPM 发布的最新版本。你也可以像 https://unpkg.com/vue-router@2.0.0/dist/vue-router.js 这样指定 版本号 或者 Tag。

在 Vue 后面加载 vue-router，它会自动安装的：

2、NPM下载安装

npm install vue-router

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：

import Vue from \'vue\'
import VueRouter from \'vue-router\'

Vue.use(VueRouter)

14.2、使用

1、导入包文件

2、定义不同组件

const login ={
	template:\"
我是登录组件
\"
}

const register={
	template:\"
我是注册组件
\"
}

3、创建路由对象，当导入vue-router包文件后，在全局window对象中就会有一个路由构造函数，叫做VueRouter，在new的时候可以给构造函数传递一个配置对象

const routerObj =new VueRouter({
	routes:[             //路由规则
		{path:\'/login\',component:login},
		{path:\'/register\',component:register}
	]
})

4、关联实例，注册路由对象

const vm =new Vue({
	el:\"#app\",
	data:{},
	methods:{},
	router:routerObj     //将路由对象注册到实力上，用来监听url地址，然后展示对应的组件
})

5、在视图层（实例关联的元素上占位，用于显示路由匹配的组件）

                 
	  //这是vue-router提供的标签，专门用来占位的，将来路由匹配到的组件就会放到这里显示

14.3、router-link的使用

以前用自己写的a标签超链接实现路由跳转

跳转登录组件
跳转注册组件

vue-router有提供一个router-link标签，默认渲染为a标签

跳转登录组件
跳转注册组件

14.4、redirect重定向的使用

// 通常用于初始的根目录的重定向
routes:[  
	{path:\'/\',redirect: \"/login\"}    
	{path:\'/login\',component:login},
	{path:\'/register\',component:register}
]

14.5、路由传参

1、使用query（查询字符串）方式传递参数

跳转登录组件

注意：这种方式传递参数不需要修改路由匹配规则，如果你要拿到传递的参数，可以在组件内部通过this.$route.query组件实例上获取

2、使用params方式传递参数

跳转登录组件   //这边直接按匹配规则来传参

routes:[      
	{path:\'/login/：id\',component:login},  //这边路由匹配规则中通过占位符来匹配对应路由参数
]

注意：如果想要得到传递的id：123，可以通过this.$route.param获取

14.6、路由嵌套

//如果想要再login登录组件中又生成一个二级路由/login/account1和/login/account2

const router= new UseRouter({
	routes:[
		{ 
			path:\'/login\',
			component:login,
			children:[    //需要在一级路由的children属性中定义路由规则
				{ path:\'account1\',component:account1 }, 
				{ path:\'account2\',component:account2 }
			]
		}
		{ path:\'/register\',component:register}
	]
})

14.7、使用命名视图实现经典布局（头部+侧边栏+主体）

//视图区还是设置3个坑来显示，但是使用name属性说明这个坑就只显示对应name的组件

	
	
	


const header = {
	template:\"
我是header组件
\"
}
const leftCom= {
	template:\"
我是左侧侧边栏组件
\"
}
const rightCom= {
	template:\"
我是主体区组件
\"
}

const router =new VueRouter({
	routes:[
		{path:\"/\",components:{     //这里的路由规则中匹配到/时可以同时显示多个组件，每个组件有key，要和视图区的坑的name对应
			\"default\":header,
			\"leftCom\":leftCom,
			\"rightCom\":rightCom
		}}
	]
})

//布局的样式文件忽略。。。。。

十五、实例属性-watch

1、使用watch来监听data中变量的变化

//通过点击事件来改变data中的flag变量值，用watch来监听flag的值

	

	  点我改变    
	  
{{flag}}
	
	
	

2、watch监听路由地址的变化

watch：{
	‘$route.path’:function(){      //直接监听$route
		console.log(\'路由发生改变了\')
	}
}

十六、实例属性-computed

在computed中可以定义一些属性，这些属性叫做【计算属性】，计算属性的本质其实是一个方法，只不过我们在使用这些计算属性的时候，是把他们的名称直接当成属性来使用，而不是当做方法去调用

注意：
1、计算属性 在引用的时候一定不要加（）去调用，直接把他当成普通的属性（变量）去使用
2、只要 这个计算属性内部有用到data中的数据，而且这些data数据发生了改变，就会触发该计算属性（该方法），也就是会立即重新计算这个计算属性的值
3、计算属性的值会被缓存起来，方便下次直接使用
4、在计算属性的函数中一定要return 值

十七、watch、methods、computed之间的区别

1. computed：属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算属性，主要用作普通属性来使用，而不是方法
2. methods：方法表示一个具体的操作，主要用来些业务逻辑的
3. watch：一个对象，键是需要监听的表达式，值是对应回调函数，主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作，可以看作是computed和methods的结合体

十八、页面使用render渲染组件

const login ={
	template:\"
我是登录组件
\"
}

const vm =new Vue({
	data:{},
	methods:{},
	render:function(createElements){  //createElement是一个方法，调用它，会把指定的组件模板渲染为html结构
		return createElements(login)  
	}
})

注意：这种render方式渲染组件，这个return 返回的组件内容会替换掉上面el挂载的那个元素（整个替换），不想以前那种通过component形式渲染组件，那个只是在对应位置放了一个组件而已，不影响div中其他存在的元素

十九、webpack中导入Vue

1、回顾下，页面中是如何导入Vue的？

//直接通过script标签导入

2、webpack中导入Vue

1. 方式一

//先通过npm下载Vue包
npm i vue --save

//然后通过import导入,但是这样的方式导入需要注意，这样导入的vue的构造函数功能并不齐全，只提供了runtime-only的方式，所以如果想要直接import导入，可以通过相对路径去导入对应的完整vue包文件
import Vue from vue   //x
import Vue from \"../node_modules/vue/dist/vue.js\"  //√，引入完整功能的vue.js文件

1. 方式二

如果我就想直接通过import直接引入怎么办？

import Vue from \"vue\"  //引入方式不变

但需要在webpack.config.js配置文件中去修改vue包文件的路径，增加resolve属性，vue$的意思是：当遇到vue结尾的文件导入时，去右侧的指定路径去找

二十、webpack页面中导入自定义组件（.vue文件）

1、先单独定义login.vue组件文件

2、页面中导入

import login from \'./login.vue\'

3、由于webpack默认解析不了vue文件格式，所以需要再下载对应的loader

npm i vue-loader vue-template-compiler -S

4、然后再Vue实例中通过render属性渲染组件（webpack中不能用components的方式渲染组件）