Vue instructions
-
Q: What are instructions?
- The essence of the instruction is the Vue custom attribute in the label.
- The command format starts with "v-", such as: v-cloak, v-text, v-html, etc.
[Note]: Use v-html as little as possible or not, because it may cause XSS attacks.
-
Q: What is the function of the instruction?
- When the value of the expression changes, the collateral effects produced by it will act on the DOM responsively. (Simplified operation)
Common instructions
1. v-cloak
- Function: Solve the flickering problem caused by the time difference when the browser loads the page
- Principle: first hide the element mounting position, handle the rendering, and then display the final result
- Note: need to be used with css rules
- If there are multiple elements that need to solve the flicker problem later, you can write v-cloak on the follow element
Example
<style>
[v-cloak]{
display: none;
}
</style>
<body>
<!-- v-cloak -->
<div v-cloak>
{
{str1}}
</div>
</body>
2. Data binding properties
- v-text fill with plain text
- More concise than interpolation expression
- There is no flickering problem of interpolation expressions
- v-html fill HTML fragments
- There are security issues
- The internal data of this website is available, but the data from the third room is not available
Sample code
<body>
<div id="app">
<!-- 插值表达式形式 -->
<div>{
{str1}}</div>
<div>{
{str2}}</div>
<!-- 上面直接原样渲染出来 -->
<!-- v-text 与 插值表达式形式一样 -->
<div v-text='str1'></div>
<div v-text='str2'></div>
<!-- v-html 会解析字符串中的标签 -->
<div v-html='str1'></div>
<div v-html='str2'></div>
</div>
</body>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
str1: '迫使vue示例重新渲染。注意它仅仅影响示例本身和插入插槽内容的子组件，而不是所有子组件',
str2: '<a href="http://www.baidu.com">百度</a>',
}
})
</script>
-
v-pre fill original information
-
Skip the compilation process of the expression and display the original information
<span v-pre>{
{这里不会被编译}}</span>
Sometimes we don’t want to run the expression in the instruction, we just need to add quotation marks to the expression, for example:
<div v-html='"msg"'></div>
3.v-once
- Role: Only render elements and components once, after which the elements and components will lose the responsive (data level) function
- How to understand responsive
- Responsive layout: change the layout as the screen size of the terminal device changes
- Data response: The page changes after the data changes, and the data in the data change code in the page also changes (two-way data binding)
<!-- 动态修改msg值，此绑定将不会发生改变 -->
<div v-once>{
{msg}}</div>
4.v-bind
- Function: dynamic binding of one or more attributes [in the component: once declared, used multiple times]
- Scenario: It will be used when taking certain data
<!-- v-bind 绑定href属性值 -->
<a v-bind:href="url" v-bind:target="type">跳转</a>
<!-- v-bind 绑定href属性值 简写形式 -->
<a :href="url" :target="type">跳转</a>
Sample code
<!-- #app中的 v-bind -->
<a :href="url" :target="type" :alt="alt">{
{alt}}</a>
<!-- script vue实例中的data -->
data: {
url:'https://baidu.com',
type:'_blank',
alt:'百度'
}
5.v-on
5.1 Basic use
- Role: binding event listener (event binding)
- Scenario: It will be used when taking certain data
- Example
<!-- 常规写法 -->
<button v-on:click="num++">点击</button>
<!-- 缩写 -->
<button @click="num++">点击</button>
<!-- 事件处理函数调用:直接写函数名 -->
<button @click="say">点击</button>
<!-- 事件处理函数调用:常规调用 -->
<button @click="alert('123')">点击</button>
If the event processing function is a custom function, you need to define it first. The definition method is as follows:
...
data: {
...
},
methods:{
functionName:function(arg1,arg2...){
//something to do
}
}
Note: Remember not to write business logic directly in the event binding v-on attribute expression, for example @click="alert('123')"
Event handling function pass parameters
<button @click="say('hi',$event)">点击</button>
- Attention points in the transmission and reception of event objects
- If the event object directly uses the function name and does not write the parentheses, the so-called unique parameter of the event object will be passed by default.
- If you use a regular custom function call (as long as the parentheses are written), then if you need to use the event object, it must be passed as the last parameter, and the name of the event object must be "$event"
5.2 Event modifier
- Meaning: the specific behavior used to handle the event
Example
<!-- 停止冒泡 -->
<button @click.stop="say">点击</button>
<!-- 阻止默认行为 -->
<button @click.prevent="say">点击</button>
<!-- 串联修饰符 -->
<button @click.stop.prevent="say">点击</button>
5.3 Key modifier
- Meaning: When listening to keyboard events, we often need to check detailed keystrokes. Vue allows v-on to add key modifiers when listening to keyboard events
Example
<!-- 只有在 key 是 enter 回车键的时候调用 -->
<button v-on:keyup.enter="submit">点击</button>
<!-- 只有在 key 是 delete 键的时候调用 -->
<button v-on:keyup.delete="handle">点击</button>
6. Loop branch instruction
6.1 Cycle instructions
- Function: Render according to a set of data or a list of options for objects
- Command: v-for
- Example 1 Array traversal use
<!-- 模板部分 -->
<ul>
<!-- 直接取值 -->
<li v-for='item in fruits'>{
{item}}</li>
<!-- 带索引 -->
<li v-for='（item ,index）in fruits'>{
{item}}{
{index}}</li>
</ul>
<!-- js部分 -->
data:{
fruits:['apple','pear','banana']
}
Details: The role of the key, improve performance, does not affect the display effect (if there is no id, you can consider using an index instead)
- Example 2 Use of object traversal
<!-- 模板部分 -->
<ul>
<li v-for='（value,key,index）in obj'>{
{value +'-'+key+'-'+'index}}</li>
</ul>
<!-- js部分 -->
...
data:{
obj:{
username:'lucy',
age:20,
gender:'male'
}
}
...
6.2 Branch instructions
Function: Determine whether to render the element according to the Boolean value of the expression
- v-if
- v-else-if
- v-else
- v-show switches the display css attribute of the element according to the true and false value of the expression
Example
<!-- 模板部分 -->
<div v-if="score >= 90"> 优秀 </div>
<div v-else-if="score >= 80 && score < 90"> 良好 </div>
<div v-else-if="score >= 70 && score < 80"> 一般 </div>
<div v-else> 不及格 </div>
<!-- v-show -->
<div v-show='flag'>测试v-show</div>
<!-- JavaScript部分 -->
......
data: { score: 88, flag:false }
......
Thinking: What is the difference between the v-if series and v-show??
v-if: whether the control element is rendered
v-show: whether the control element is displayed (rendered, display: none)