Vue officially provides some commonly used instructions v-text, v-html, v-model, v-if, v-show, etc. In addition, Vue also allows developers to customize related instructions. It is divided into private custom directives and global custom directives. The difference between them is: in each vue component, private custom directives can be declared under the directives node, and private custom directives only take effect in this component; globally shared custom directives Defining a directive needs to be declared via Vue.directive().
Here's a practical example:
<div id="app">
<input type="text" v-bind:value="n">
<br>
focus:<input type="text" v-my-focus:value="n">
N:<p v-text="n"></p>
N:<p v-add="n"></p>
<input type="text" v-add:value="n">
<input type="text" v-add:value="n">
<button @click="n++">click</button>
<p>{{a}}</p>
</div>
<script>
Vue.config.productionTip=false;
//
Vue.directive("my-focus", function(element,binding){
element.focus();
})
var vm = new Vue({
el: '#app',
data: {
n:10,
a:undefined
},
methods: {},
directives:{
add(element,binding){
console.log(this);
console.log(element,binding);
// element.innerText=binding.value+100;
element.value=binding.value;
}
/* add:{
bind(element,binding){
console.log(this);
console.log(element,binding);
element.innerText=binding.value+100;
},
inserted(element,binding){
console.log(this);
console.log(element,binding);
element.innerText=binding.value+100;
},
update(element,binding){
console.log(this);
console.log(element,binding);
element.innerText=binding.value+100;
}
} */
}
});
</script>
Summary:
- bind: will only be called once, which means that it will be called when the instruction is bound to the element for the first time;
- update: When the page data is updated, this function will be triggered;
- inserted: Called when the element where the instruction is located is inserted into the page.
Comments
Post a Comment