局部过滤器和局部自定义指令
局部过滤器与template平级创建
,
filters:{
f1(a){
return a+1
}
}
局部自定义指令与template平级
,
directives:{
myfocus:{
inserted(el,binding){
console.log(el,binding)
el.focus()
}
}
}
组件生命周期
beforeCreate
在初始化实例之后，数据观测（data observer）和 event/watcher配置之前被调用
created
在实例创建完后立即调用。完成数据观测，属性和方法的运算，
watch/event 事件回调。但是挂载还没开始，dom没生成，$el 属性不可见
beforeMount
模板编译挂载之前调用，
先判断对象是否有el选项。如果有，继续编译，如果没有，则停止编
译，意味着停止了生命周期，直到该实例调用vm.$mount(el)。
接着判断是否有template属性，如果有以template属性为模板，
如果没有，就以el属性指向作为模板。
这里生成vm.$el，但指令尚未解析
mounted
模板编译挂载之后调用，vm.$el替换掉el指向的dom
beforeUpdate
数据变更导致虚拟DOM重新渲染之前调用
updated
数据变更导致虚拟DOM重新渲染之后调用
beforeDestroy
实例销毁之前调用
destroyed
vue实例指向的所有东西解除绑定，包括watcher、事件、所有子组件，后续不受vue实例控制
路由
在一个系统中会由很多页面组成，在Vue开发中这些页面通常使用的是Vue中的组件来实现的，那么当在一个页面要跳转到另外一个页面的时候是通过改变url路径来实现的，那么这个时候Vue需要知道当前url对应的是哪个组件页面，这个控制者就是vue-router
- 引入路由文件
-创建一个路由对象VueRouter
var router = new VueRouter({
routes:[
{name:'index',path'/index',component:index}
]
})
- 挂载到vm上面
首页
router-link中to属性必须和路由的path对应
router-link将来会渲染成a标签，to属性会渲染成a标签的href属性，但它的值前面会加个#，变成锚点
var vm = new Vue({
el: '#app',
// 5. 在vue实例中注入路由，这样整个应用程序都会拥有路由了
// router: router,
router,
data: {
}
})
- router-view
通过router-view标签把匹配的组件渲染出来
路由参数
路由添加参数方法 :参数名
{name:'index',path'/index/:id',component:index}
在路由对应的模板中调用路由参数
{{$route.params.id}}
监听参数变化
通过watch监听路由参数
//to表示将要渲染的路由对象，from表示跳转渲染之前的路由对象
watch:{
'$route'(to,from){
// console.log(to)
// console.log(from)
if(to.params.id === '11'){
this.allProducts = '苹果、橘子和香蕉'
}else if(to.params.id === '22'){
this.allProducts = '西红柿、茄子和黄瓜'
}else{
this.allProducts = '牛肉、羊肉和猪肉'
}
}
}