1. v-once
Render elements and components only once. For subsequent re rendering, the element / component and all its child nodes are treated as static content and skipped.
This can be used to optimize update performance.
<div id="app">
<input type="text" v-model="msg"/>
<p v-once>You enter:{{msg}}</p>
</div>
<script type="text/javascript">
let app = new Vue({
el:"#app",
data:{
msg:"This is the original value"
}
})
//v-once updates the rendering only once, and subsequent changes have no effect
2. v-text
The v-text instruction is used to update the text contained in the label, and its effect is the same as that of double braces
The following two writing methods have the same effect
<p>mustache:{{msg}}</p>
<p v-text="msg"></p>
3. v-html
Help us bind some data containing html code on the view, such as "hello,vue", which will parse the html code
Otherwise, it will be treated as a string
<p v-text="msg"></p> <!-- Plain text output as is --> <p v-html="msg"></p> <!-- v-html Render html -->
4. v-show
The value of the v-show instruction is true/false, corresponding to show / hide respectively. It is the display css genus used to control elements
[display:none], applicable to frequent switching of display / hide
<div id="app">
<p></p>
<p v-show="show1">I am true</p>
<p v-show="show2">I am false</p>
</div>
<script type="text/javascript">
let app = new Vue({
el:"#app",
data:{
show1:true,
show2:false
}
})
</script>
5. v-pre
The html source code will be output without parsing, and the rendering effect is equivalent to < pre > < / pre >
<p v-pre><!-- This instruction can be used when outputting as is in scenes that do not need parsing -->
{{msg}}<br>
<a v-bind:href="url">Baidu</a>
</p>
6. v-if
The tag set to true is successfully rendered, while the tag set to false is directly replaced by a line of comments
It is parsed and rendered.
The difference between v-show and v-if
If you need to switch the displayed / hidden frequently, use v-show;
If it is unlikely to switch between show / hide after running, use v-if.
<div id="app">
<p v-if="if_1">{{str1}}</p>
<p v-if="if_2">{{str2}}</p> //Expressions can also be written in v-if
</div>
<script type="text/javascript">
let app = new Vue({
el:"#app",
data:{
if_1:true,
if_2:false,
str1:"I'm serious",
str2:"I can confuse the false with the true"
}
})
</script>
v-else
Two Tags: the first uses the v-if instruction with a value of false, and the second uses the v-esle instruction once the first tag
The value of the v-if instruction is true, and the second one is ignored
Label. Only one of v-if and v-else will be rendered.
<p v-if="true">true</p> <p v-else>false</p>
v-else-if
The usage is the same as if... else if... else if... else in js native
7. v-cloak
When the data is delayed, the code is hidden and no code is output
<div id="app" v-cloak> <!-- When the data is delayed, the code is hidden and no code is output -->
{{msg}}
</div>
<script type="text/javascript">
setTimeout(function(){
let app = new Vue({
el:"#app",
data:{
msg:"hello vue!"
}
})
},3000)
</script>
//Set in css
<style type="text/css">
[v-cloak]{
display:none;
}
</style>
8. v-for traversing arrays / objects
Traversal array
<div id="app">
<ul>
<!-- v-for="value in Array name" -->
<li v-for="item in items">{{item}}</li>
</ul>
</div>
<script type="text/javascript">
let vm = new Vue({
el:"#app",
data:{
items:["I","yes","number","group"]
}
})
</script>
Traversal object
div id="app">
<ul>
<!-- v-for=(Value, index) in array/object -->
<!-- When traversing objects, if necessary index Indexes,Three parameters must be added before value,key,index -->
<li v-for="(value,key,index) in student">{{index}} - {{key}} : {{value}}</li>
</ul>
</div>
<script type="text/javascript">
let vm = new Vue({
el:"#app",
data:{
student:{
name:"Here is the object",
sex:"male",
num:233
}
}
})
</script>
9. v-bind binding attribute
<body>
<div id="app">
<img v-bind:src="imgUrl" :alt="imgAlt"> //Abbreviated as:
</div>
</body>
<script type="text/javascript">
let vm = new Vue({
el:"#app",
data:{
imgUrl:"https://cn.vuejs.org/images/logo.svg",
imgAlt:"logo"
}
})
</script>
Bind array
<body>
<div id="app">
<!-- Binding array internal access is variable name string binding-->
<p :class="[classA,classB]">vue.js Learning tutorial</p>
</div>
</body>
<script type="text/javascript">
let vm = new Vue({
el:"#app",
data:{
classA:"class-a",
classB:"class-b"
}
})
</script>
Binding object
<body>
<div id="app">
<p :class="{
active:isActive, <!-- Class name can be quoted or not -->
'danger':isDanger,
'error':isError,
}">vue.js Learning tutorial</p>
</div>
</body>
<script type="text/javascript">
let vm = new Vue({
el:"#app",
data:{
isActive:true,
isDanger:true,
isError:false
}
})
</script>
10. v-on binding event abbreviation:@
<body>
<div id="app">
<button @click="say('Tom',$event)">click</button>
</div>
</body>
<script type="text/javascript">
let vm = new Vue({
el:"#app",
methods:{
say(name,event){
console.log('hello,' + name);
console.log(event)
}
}
})
</script>
v-on modifier
stop: prevent event bubbling
prevent prevents the browser from default behavior
enter press the enter key to trigger
once: only one callback is triggered
<body>
<div id="app">
<div @click="divClick">
div
<!-- stop Prevent event bubbling -->
<button @click.stop="btnClick">click</button>
</div>
</div>
</body>
<script type="text/javascript">
let vm = new Vue({
el:"#app",
methods:{
btnClick(){
console.log("btnClick")
},
divClick(){
console.log("divClick")
}
}
})
</script>
11. v-model data binding
What you enter in the text box is what follows
<div id="app">
<input type="text" v-model.lazy="msg" />
<p>Your input:{{msg}}</p>
</div>
<script>
const app=new Vue({
el:"#app",
data:{
msg:""
}
})
</script>
v-model modifier
Triggered when lazy loses focus
. number if you want to automatically convert the user's input value to a numeric type, you can add the number modifier to the v-model
. trim if you want to automatically filter the first and last space characters entered by the user, you can add a trim modifier to the v-model