Vue编写时的一些注意事项（8）（--全局混入 以及 --自定义指令）

1.mixin 全局混入

整个项目都需要用到的方法等这样的可以进行mixin ,但不要滥用，更不要将mixin里面的名字与组件里面的重复

	import Vue from 'vue'
	var mixin = {
	  methods:{
	    like(){
	      console.log('like')
	    },
	  }
	}
	Vue.mixin(mixin)

这样，在任何一个组件里面都能使用这个方法. 如果是移动端项目，一些全局的处理可以写在 **activated (), deactivated ()**中：在vue对象存活的情况下，进入当前存在activated()函数的页面时，一进入页面就触发；可用于初始化页面数据等 – （前提是是使用了 kepp-alive ）

	<keep-alive >
       <component :is="isAddClass ? 'newTemplate' : 'newTemplateTwo' "></component>
    </keep-alive>

运行如下：

当全局mixin 的 option 项与页面的重复，则进行进行合并，或者可以试试 自定义合并策略

2.自定义指令

全局的指令:

	//做一个全局的指令
	Vue.directive('focus', {
	  // 当被绑定的元素插入到 DOM 中时……
	  inserted: function (el) {
	    // 聚焦元素
	    el.focus()
	  }
	})
	

局部的指令：

	directives:{
	    getvalue:{
	    //被绑定元素插入父节点时调用
	      inserted:(el, binding, vnode)=>{
	        console.log(el);//el 都是这个input元素
	      },
	      //指令第一次绑定到元素时调用
	      bind:(el, binding, vnode)=>{
	        console.log(el);//el 都是这个input元素
	      },
	      //发生值的改变的时候,但是可能发生在其子 VNode 更新之前
	      update:(el, binding, vnode,oldVnode)=>{
	       console.log(el);//el 都是这个input元素
	      },
	      //指令所在组件的 VNode 及其子 VNode 全部更新后调用 
	      componentUpdated:(el, binding, vnode,oldVnode)=>{
	        console.log(el);//el 都是这个input元素
	      },
	      //切换页面的时候触发了
	      unbind:(el, binding, vnode)=>{
	        console.log(el);//el 都是这个input元素
	      }
	    },
  },

动态的指令参数，如下：

	<!-- v-getvalue:[argument] = 'number' ： argument在下面可以用binding.arg 去获取 ，[] 与 '' 都要是已定义的变量或具体值，'' 会直接报错，[] 里面如果不是变量就 undefined -->
	
	<input v-focus v-model="number" v-getvalue:[dir] = 'number' />

3.过滤器

定义全局的过滤器：

	Vue.filter(filterName,function(val){
		return String(val).toUpperCase()
	})
	//在new Vue()之前定义
	new Vue({
		...
	})

使用这个过滤器：

	<input v-model="inputVal"/>{{inputVal | filterName}}

效果图：

定义局部的过滤器：

	filters:{
		filterName(val){
			return String(val).toUpperCase()
		}
	}

使用方法与上面是一样的

再定义一个截取特定字符串的函数：

	slice(val){
      return String(val.slice(0,7))
    },

过滤器可以串联使用：

	<input v-model="inputVal"/>{{inputVal | filterName2 | slice}}

效果图：

当全局过滤器和局部过滤器重名时，会采用局部过滤器。

过滤器接收参数：

	<input v-model="inputVal"/>{{inputVal | filterName2(1,2) | slice}}
	<!-- 给filterName2 这个过滤器加了 参数-->

参数打印如下：