（一）mustache语法(双大括号语法)
多种使用
(二)v-once
(三)v-text/v-html
v-text:用于更新元素的textContent。
v-html:希望内容被Vue解析出来，可以使用v-html来展示。
(四)v-pre/v-cloak
使用v-pre将{{}}显示出来，而不是将{{}}作为语法。
<h2 v-pre>{{}}</h2>
cloak斗篷
//style
[v-cloak] {
display: none
}
//模板
<h2 v-cloak>{{msg}}</h2>
(五)v-memo
只有这个子内容发生改变时，整个内容才会再次渲染。
(六)v-bind绑定属性
动态绑定class,动态绑定style,可以使用对象语法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue2/3</title>
<style>
.active{
color: red;
}
</style>
</head>
<body>
<div id="app">
//动态绑定class,style
<h2 class="msg" :class="{ active: isActive }">{{message}}</h2>
<h2 :style="{color: color, fontSize: '10px'}">啦啦啦</h2>
<button @click="changeClass">改变颜色</button>
</div>
<script src="../lib/vue.js"></script>
<script>
const app = Vue.createApp({
data(){
return {
message: "Hello Vue",
isActive: true,
color: 'blue'
}
},
methods: {
changeClass() {
this.isActive = !this.isActive
this.color = "green"
}
},
})
//挂载
app.mount("#app")
</script>
</body>
</html>
