vue中自定义指令的使用

vue中自定义指令的使用方法：全局自定义指令和局部自定义指令
1、全局自定义指令
Vue.directive(‘指令名’,{配置对象})

局部自定义指令

下面的例子是：定义一个v-find指令，让输入框的input默认获取焦点

第一种写法：

	new Vue({
		directives:{指令名:{配置对象}}
	})

第二种写法：

	new Vue({
		directives:{'指令名':function(){}}
	})
可简写为：
	 new Vue({
			directives:{指令名(){}}
	})

<div id="root">
	<h1 v-once>当前的n值：{{n}}</h1>
	<h2>放大10倍n的值是：<span v-big="n"></span></h2>
	<button @click="n++">点击+1</button><br/><br/>
	<hr/>
	<input type="text" v-fbind="n" />
 </div>
 new Vue({
	el:'#root',
	data:{
		n:1
	},
	//局部的自定义指令
	directives:{
		//big自定义指令
		//写成函数格式
		//'big':function(element,binding) {
        //    console.log(element,binding)
         //    element.innerText = binding.value * 10
         // },
		
		//简写方式 当名字长度过长时的写法
		//'big-number'(element,binding) {
		//	console.log(element,binding)
          //  element.innerText = binding.value * 10
         //},
         
         //更加简洁的写法
		big(element,binding) {
     		console.log(element,binding)
            element.innerText = binding.value * 10
        },
		// 局部自定义指令 fbind
		fbind:{
		     // 指令与元素成功绑定时(页面一上来就触发，只触发一次)
		     bind(element,binding){
		         console.log(this)//this指向是window
		         element.value = binding.value
		     },
		     // 指令所在元素被插入页面时，只触发一次
		     inserted(element,binding){
		         element.value = binding.value
		         element.focus()
		     },
		     // 指令所在模板被重新解析时，可触发多次
		     update(element,binding){
		         element.value = binding.value
		     }
		 },
	})

结果如下：

1、全局指令的用法
第一种写法：

Vue.directive(指令名，配置对象)

第二种写法：

Vue.directive(指令名，回调函数)

	<div id="root">
        <h1 v-once>当前的n值：{{n}}</h1>
        <h2>放大10倍n的值是：<span v-big="n"></span></h2>
        <button @click="n++">点击+1</button>
    </div>
   <script type="text/javascript">
        Vue.config.productionTip = false;
         // 全局自定义指令fbind
        Vue.directive('fbind',{
            // 指令与元素成功绑定时(一上来)
            bind(element,binding){
                console.log(this)//this指向是window
                element.value = binding.value
            },
            // 指令所在元素被插入页面时
            inserted(element,binding){
                element.value = binding.value
                element.focus()
            },
            // 指令所在模板被重新解析时
            update(element,binding){
                element.value = binding.value
            }
        })
        
        new Vue({
            el:'#root',
            data:{
                n:1
            },
        })
    </script>

效果图