1. In addition to the core directives (V-model and V-show) set by default, Vue also allows the registration of custom directives.
We register a global directive, V-focus, that gives the element focus when the page loads:
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title>Vue custom command</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>When the page loads, the input element automatically gets focus:</p>
<input v-focus>
</div>
<script>
// Create the root instance
new Vue({
el: '#app'.directives: {
// Register a local custom directive v-focus
focus: {
// The definition of a directive
inserted: function (el) {
// Focus elements
el.focus()
}
}
}
})
</script>
</body>
</html>
Copy the code
\
\
2.
hook
Hook function
The instruction definition function provides several hook functions (optionally) :
bind: called only once, the first time the directive is bound to an element. You can use this hook function to define an initialization action that will be performed once at binding time.inserted: called when the bound element is inserted into the parent node (the parent node exists, not in the document).update: called when the template to which the element is bound is updated, regardless of whether the binding value changes. Unnecessary template updates can be ignored by comparing the binding values before and after the update (see below for detailed hook function parameters).componentUpdated: called when the template to which the bound element belongs has completed an update cycle.unbind: called only once, when directives are unbound from elements.
Hook function arguments
The hook function takes the following arguments:
-
El: The element bound by the directive that can be used to manipulate the DOM directly.
-
Binding: An object containing the following attributes:
- Name: indicates the command name
v-Prefix. - Value: the binding value of the directive, for example:
v-my-directive="1 + 1", value is the value of2. - OldValue: The value preceding the instruction binding, only in
update和componentUpdatedHooks are available. Available regardless of whether the value changes. - Expression: String format of the binding value. For example,
v-my-directive="1 + 1"The value of expression is"1 + 1". - Arg: Parameter passed to an instruction. For example,
v-my-directive:fooThe value of arg is zero"foo". - Modifiers: An object that contains modifiers. Such as:
v-my-directive.foo.bar, the modifier object modifiers value is{ foo: true, bar: true }.
- Name: indicates the command name
-
Vnode: a virtual node generated by Vue compilation. Refer to the VNode API for more details.
-
OldVnode: Last virtual node, available only in update and componentUpdated hooks.
The following example demonstrates the use of these parameters:
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title>Vue custom command</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app" v-my-directive:hello.a.b="name">
</div>
<script>
Vue.directive('my-directive', {
bind: function (el, binding, vnode) {
var s = JSON.stringify
el.innerHTML =
'name: ' + s(binding.name) + '<br>' +
'value: ' + s(binding.value) + '<br>' +
'expression: ' + s(binding.expression) + '<br>' +
'argument: ' + s(binding.arg) + '<br>' +
'modifiers: ' + s(binding.modifiers) + '<br>'}})new Vue({
el: '#app'.data: {
name: 'Xu Tongbao'}})</script>
</body>
</html>
Copy the code 
3. Sometimes we don’t need other hook functions, we can abbreviate the function as follows:
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title>Vue custom command</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-runoob="{color: 'green', name: 'xutongbao'}"></div>
</div>
<script>
Vue.directive('runoob'.function (el, binding) {
// Set the text and background color
el.innerHTML = binding.value.name
el.style.backgroundColor = binding.value.color
})
new Vue({
el: '#app'
})
</script>
</body>
</html>
Copy the code 