VUE04

局部过滤器和局部自定义指令

局部过滤器与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="/index">首页</router-link>
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 = '牛肉、羊肉和猪肉'
        }
      }
    }