过滤器
1.局部过滤器 在当前组件内部使用过滤器(对某些数据进行装饰)
//声明
filters:{
'过滤器的名字':function(val,a,b){
//a 就是will ，val就是当前的数据
return xxx //返回处理好的结果
}
}
//使用 管道符
数据 | 过滤器的名字('will'，'william')
2.全局过滤器 只要过滤器一创建，在任何组件中都能使用
Vue.filter('过滤器的名字'，function(val,a,b){})
在各个组件中都能使用
生命周期的钩子函数
Vue实例从创建到销毁的过程
diff算法
- [beforeCreate]
- [created]组件创建 ***
- 虚拟DOM React
- 发送ajax 获取数据 实现数据驱动视图
- [beforeMount]
- [mounted] ***
- 获取真实DOM
- [beforeUpdate]
- [updated]
- [activated]
- 激活当前组件
- [deactivated]
- keep-alive Vue提供的内置组件，主要作用，让组件产生缓存
- 停用当前组件
- [beforeDestroy]
- destroyed
- 如果开了定时器，一定要关闭定时器
Vue-router
vue+vue-router 主要来做 SPA（Single Page Application） 单页面应用
vue-router是vue的核心插件
1.下载
<script src ='https://unpkg.com/vue-router/dist/vue-router.js'></script>
2.定义和创建路由
const Index = { // 定义路由组件
data() {
return {}
},
template: `<div>我是首页</div>`
}
const Course = {
data() {
return {}
},
template: `<div>我是课程</div>`
}
routes = [{ //定义路由
path:'/',
component:Index,
},{
path:'/course',
component:Course,
}]
3.创建router实例并挂载到vue中
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
})
new Vue({
el:'#app',
data(){
return {}
},
router
})
命名路由
routes = [{ //定义路由
path:'/',
name:'index', //命名路由
component:Index,
},{
path:'/course',
name:'course', //命名路由
component:Course,
}]
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
})
let App = {
data() {
return {}
},
// router-link和router-view 是vue-router 提供的两个全局组件
//router-view 是路由组件的出口
//router-link默认会被渲染成a标签，to属性默认被渲染成href
template: `
<div>
<div class="header">
<router-link :to = '{name:"index"}'>首页</router-link>
<router-link :to = '{name:"course"}'>免费课程</router-link>
</div>
<router-view></router-view>
</div>
`,
}
动态路由匹配
可以动态的匹配路由地址,但用的还是同一个路由组件
$route 路由信息对象
$router 路由对象 VueRouter
const User = {
data() {
return {
user_id:null
}
},
template: `<div>我是用户{{ user_id}}</div>`,
created() {
console.log(this.$route); //路由信息对象
// 提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。
},
watch: {
'$route'(to, from) {
// 对路由变化作出响应...
console.log(to.params.id);
console.log(from);
this.user_id = to.params.id;
//发送ajax
}
}
}
//创建路由
const router = new VueRouter({
//定义路由规则
routes: [
{
path: '/user/:id',
name: 'User',
component: User
}
]
})
let App = {
data() {
return {}
},
// router-link和router-view 是vue-router 提供的两个全局组件
//router-view 是路由组件的出口
template: `
<div>
<div class="header">
<router-link :to = '{name:"User",params:{id:1}}'>用户1</router-link>
<router-link :to = '{name:"User",params:{id:2}}'>用户2</router-link>
</div>
<router-view></router-view>
</div>
`
}
new Vue({
el: '#app',
//挂载 路由对象
router,
data() {
return {}
},
template: `<App />`,
components: {
App
}
})
编程式的导航
当你点击时，这个方法会在内部调用，所以说, 点击等同于调用 router.push(...)。
声明式:router-link :to="..."
编程式:router.push(...)
// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})