Vue學習（二）自定義指令

時間 2019-12-11

標籤 vue 學習自定義指令简体版

原文原文鏈接

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

私有指令
全局指令

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

私有指令

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

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

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

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

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

color爲指令名字，指令內部有三個鉤子函數分別爲api

bind 在元素剛綁定了指令的時候，尚未插入到 DOM中去
inserted 表示元素插入到DOM中的時候，會執行 inserted 函數【觸發1次】
update 當VNode更新的時候，會執行 updated，可能會觸發屢次

鉤子函數的參數，暫時寫兩個

el:指令所綁定的元素，能夠用來直接操做 DOMbash

binding:一個對象，其實的value值是指令的綁定值，例如：v-my-directive="1 + 1" 中，綁定值爲 2app

具體用法dom

<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()
	  	  	  }
	  	  }
	  })
複製代碼