携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情 >>
Mustache插值语法
Mustache语法就是双大括号，双大括号中的变量会被data 中对应变量的值取代，如下所示：
<!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>Document</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<h2>当前技术：{{counter}}</h2>
<h2>计数双倍：{{counter*2}}</h2>
</div>
<script src="../lib/vue.mini.js"></script>
<script>
const app=Vue.createApp({
data(){
return{
message:"hello",
counter:10
}
}
})
app.mount('#app')
</script>
</body>
</html>
双大括号中的拥有变量message 则会去data 中找message 对应的值，然后渲染到页面上，这就实现了动态数据，之后我们需要修改message 的时候，只需要找到data 中的message 进行修改，页面就会自动渲染新的数据。
注意：Mustache中可以是表达式，渲染出来的值就是表达式计算值，但是一半较为复杂的计算需要使用后面学到的计算属性。
v-once
v-once功能是仅渲染元素和组件一次，之后的更新都不会再渲染，这可以用来优化更新时的性能。如下所示：页面首次进入会渲染第一个三个h2 但是点击button 修改message 和counter 的时候，只有第三个h2 渲染的内容会发生改变，相当于使用v-once 就是渲染一下初始内容，之后作为静态内容并跳过渲染。
<body>
<div id="app">
<h2 v-once>{{message}}</h2>
<h2 v-once>当前技术：{{counter}}</h2>
<h2>计数双倍：{{counter*2}}</h2>
<button @click="changeMessage">改变</button>
</div>
<script src="../lib//vue.mini.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
message: "hello",
counter: 10
}
},
methods:{
changeMessage(){
this.message="你好啊，李银河",
this.counter++
}
}
})
app.mount('#app')
</script>
</body>
v-pre
跳过该元素及子元素的编译，意思就是比如双大括号不会再起作用，而是直接渲染到页面，如下代码所示，我们将第三个h2 赋予了v-pre，页面效果如图所示。
<body>
<div id="app">
<h2 v-once>{{message}}</h2>
<h2 v-once>当前技术：{{counter}}</h2>
<h2 v-pre>计数双倍：{{counter*2}}</h2>
<button @click="changeMessage">改变</button>
</div>
<script src="../lib//vue.mini.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
message: "hello",
counter: 10
}
},
methods: {
changeMessage() {
this.message = "你好啊，李银河",
this.counter++
}
}
})
app.mount('#app')
</script>
</body>
v-cloak
用于隐藏未编译的模版，也就是当未编译的时候，不会展示，直到编译完成才会展示，未编译的时候就像{{message}} 一样会直接展示在页面，之后会等待编译完成立马变成hello 展示在页面，这样不太优雅，所以可以利用v-cloak 进行隐藏。
注意： v-cloak 需要和css 搭配使用才能生效，如下代码所示：
<!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>Document</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<h2 v-cloak>{{message}}</h2>
<h2 v-once>当前技术：{{counter}}</h2>
<h2>计数双倍：{{counter*2}}</h2>
<button @click="changeMessage">改变</button>
</div>
<script src="../lib//vue.mini.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
message: "hello",
counter: 10
}
},
methods: {
changeMessage() {
this.message = "你好啊，李银河",
this.counter++
}
}
})
app.mount('#app')
</script>
</body>
</html>
v-memo
这是3.2新增的一个模版语法，详情staging-cn.vuejs.org/api/built-i…
类似于react的useEffect，当v-memo 传入的数据改变时，才会更新组件，并且进行了浅层比较，如下代码所示： 当name 或age 任意一个更新之后，页面会重新渲染，但是修改height 页面不会更新渲染，当我们使用v-memo="[]" 的时候效果类似于v-once 只渲染一次页面。
<!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>Document</title>
</head>
<body>
<div id="app" >
<div v-memo="[name,age]">
<h2>姓名：{{name}}</h2>
<h2>年龄：{{age}}</h2>
<h2>身高：{{height}}</h2>
</div>
<button @click="updateInfo"></button>
</div>
<script src="../lib/vue.mini.js"></script>
<script>
const app=Vue.createApp({
data(){
return{
name:'why',
age:19,
height:18
}
},
methods:{
updateInfo(){
this.age=20
}
}
})
app.mount('#app')
</script>
</body>
</html>
v-bind
v-bind绑定基本属性
如下代码所示，当我们需要动态修改图片的src 的时候就可以在src 前面加v-bind 或: 语法糖，后面的imgUrl 就会去data 中找对应变量的值替换，当修改时，只需要修改data 中对应的imgUrl 即可。
<body>
<div id="app">
<img :src="imgurl" alt="">
<button @click="updateInfo">改变</button>
</div>
<script src="../lib/vue.mini.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
imgurl:'https://p0.meituan.net/iphoenix/46b4287ebc57c392b771697def7fa335247088.jpg@740w_416h_1e_1c'
}
},
methods: {
updateInfo() {
this.imgurl='https://p0.pipi.cn/mmdb/25bfd6d753751bb53507acd091434556e6321.jpg?imageMogr2/thumbnail/2500x2500%3E'
}
}
})
app.mount('#app')
</script>
</body>
v-bind绑定class属性
如下所示，绑定当然和上面效果一样，但是绑定class 的时候，我们可以使用对象如{active:isActive,selected:true} 类似于这样。
<!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>Document</title>
<style>
.active{
color: red;
}
</style>
</head>
<body>
<div id="app">
<h2 :class="{active:isActive}">hello world</h2>
<button @click="handleClick">改变</button>
</div>
<script src="../lib/vue.mini.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
classes:'abc cba',
isActive:false
}
},
methods:{
handleClick(){
this.isActive=true
}
}
})
app.mount('#app')
</script>
</body>
</html>
v-bind绑定style
如下代码所示，绑定style 的时候我们也可以使用对象，当我们使用字符串表示style 选项的时候就需要'font-size' 或者驼峰写法fontSize
<!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>Document</title>
</head>
<body>
<div id="app">
<h2 :style="{color:fontColor,fontSize:'18px','font-weeight':bold}">11</h2>
</div>
<script src="../lib/vue.mini.js"></script>
<script>
const app=Vue.createApp({
data(){
return{
fontColor:'blue'
}
}
})
app.mount('#app')
</script>
</body>
</html>
v-bind绑定属性名
如下所示，我们完全可以定义对象，然后动态绑定，比如data 中的id 对象值为class 那么我们绑定的就是class 的动态属性，如图所示：
<!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>Document</title>
</head>
<body>
<div id="app">
<h2 :[id]="cls">hello</h2>
</div>
<script src="../lib/vue.mini.js"></script>
<script>
const app =Vue.createApp({
data(){
return{
id:'class',
cls:'box1'
}
}
})
app.mount('#app')
</script>
</body>
</html>
