vue用法

watch用法·

watch:{
//监听属性变化  高级
'content': { //配合 props 使用，用于监听content对象里面值的变化
        handler (newValue, oldValue) {
          this.contentChange()
        },
        deep: true
      },
  //监听路由
      $route( to , from ){   
       console.log( to , from )
        // to , from 分别表示从哪跳转到哪，都是一个对象
        // to.path  ( 表示的是要跳转到的路由的地址 eg: /home );
     },
   //路由深度监听
      $route:{
        handler(val,oldval){
          console.log(val);//新路由信息
          console.log(oldval);//老路由信息
        },
        // 深度观察监听
        deep: true
      },
   // 监听vuex
   '$store.state.test':{
         deep: true,
          handler(val,oldval){
          ...
        }
      }
}

filters 用法

//组件内部
filters: {
        numFilter:function(value) {
           let realVal = Number(value).toFixed(2)
          return realVal
        },
 },
    
import * as filters from './filters' // 全局filter
// 加载过滤器
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

动态绑定行内样式

v-bind:style="{backgroundImage:'url(' + item.videopic + ')', backgroundRepeat:'no-repeat', backgroundPosition:'center center', backgroundSize: 'cover'}"

拓展vue实例

Object.assign(Vue.prototype, {
	navigateTo(pathName, params) {
    let data = {
      path: pathName,
      query: params
    };
    if (!params) delete data.params;
    router.push(data);
  }
})