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-指令名字的形式来调用，例子自定义了聚焦和颜色，这样就达到开始须要的效果了