vue脚手架，过滤器，路由以及生命周期

1. vue脚手架创建项目

vue create 项⽬名

2. 路由

2.1 什么是路由

1. 后端路由：每个url地址都对应着不同的静态资源
2. 前端路由：对于单页面的应用程序，通过hash(#)来实现不同组件之间的切换

2.2 使用路由的步骤

• 引入路由
• 创建路由实例
• 创建映射关系 ：路由对象{path：“路由地址”，component：组件}
• 挂载到vue实例上
• 预留展示区域 ：
• 路由跳转 ：

2.3 redirect 路由重定向

2.4 路由高亮

• router-link-active
• ⾃定义类名：linkActiveClass

2.5 路由嵌套

• 在路由里面声明一个children属性，它是一个数组，数组里面是路由对象，path路径后面不加/

• 在声明的父组件里面写上router-view标签

2.6 路由跳转传参

2.6.1 声明式

• router-link to=“{path:‘路由地址’，query：{传递的参数}}”
• router-link to=“{name:‘路由名字’，params：{传递的参数}}”
  • 必须修改路由地址/:传递的参数的属性名

2.6.2 函数式

• this.$router.push( {path:‘路由地址’，query：{传递的参数}})
• this.$router.push( {name:‘路由名字’，params：{传递的参数}})
• this.$router.replace()
• this.$router.go()
• this.$router.back()

2.6.3 this.$route 接收参数

3. style

3.1 样式隔离 scoped

3.2 声明 lang

4. 过滤器 filter

4.1 作用

常见的文本格式化

4.2 使用的地方

插值表达式、v-bind表达式

4.3 | 管道符

4.4 全局声明

Vue.filter(‘过滤器的名字’，回调函数function(data:管道符前⾯的数据，
format:传递过来的数据){})

4.5 私有声明

和data、methods平级

filters:{ 过滤器的名字(data:管道符前⾯的数据，format:传递过来的数
据){}}

5. 自定义指令 directive

5.1 全局定义

vue.directive(‘⾃定义指令名字’，{只调⽤⼀次：bind(el:绑定的元素，
binding:信息对象){},元素渲染之后执⾏：inserted(){},更新：update(){}})

5.2 私有定义

directives:{1、⾃定义指令名字(){} 2、⾃定义指令名字：{ 只调⽤⼀
次：bind(el:绑定的元素，binding:信息对象){},元素渲染之后执⾏：
inserted(){},更新：update(){}}}

5.3 使用

v-⾃定义指令名字

6. 生命周期

6.1 什么是生命周期

项目从创建、运行到销毁的过程，伴随着各种各样的事件，这些事件称为生命周期。

6.2 beforeCreate

初始化之前，data和methods中的数据还没有初始化。 页面重定向。

6.3 created

初始化之后，data和methods中的数据已经初始化，第一个可以操作data和methods数据的生命周期。数据初始化，接口请求。

6.4 beforeMount

虚拟的DOM挂载

6.5 mounted

真实的DOM挂载，第⼀个可以操作DOM元素的⽣命周期。

6.6 beforeUpdate

更新之前，⻚⾯中的数据是旧的，data中的数据是新的，尚未保持⼀致。（执⾏0次或者⽆数次）

6.7 updated

更新之后，⻚⾯和data中的数据都是新的。（执⾏0次或者⽆数次）

6.8 beforeDestroy

销毁之前，清空定时器和⻚⾯监听

6.9 destroyed

销毁之后。