1. Commands learned before
2. Built-in commands
3. Custom Instructions
1. Commands learned before
| Command name | Usage |
| v-bind | A single binding analysis expression can be abbreviated as: xxx |
| v-model | Two-way binding |
| v-for | traverse array/object/string |
| v-on | Binding listener event, can be abbreviated as @ |
| v-if | Conditional rendering (dynamically control whether the node exists) |
|
v-else |
Conditional rendering (dynamic control node exists) |
|
v-show |
Conditional rendering (dynamically control whether the node is displayed) |
Two. Built-in commands
① Built-in commands and usage summary
| Command name | Usage |
| v-text | Update element textContent will replace all label content, only display content, do not parse label |
| v-html | Render content containing html structure to the specified node |
| v-once | After the initial dynamic rendering, all nodes are regarded as static content; future data changes will not cause the update of the v-once structure, which can optimize some performance |
| v-pre | Skip the compilation process of the node where it is located; you can use it to skip Nodes that do not use instruction syntax and interpolation syntax will be more efficient and speed up compilation |
| v-cloak |
The essence is a special attribute. After the Vue instance is created and takes over the container, the v-cloak attribute will be deleted Using css with v-cloak can solve the problem of unparsed {{XXX}} values displayed on the page when the network speed is slow |
② Analyze the built-in tags one by one
(1) v-text: only display content, do not parse tags
（2）v-html
- Function: Render the content containing the html structure to the specified node
- Differences from Interpolation Syntax
① v-html will replace all the content in the node, {{xxx}} will not
② v-html can recognize html structure
- Note: v-html has security issues
① Dynamically rendering any HTML on a website is very dangerous and can easily lead to XSS attacks
② Be sure to use v-html on credible content, not on user-submitted content
③ XSS attack is to find a way to let the user’s browser execute some front-end code that does not exist in this webpage, such as using the document.cookie command to steal the user’s coolkie information
(3) v-once: The value of n is 1 at the beginning, and it will not change after that
(4) v-pre: Applicable to nodes without instruction syntax and interpolation syntax
Nodes using v-pre will not compile
(5) v-cloak: After the Vue instance is created and takes over the container, the v-cloak attribute will be deleted
The following implements a vue library loaded after 5 seconds. During this period, the attributes with v-cloak will not be displayed. After Vue creates an instance and takes over the container, v-cloak will be deleted
Three. Custom instructions
1. Functional style
2. Object style
3. Global custom instructions/local custom instructions
4. Demand case
Requirement 1: Define a v-big command, which is similar to v-text, but will increase the binding value by 10 times
Requirement 2: Define a v-fbind command, which is similar to v-bind, but allows the bound input element to get the focus by default
(1) Custom command syntax
- Local instructions:
1. Object style
new Vue({
directives: {directive name: configuration object}
})
2. Functional style
new Vue({
directives: {instruction name: callback function}
})
3. Global directives
(1) Vue.directive (directive name, configuration object)
(2) Vue.directive(directive name, callback function)
4. Code example
(1) Requirement 1: Define a v-big command, which is similar to v-text, but will increase the bound value by 10 times
<h2>The current value of n is:<span v-text="n"></span></h2>
<!-- Define a v-big directive -->
<h2>The value of n after magnifying 10 times is:<span v-big="n"></span></h2>
<button @click="n + + ">click me + 1</button>
(2) The function will have two parameters. The first parameter is the html element that defines the command. The second parameter is the information of the command. You can get the current value of the command. The command does not add v- when it is defined, but When using it, you need to add v-
<script type="text/javascript">
new Vue({
el: '#root',
data: {
name: 'hello',
n: 1
},
directives: {
// functional
big (element, binding) {
// here this is window
console. log('big', this)
console. log(element, binding)
element.innerText = binding.value * 10
}
}
})
</script>
(3) When will the big function be called
- When the directive is successfully bound to the element (it will be called as soon as it comes up)
- Called when the template containing the directive is reparsed
(4) Requirement 2: Define a v-fbind command, which has a similar function to v-bind, but allows the input element it is bound to get the focus by default
(5) Three callback functions commonly used in configuration objects
-
bind (element, binding) : when the directive is successfully bound to the element
-
inserted (element, binding): Called when the element where the instruction is located is inserted into the page
-
update (element, binding): Called when the template structure where the directive is located is reparsed
(6) The above acquisition of focus needs to be written into inserted, that is, it needs to be called when the element is inserted into the page, otherwise it will not take effect. Called when the template structure where the timing and instructions are located is re-parsed. When the instruction is bound to the element, the element has not been inserted into the page, so using focus() is invalid and must be written as an object. Write focus() into the inserted function, where After the element is inserted into the page, it can be called to take effect
(7) A small problem with the naming of custom commands. If the custom command is multiple words, use the nomenclature of xx-yy instead of the small camel case
<h2>The value of n after magnifying 10 times is:<span v-big-number="n">
When defining a method, you need to enclose it in quotes
You can also use the abbreviated form
(8) Note: this in the custom function is window
(9) Examples of global commands:
- Functional writing
Vue. directive('big', function (element, binding) {
element.innerText = binding.value * 10
})
- Object style
Vue. directive('fbind', {
bind (element, binding) {
console.log(this) // this here is window
element.value = binding.value
console. log('bind')
},
inserted (element, binding) {
element. focus()
console. log('inserted')
},
update (element, binding) {
element.value = binding.value
console. log('update')
}
})