Vue學習（二）自定義指令

很多時候Vue自帶的指令滿足不了我們的需求，列如想給元素加個css效果，想給元素加個自動聚焦等,這個時候就需要用到自定義指令了

• 私有指令
• 全域性指令

首先來看下我們想要的效果input輸出框自動聚焦和字型變紅

私有指令

 	  // 定義私有指令
	  	  directives:{
	  	  	 'color':{
	  	  	 	 bind:function(el,binding){
	  	  	 	   el.style.color=binding.value
	  	  	 	 }

	  	  	  },
	  	  	  'focus':function(el){
	  	  	  		el.focus()
	  	  	  }
	  	  }
複製程式碼

注意directives和data，methods是同級的，來分析一下這段程式碼

	  // 定義私有指令
	  	  directives:{
	  	     //color為指令名字
	  	     //指令內部有三個鉤子函式
	  	  	 'color':{
	  	  	 	 bind:function(el,binding){
	  	  	 	   el.style.color=binding.value
	  	  	 	 }

	  	  	  },
	  	  	  'focus':function(el){
	  	  	  		el.focus()
	  	  	  }
	  	  }
複製程式碼

color為指令名字，指令內部有三個鉤子函式分別為

• bind 在元素剛繫結了指令的時候，還沒有插入到 DOM中去
• inserted 表示元素 插入到DOM中的時候，會執行 inserted 函式【觸發1次】
• update 當VNode更新的時候，會執行 updated， 可能會觸發多次

鉤子函式的引數，暫時寫兩個

el:指令所繫結的元素，可以用來直接操作 DOM

binding:一個物件，其實的value值是指令的繫結值，例如：v-my-directive="1 + 1" 中，繫結值為 2

具體用法

 <input type="text" class="form-control" placeholder="Search for..." v-model="addname" v-color="'red'" v-focus><span class="input-group-btn">
複製程式碼

  const vm = new Vue({
	  	 el:"#app",
	  	 data:{
	  	  	addname:'',
	  	  	list:[],
	  	  	ctime:new Date()
	  	  	// bg:{
	  	  	// 	background:`url(${this.list.pic_small})`
	  	  	// }
	  	  },
	  	  methods:{
	  	  	add(){

	  	  		let id = Math.random().toString(36).substr(2);
	  	  		let obj = {
	  	  			album_id: id,
					album_title:this.addname ,
					all_rate: "",
					author: "",
					biaoshi: "",
					pic_big: "",
					pic_small: "",
					rank_change: "",
					song_id: "",
					title: ""
	  	  		}
	  	  		if(!obj.album_title){
	  	  			alert("請輸入內容！")
	  	  			return
	  	  		}
	  	  		this.list.push(obj)
	  	  	},
	  	  	del(args){
	  	  		//遍歷list

	  	  		 var index = this.list.findIndex(res => {

            		if (res.album_id == args) {
            			
              		    return true;
            		}
          		})
	  	  		//刪除
	  	  		this.list.splice(index,1)
	  	  	},
	  	  	search(addname){
	  	  		return this.list.filter(item=>{
	  	  			if(item.album_title.includes(addname)){
	  	  				return item
	  	  			}
	  	  		})
	  	  	}
	  	  },
	  	  mounted(){
	  	  	axios.get('https://api.apiopen.top/musicRankings').then(res=>{
	  	  		let info = res.data.result[0].content;
	  	  		console.log(info);
	  	  		this.list=info;
	  	  	})
	  	  },
	  	  //定義私有過濾器
	  	  filters:{
	  	  	timechange:function (datastr) {
	  	  		var dt = new Date(datastr)
	  	  		var y = dt.getFullYear()
	  	  		var m = dt.getMonth().toString().padStart(2,'0')
	  	  		var d = dt.getDate().toString().padStart(2,'0')
	  	  		var hh= dt.getHours().toString().padStart(2,'0')
	  	  		var mm = dt.getMinutes().toString().padStart(2,'0')
	  	  		var ss = dt.getSeconds().toString().padStart(2,'0')
	  	  		return  `${y}-${m}-${d}  ${hh}:${mm}:${ss}`
	  	  	}
	  	  },
	  	  // 定義私有指令
	  	  directives:{
	  	  	 'color':{
	  	  	 	 bind:function(el,binding){
	  	  	 	   el.style.color=binding.value
	  	  	 	 }

	  	  	  },
	  	  	  'focus':function(el){
	  	  	  		el.focus()
	  	  	  }
	  	  }
	  })
複製程式碼

使用v-指令名字的形式來呼叫，例子自定義了聚焦和顏色，這樣就達到開始需要的效果了