Vue custom command
Custom instruction:
Like components, Vue custom directives are registered globally and locally.
Global directives
Directive (id, [definition]). The first parameter is a custom directive name (” Directive names do not need to be prefixed by v-. They are automatically prefixed by default and must be prefixed when using directives “). The second argument can be object data or an instruction function
<body>
<div id="app">
<input type="text" v-focus>
</div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
Vue.directive('focus', {
inserted: function(el) {
//el represents the element to which the directive binds. The following are the events to which it binds
el.focus();
}
})
</script>
Copy the code- Custom command parameter transmission
<body>
<div id="app">
<input type="text" v-color="msg">
</div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
Vue.directive('focus', {
bind: function(el, binding) {
// Set the background color according to the parameters of the command
el.style.backgroundColor = binding.value.color;
}
})
var vm = new Vue({
el:'#app'.
data: {
msg: {
color:'orange'
}
}
})
Copy the codeSummary: The above are global instructions, and there are local instructions
Local instructions
- Register local custom directives through the“Vue instance“
directivesObject data registers local custom directives.
<div id="app" class="demo">
<! -- Local registration -->
<input type="text" placeholder="I'm a local custom instruction." v-focus2>
</div>
<div id="app1" class="demo">
<! -- Local registration -->
<input type="text" placeholder="I'm local custom instruction 1." v-focus2>
</div>
<script>
new Vue({
el: "#app".
directives: {
focus2: {
inserted: function(el){
el.focus();
}
}
}
})
</script>
Copy the codeSummary: The local directive only applies to the vue instance it defines. In the example above, the input in APP1 does not get focus because the directive was created in app and can only be used in app instance
Summary: The difference between local directives and global directives is not just the difference in scope. The page is slightly different in the loading stage. Global directives are loaded when the root instance is created, just like global components
Form modifier
- V-model. number converts a value to a number
<input type="text" v-model.number='age'>
// Age is number. The default is the string
Copy the code- V-model. trim Removes leading and trailing Spaces from the line
<input type="text" v-model.trim='age'>
The space at the beginning and end of the line in //age is removed by default for form validation
Copy the code- V-model. lazy switches the input event to change
<input type="text" v-model.lazy='age'>
Copy the codeSummary: The default input value changes are updated in real time, and lazy changes wait until the input loses focus