Most of the time, Vue's own instructions can not meet our needs, such as to add a CSS effect to the element, want to add an automatic focus to the element, this time you need to use a custom instruction

  • Private instruction
  • Global directives

First, let’s look at the effect we want for the input output box to be auto-focused and the font to be red

Private instruction

// Define private directive directives:{'color': {bind:function(el,binding){
	  	  	 	   el.style.color=binding.value
	  	  	 	 }

	  	  	  },
	  	  	  'focus':function(el){
	  	  	  		el.focus()
	  	  	  }
	  	  }
Copy the code

Directives and data, methods are the same, so analyze this code

Directives :{//color for the directive name // There are three hook functions inside the directive'color': {bind:function(el,binding){
	  	  	 	   el.style.color=binding.value
	  	  	 	 }

	  	  	  },
	  	  	  'focus':function(el){
	  	  	  		el.focus()
	  	  	  }
	  	  }
Copy the code

Color is the name of the instruction, and there are three hook functions inside the instruction, respectively

  • bind The element is not inserted into the DOM when the directive is first bound to it
  • inserted The inserted function is executed when the element is inserted into the DOM.
  • update When a VNode is updated, it executes its updated, possibly multiple times

The parameters to the hook function, write two for now

El: The element bound by the directive that can be used to manipulate the DOM directly

For example, v-my-directive=”1 + 1″, the binding value is 2

The specific use

 <input type="text" class="form-control" placeholder="Search for..." v-model="addname" v-color="'red'" v-focus><span class="input-group-btn">
Copy the code
  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("Please enter!")
	  	  			return} this.list.push(obj)}, del(args){var index = this.list.findIndex(res => {this.list.push(obj)}, del(args){if (res.album_id == args) {
            			
              		    return true; }}) // Delete 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=>{
	  	  		letinfo = res.data.result[0].content; console.log(info); this.list=info; })}, // Define private 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}'}}, // Define private directive directives:{'color': {bind:function(el,binding){
	  	  	 	   el.style.color=binding.value
	  	  	 	 }

	  	  	  },
	  	  	  'focus':function(el){
	  	  	  		el.focus()
	  	  	  }
	  	  }
	  })
Copy the code

Called using the v-instruction name, the example customizes the focus and color so that it gets started