vue（二） directive定義全局和局部指令

時間 2019-11-17

標籤 vue directive 定義全局局部指令简体版

原文原文鏈接

directive定義全局和局部指令以及指令簡寫

1.使用Vue.directive()定義一個全局指令    Vue.directive('指令名稱',{對象})
2.參數一：指令的名稱，定義時指令前面不須要寫v-
3.參數二：是一個對象，該對象中有相關的操做函數
4.在調用的時候必須寫v-
5.自定義指令中的經常使用的3個鉤子函數：
    5.1bind：
      1.指令綁定到元素上回馬上執行bind函數，只執行一次
      2.每一個函數中第一個參數永遠是el，表示綁定指令的元素，el參數是原生js對象
      3.經過el.focus()是沒法獲取焦點的，由於只有插入DOM後才生效
    5.2inserted：
      1.inserted表示一個元素，插入到DOM中會執行inserted函數，只觸發一次
    5.3updated：
      1.當VNode更新的時候會執行updated，能夠觸發屢次
6.定義一個局部指令
    測試案例步驟：
    1.首先須要在html中建立一個盒子
    2.接着須要經過實例化Vue而且經過el將盒子所對應的id進行綁定
    3.在盒子裏面所對應的要自定義的標籤上經過v-xxx標註
    局部定義的格式：
      directives：{
            'xxx':{
              bind:function(el,binding){
                el.style.xxx = binding.value
            }
          }
      }
 7.指令函數的簡寫
    function等同於將代碼寫入bind和update裏
    directive：{    
        'xxx'：function(el,binding){
            el.style.xxx = binding.value
        }
    }
複製代碼

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="utf-8" />
  	<title></title>
  	<script src="js/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
  	<div id="box">
  		<p v-fontsize="'20px'" v-color="'green'">{{msg}}<input type="text" v-focus /></p>
  		<p v-color="'red'">{{msg}}<input type="text" v-color="'red'" /></p>
  	</div>
  </body>
  <script type="text/javascript">
  	//使用Vue.directive()定義一個全局指令
  	//1.參數一：指令的名稱，定義時指令前面不須要寫v-
  	//2.參數二：是一個對象，該對象中有相關的操做函數
  	//3.在調用的時候必須寫v-
  	Vue.directive('focus',{
  		//1.指令綁定到元素上回馬上執行bind函數，只執行一次
  		//2.每一個函數中第一個參數永遠是el，表示綁定指令的元素，el參數是原生js對象
  		//3.經過el.focus()是沒法獲取焦點的，由於只有插入DOM後才生效
  		bind:function(el){
  			//el.focus()
  		},
  		//inserted表示一個元素，插入到DOM中會執行inserted函數，只觸發一次
  		inserted:function(el){
  			el.focus()
  		},
  		//當VNode更新的時候會執行updated，能夠觸發屢次
  		updated:function(el){
  			//el.focus()
  		}
  	})
  	//自定義一個設置字體顏色指令
  	Vue.directive('color',{
  		//只要經過指令綁定給了元素，元素必定會顯示在頁面上
  		//通常狀況和樣式有關的使用bind函數
  		bind:function(el,binding){  //經過binding來傳遞值
  			el.style.color = binding.value
  		}
  	})
  	//實例化Vue
  	var vm = new Vue({
  		el:'#box',
  		data:{
  			msg:'測試：'
  		},
  		//定義一個局部指令
  		directives:{  //自定義一個局部指令
  			'color':{  //設置字體顏色
  				bind:function(el,binding){
  					el.style.color = binding.value
  				}
  			},
  			//指令函數的簡寫：
  			//function等同於將代碼寫入bind和update裏
  			'fontsize':function(el,binding){  //設置字體大小
  				el.style.fontSize = parseInt(binding.value) + 'px'  
  			}
  		}
  	})
  </script>
</html>
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。