1. Interpolation
text < span>Message: {{ msg }}</span>
Raw HTML < span v-html="rawHtml"></span>
attribute < div v-bind:id="dynamicId"></div>
event < a v-on:click="doSomething">...</a>
Javascript expression < div>{{ number + 1 }}</div>
2. Conditional rendering
v-if
When exp returns true, the content of h1 will be rendered. Otherwise, v-if can be used alone to render the content in the v-else instruction
<h1 v-if="exp">Vue is awesome!</h1>
<h1 v-else>Oh no</h1>
v-show
V-show simply switches the CSS property display of the element. If you need to switch very frequently, it is better to use v-show
<h1 v-show="ok">Hello!</h1>
Using both v-if and v-for is not recommended. When v-if is used with v-for, v-for has a higher priority than v-if.
difference:
V-IF and v-else can display and hide dom nodes by controlling their rendering
v-show Display and hide are realized by controlling the display in css style of dom node
When a component is frequently displayed and hidden, v-show is better
v-if will frequently render the number of dom, occupy resources and affect the running efficiency of the code
List rendering v-for
Used to render list data. The v-for instruction requires a special syntax in the form of item in items, where items is the source data array and item is the alias of the array element being iterated.
<ul>
<li v-for="item in items" :key="item.message"> {{ item.message }} </li>
</ul>
When items is an array, item is an array element
<ul>
<li v-for="(item,index) in items" :key="item.message"> {{ item.message }} </li>
</ul>
Index means index
<ul>
<li v-for= "(value,key,index) in obj" :key="value"> {{ value}} </li>
</ul>
When obj is an object, value is the attribute value, key is the attribute name, and index is the index,
class binding
The class list and inline style of operation elements are a common requirement of data binding. Because they are attribute s, we can use v-bind to deal with them: we only need to calculate the string result through an expression. However, string splicing is cumbersome and error prone. Therefore, Vue has made special enhancements when using v-bind for class and style. In addition to strings, the type of expression results can also be objects or arrays.
< div v-bind: class = "{active: isActive}" > < / div > when isActive is true, the div has the active class
<div v-bind:class="[activeClass, errorClass]"></div>
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
Property binding
The v-bind instruction can be used to responsively update the HTML attribute, and the parameters to be accepted are indicated by a colon after the name of the v-bind instruction.
<a v-bind:href="url"></a>
url is a variable, indicating that the value of the url variable is dynamically assigned to the href attribute of the a tag. Note that the type of url in vue is passed to the href attribute.
<a :href="url"></a>
Because attribute binding is more likely to be used in vue, a short form is provided here
style binding
The object syntax of v-bind:style is very intuitive -- it looks very much like CSS, but it's actually a JavaScript object. CSS property names can be named by camel case or kebab case
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<div v-bind:style="styleObject"></div>
data: { styleObject: { color: 'red', fontSize: '13px' } }
<div v-bind:style="[baseStyles, overridingStyles]"></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bye Vue</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
{{msg}}
<button v-on:click="clickHandler">Modify data</button>
<p v-bind:title="title">v-bind instructions</p>
<div class="content" v-html="content">
</div>
<input type="text" v-on:input="inputHandler">
<input type="text" @input="inputHandler">
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: 'hello vue',
title: 'I am P label',
content: '<h3>I'm a level 3 title</h3>'
},
methods: {
clickHandler() {
this.msg = 'Hello vue'
},
inputHandler(event) {
console.log(event.target.value);
}
}
})
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bye Vue</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<div v-if="isLogin">{{welcome}}</div>
<div v-else>{{msg}}</div>
<!-- <div v-show="isLogin">{{welcome}}</div>
<div v-show="true">{{msg}}</div> -->
<button v-if="isLogin" @click="isLogin = false">sign out</button>
<button v-else @click="loginHandler">Sign in</button>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: 'Please login',
isLogin: false,
welcome: 'Welcome'
},
methods: {
loginHandler() {
this.isLogin = true
}
}
})
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bye Vue</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item, index) of arr" :key="index">{{item}}{{index}}</li>
</ul>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
arr: ['Zhang San', 'Li Si', 'Wang Wu', 'Passerby a', 'Passerby B']
},
methods: {
clickHandler() {
this.msg = 'Hello vue'
}
}
})
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bye Vue</title>
<script src="../js/vue.js"></script>
<style>
.active {
background-color: orange;
font-size: 24px;
border: 1px solid #ccc;
}
.box {
background-color: paleturquoise;
color: palevioletred;
margin: 10px;
}
</style>
</head>
<body>
<div id="app">
<div :class="{ active: isActive }">Block level element</div>
<div :class="[active1, box1]">Block level element</div>
<div :class="[isActive? active1 : box1]">Block level element</div>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
isActive: true,
active1: 'active',
box1: 'box'
},
methods: {
}
})
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bye Vue</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<div :style="{color: 'red', fontSize: '24px'}">Block level element</div>
<div :style="style1">Block level element</div>
<div :style="[style1, style2]">Block level element</div>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
style1: {
color: 'orange',
backgroundColor: 'pink',
fontSize: '24px',
'text-align': 'center'
},
style2: {
color: 'green',
boder: '1px solid #666',
textAlign: 'right',
marginTop: '10px'
}
},
methods: {
clickHandler() {
}
}
})
</script>
</body><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button switching</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<button :style="isAcive=='Button 1' ? acStyle : ''" @click="clickHandler">Button 1</button>
<button :style="isAcive=='Button 2' ? acStyle : ''" @click="clickHandler">Button 2</button>
<button :style="isAcive=='Button 3' ? acStyle : ''" @click="clickHandler">Button 3</button>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
isAcive: '',
acStyle: {
background: 'black',
color: 'white'
}
},
methods: {
clickHandler(event) {
this.isAcive = event.target.innerText
}
}
})
</script>
</body>
</html>