Basic use of command attributes
1. v-cloak is mainly to solve the flicker problem of interpolation expressions
4. The difference between interpolation expression and v-text/v-html
For the existing value in the element, only the interpolation expression can retain the original value, and add dynamic data on the basis of the original existing value
The reason why v-text and v-htmI cannot keep the original content in the element tag pair is because before using the above two specified attributes, the content in the tag pair will be cleared in advance, and dynamic values will be assigned. If the actual project development in the future requires adding dynamic values based on the original content, we have to choose to use interpolation expressions.
From another perspective, although the interpolation expression will appear page flicker (v-text and vhtm will not appear page flicker), but for the retention of the original content, only the interpolation expression can be completed, so the interpolation expression The formula has irreplaceable advantages.
Compare v-text and v-html
v-text: Mainly used to give pure content. If the content given to the element itself contains html, then v-text will display the htm on the page intact, and these contents cannot be parsed by the browser
v-html: In addition to being able to assign content to front-end elements, more importantly, if the content itself contains htm code, then the html element will be parsed by the browser as the final result displayed after the assignment.
5. v-bind provides instructions for binding attributes
Short form: remove v-bind only use:
<body>
<div id="app">
<input type="text" v-bind:value="str1">
<p v-bind:title="str2">content...</p>
<input type="button" value="submit" :title="str3">
</div>
<script>
var app = new Vue({
el:"#app",
data:{
"str1":"aaaaaa",
"str2":"bbbbbb",
"str3":"ccccccc"
}
})
</script>
</body>2-4 Use v-on event binding
Simplify @
<body>
<div id="app">
<input type="text" :value="str1">
<input type="button" value="点击" v-on:click="fun1"/>
<input type="button" value="点击2" @click="fun1"/>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
"str1":"aaaaaa"
},
//methods可以定义多个 函数，多个函数之间可以逗号分隔
methods:{
fun1(){
alert("abc");
}
}
})
</script>Use of event modifiers
a.stop
Use .stop to stop the bubbling mechanism of events
The bubbling of events in js means that while the inner element is triggered, the outer element will continue to be triggered (the outer element benefits the inner element). In the process of clicking, the inner element is clicked. Layer elements can also be considered as clicking on the outer elements at the same time. So both events will trigger.
In actual project development, there is not much demand to use this event bubbling mechanism, so we need to prevent event bubbling. The effect of preventing event bubbling is that after we click on the inner element, the event bound to the inner element is triggered. Since event bubbling is prevented, the outer element's event will not continue to be triggered.
<body>
<div id="app">
<div style="width: 200px;height: 200px;background-color: red;"@click="fun1">
<div style="width: 100px;height: 100px;background-color: blue;"@click.stop="fun2">
</div>
</div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
"str1":"aaaaaa"
},
methods:{
fun1(){
alert("触发外层div");
},
fun2(){
alert("触发内层div");
}
}
})
</script>
</body>b.prevent the default behavior of preventing links, prohibiting href
<body>
<div id="app">
<a href="http://www.baidu.com" @click="fun1">点击</a>
<a href="http://www.baidu.com" @click.prevent="fun2">点击</a>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
"str1":"aaaaaa"
},
methods:{
fun1(){
alert("触发外层div");
},
fun2(){
alert("触发内层div");
}
}
})
</script>
</body>c.capture
Use .capture to realize the mechanism of capturing trigger events
After adding the .capture modifier, the outer dⅳ event is triggered first, and the inner div event is triggered later. After being modified by .capture, the event will be triggered first.
d.self
self implements a mechanism to prevent event bubbling behavior (we talked about a stop before)
The use of self to achieve the behavior of preventing self bubbling (it does not really prevent bubbling)
e.once
Use the once modifier to trigger the event handler only once
.once needs to be combined with .prevent to use
<div id="app">
<a href="http://www.baidu.com" @click="fun1">点击</a>
//阻止跳转
<a href="http://www.baidu.com" @click.prevent="fun1">点击2</a>
//第一次点阻止跳转，触发点击事件，第二次点直接跳转
<a href="http://www.baidu.com" @click.prevent.once="fun1">点击3</a>
</div>Use v-model to achieve two-way data binding
v-bind can only achieve one-way binding, from m to v
Basic use of v-model
Two-way data binding, not only m can affect v v but also change m
Use v-mode to bind data in two directions. It is worth noting that because the requirements for recording page element values all occur in form elements, v-mode can only be used in form elements. form
<input>系列 type: text; hidden, checkbox, radio。。。
<textarea> <select>
(1) Use of class style
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>好</title>
<style>
.style1{
background-color: brown;
}
.style2{
font-style:italic;
}
.style3{
font-size:30px;
}
</style>
</head>
<body>
<div id="app">
<span :class="['style1','style2',flag?'style3':'']">helloword</span>
<span :class="['style1','style2',{'style3':flag}]">helloword</span>
<span :class="{style1:true}">helloword</span>
<span :class="mystyle">helloword</span>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
"str1":"aaaaaa",
flag:false,
mystyle:{style1:false,stylr2:true}
},
methods:{
}
})
</script>
</body>
</html>Case 1: Pass a class style array and bind the style through v-bind. This form is not much different from the previous form
:class="[style 1, style 2]"
Case 2: Operate the above array boolean? true through the ternary (meta) operator to execute false execution
Case 3: Use object (json) to express the operation of the above ternary (meta) operator (style flag)
Case 4: Reference style by object
:class={};
案例5：mystyle:{style1:false,stylr2:true}
(2)style style supplement
In the actual project development, the use of stye style is not widely used by class. Usually the style attribute is only a further supplementary use of the style of individual specified elements.
Case 1: Reference style objects
:style="reference style object"
Note: When writing style attributes such as color, since it is only a word, there is no need to add quotation marks. Most of the styles under development contain horizontal bars (-), for example: font-style, background- color Wait, when using such a presentation attribute with -, it must be enclosed in quotation marks.
Case 2: Referencing an array of style objects
:style="[style object 1, style object 2]"