[TOC] #VUE Basics
Based on label
v-cloak
Example code:
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="Lib/vue - 2.4.0. Js." "></script>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
</div>
<script>
new Vue({
el:'#app',
data:{
msg:123,}});</script>
</body>
</html>
Copy the codeCloak **{{MSG}} will display the default value and then the real data will be displayed as soon as possible
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="Lib/vue - 2.4.0. Js." "></script>
</head>
<body>
<div id="app">
<p v-cloak>{{msg}}</p>
</div>
<script>
new Vue({
el:'#app',
data:{
msg:12344234,}});</script>
</body>
</html>
Copy the codeIn CSS, add:
[v-cloak] {
display: none;
}
Copy the codeIf it does not work, consider two points:
- The display property of the V-cloak is overwritten by a higher layer, so raise the level:
[v-cloak] {
display: none ! important;
}
Copy the code- Styles are placed in the CSS file imported by @import, can be placed in the CSS file imported by link, or inline styles
v-text
Similar to v-cloak, but comes with a blink solution
The difference between:
- V-cloak needs to solve the flicker problem itself, v-text does not
- V-cloak only replaces the contents of {{key}}, while V-text overwrites the contents of the element
<template>
<div id="app">
<p v-cloak>{{msg}}+++++++++</p>
<p v-text="msg">+++++++++</p>
</div>
</template>
<script>
export default{
data(){
return {
msg:213}; }}</script>
Copy the codeResults page:
V-html
This is kind of like Android, and it overrides the properties that are in there as well
TextView. SetText (Html. FromHtml (MSG));Copy the codeExample code:
<template>
<div id="app">
<p v-cloak>{{htmlMsg}}</p>
<p v-text="htmlMsg"></p>
<p v-html="htmlMsg"></p>
</div>
</template>
<script>
export default{
data(){
return {
msg:213.htmlMsg: Ling Yu is so handsome ~! Painted painted (omega) < / h1 >"
}; }}</script>
Copy the codeRunning results:
V-bind
Binding properties, which can be abbreviated as:
<input type="button" value="Button" :title="htmlMsg"/>
<input type="button" value="Button" v-bind:title="htmlMsg"/>
Copy the codeNote that v-bind can write JS expressions
v-on
Event binding mechanism
<template>
<div id="app">
<p v-cloak>{{htmlMsg}}</p>
<p v-text="htmlMsg"></p>
<p v-html="htmlMsg"></p>
<input type="button" value="Button" :title="htmlMsg"/>
<input type="button" value="Button" v-bind:title="htmlMsg" v-on:click="showAlert(htmlMsg)"/>
</div>
</template>
<script>
export default{
data(){
return {
msg:213.htmlMsg: Ling Yu is so handsome ~! Painted painted (omega) < / h1 >"
};
},
methods: {showAlert:function(msg){
alert(msg)
}
}
}
</script>
Copy the codeV-model
Label for two-way binding of data
Summary exercise: horse racing
<template>
<div>
<p v-text="msg"></p>
<input type="button" value="Start" v-on:click="startRun()" />
<input type="button" value="The end" v-on:click="stopRun()" />
</div>
</template>
<script>
export default {
data() {
return {
msg: "Ling Yu is so handsome! Painted painted (omega)".myInterval: null}; },methods: {
startRun: function () {
if (this.myInterval ! =null) return;
this.myInterval = setInterval((a)= > {
var startStr = this.msg.substring(0.1);
var endStr = this.msg.substring(1);
var result = endStr + startStr;
this.msg = result;
}, 300);
},
stopRun: function () {
clearInterval(this.myInterval);
this.myInterval=null; }}},</script>
Copy the codeEvent modifier
- .stop prevents bubbling
- . Prevent Prevents default events
- .capture Uses event capture mode to add event listeners
- .self fires the callback only if the event is fired on that element (for example, not a child element)
- The. Once event is triggered only once
Several methods of class style binding
Conventional methods
<h1 class="red big">{{msg}}</h1>
Copy the codeV – the bind method
<h1 v-bind:class="['red','big']">{{msg}}</h1>
Copy the codeUsing ternary expressions
<h1 v-bind:class="['red',isBig?'big':'']">{{msg}}</h1>
Copy the codeUse ternary expressions in arrays to improve code readability
<h1 v-bind:class="['red',{'big':isBig}]">{{msg}}</h1>
Copy the codeUse classes directly
<h1 v-bind:class="{red:true,big:isBig}">{{msg}}</h1>
Copy the codeThe complete code is:
<template>
<div>
<! --// Normal method -->
<h1 class="red big">{{msg}}</h1>
<! - v - the bind method -- -- >
<h1 v-bind:class="['red','big']">{{msg}}</h1>
<! -- Use a ternary expression -->
<h1 v-bind:class="['red',isBig?'big':'']">{{msg}}</h1>
<! Use ternary expressions in arrays to improve code readability -->
<h1 v-bind:class="['red',{'big':isBig}]">{{msg}}</h1>
<! -- Use class directly -->
<h1 v-bind:class="{red:true,big:isBig}">{{msg}}</h1>
</div>
</template>
<script>
export default {
data(){
return {
msg:'Ling Yu is a handsome bitch (★ ω ★)'.isBig:true}; }}</script>
<style scoped>
.red{
color: red;
}
.big{
font-size: 24px;
}
</style>
Copy the codeSeveral ways to bind the style property
Normal operation
<! -- General operation -->
<p :style="{color:'red'}">{{msg}}</p>
Copy the codePoint to a class
<! -- Point to a class -->
<p :style="redObject">{{msg}}</p>
Copy the codePoint to an array
<! Pointer to an array -->
<p :style="[redObject,bigObject]">{{msg}}</p>
Copy the codeThe complete code is:
<template>
<div>
<! -- General operation -->
<p :style="{color:'red'}">{{msg}}</p>
<! -- Point to a class -->
<p :style="redObject">{{msg}}</p>
<! Pointer to an array -->
<p :style="[redObject,bigObject]">{{msg}}</p>
</div>
</template>
<script>
export default {
data() {
return {
msg: 'Ling Yu is a handsome bitch (★ ω ★)'.redObject: {color:'red'},
bigObject: {fontSize:'40px'}}; }}</script>
<style scoped>
</style>
Copy the codeSeveral ways to use V-for
Note: in the new version,v-for requires a key. 1. Key can only be a string or number attribute. 2
Just iterating through item
<p v-for="item in list">{{item}}</p>
Copy the codeWant item and index traversal
<p v-for="(item , i ) in list">
{{i+"===="+item}}
</p>
Copy the code#### Traversal objects
<p v-for="(key,val,i) in Handsome">
{{i}} =={{val}} = {{key}}
</p>
Copy the codeA digital iteration
<p v-for="i in 10">{{i}}</p>
Copy the codeThe complete code is
<template>
<div>
<! -- if item is iterated -->
<! --<p v-for="item in list">{{item}}</p>-->
<! Select * from item and index;
<! --<p v-for="(item , i ) in list">-->
<! --{{i+"===="+item}}-->
<! --</p>-->
<! -- Traverse the object -->
<! --<p v-for="(key,val,i) in Handsome">-->
<! --{{i}} =={{val}} = {{key}}-->
<! --</p>-->
<! -- Digital iteration -->
<! --<p v-for="i in 10">{{i}}</p>-->
</div>
</template>
<script>
export default {
data() {
return {
list: [1.32.433.234.32.543.43655.234.4325].Handsome: {
name: 'Ly'.age: "18".sex: "guy"}}; }}</script>
<style scoped>
</style>
Copy the codeV – if and v – show
The same
- Can play the role of a hidden control according to a flag
The difference between
- V-if re-deletes or creates elements each time
- V-show does not delete dom creation, but toggles the disable: None style
conclusion
- V-if has high switching performance consumption
- V-show has a high initial render cost
- If frequent switching is involved, v-show is recommended instead of V-if; If the element may never be displayed for the user to see, v-if is recommended. (Because if an element may never be displayed, use v-show, then it is actually added to the DOM, whereas v-if is only displayed)