| 指令 | ||
|---|---|---|
| mustache | 大括号语法 | {{}} |
| v-if | 条件判断，根据ture/false渲染元素 | |
| v-else | 同上 | |
| v-else-if | 同上 | |
| v-show | ||
| v-for | ||
| v-text | ||
| v-html | ||
| v-on | ||
| v-model | ||
| v-bind | ||
| v-pre、v-cloak、v-once | ||
<div id="app">
<h2>{{message}}</h2>
<h2>{{message}},啧啧啧</h2>
<!-- Mustache的语法不仅可以直接写变量，还可以写简单表达式 -->
<h2>{{firstName + lastName}}</h2>
<h2>{{firstName + " " + lastName}}</h2>
<h2>{{firstName}}{{lastName}}</h2>
<h2>{{count * 2}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
message:"你好啊",
firstName:"skt t1",
lastName:"faker",
count:100
}
})
</script>
? v-once表示该dom元素只渲染一次，之后数据改变，不会再次渲染。
<div id="app">
<h2>{{message}}</h2>
<!-- 只会渲染一次，数据改变不会再次渲染 -->
<h2 v-once>{{message}}</h2>
</div>
在某些时候我们不希望直接输出[百度一下](http://www.baidu.com)这样的字符串，而输出被html自己转化的超链接。此时可以使用v-html。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<h2>不使用v-html</h2>
<h2>{{ url }}</h2>
<h2>使用v-html，直接插入html</h2>
<h2 v-html="url"></h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
url:"<a href=‘http://www.baidu.com‘>百度一下</a>"
}
})
</script>
</body>
</html>
页面如下
v-text会覆盖dom元素中的数据，相当于js的innerHTML方法。
<body>
<div id="app">
<h2>不使用v-text</h2>
<h2>{{message}}，啧啧啧</h2>
<h2>使用v-text，以文本形式显示,会覆盖</h2>
<h2 v-text="message">，啧啧啧</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
message:"你好啊"
}
})
</script>
</body>
结果
有时候我们期望直接输出{{message}}这样的字符串，而不是被{{}}语法转化的message的变量值，此时我们可以使用v-pre标签。
<body>
<div id="app">
<h2>不使用v-pre</h2>
<h2>{{message}}</h2>
<h2>使用v-pre,不会解析</h2>
<h2 v-pre>{{message}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
message:"你好啊"
}
})
</script>
</body>
? 结果如图，使用v-pre修饰的dom会直接输出字符串。
有时候因为加载延时问题，例如卡掉了，数据没有及时刷新，就造成了页面显示从{{message}}到message变量“你好啊”的变化，这样闪动的变化，会造成用户体验不好。此时需要使用到v-cloak的这个标签。在vue解析之前，div属性中有v-cloak这个标签，在vue解析完成之后，v-cloak标签被移除。简单，类似div开始有一个css属性display:none;，加载完成之后，css属性变成display:block，元素显示出来。
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>v-cloak指令的使用</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<h2>{{message}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
//在vue解析前，div中有一个属性cloak
//在vue解析之后，div中没有一个属性v-cloak
setTimeout(() => {
const app = new Vue({
el: "#app",
data: {
message: "你好啊"
}
})
}, 1000);
</script>
</body>
</html>
这里通过延时1秒模拟加载卡住的状态，结果一开始不显示message的值，div元素中有v-cloak的属性，1秒后显示message变量的值，div中的v-cloak元素被移除。
对于一个数组或者字典元素可以用v-for遍历元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<h3>直接显示值</h3>
<ul>
<li v-for="item in items">
{{item}}
</li>
</ul>
<h3>显示index和值</h3>
<ul>
<li v-for="(index,item) in items">
{{item}} => {{index}}
</li>
</ul>
<h3>显示index、键、值</h3>
<ul>
<li v-for="(value, key, index) in object">
{{ index }} => {{ key }} => {{ value }}
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
items: [‘葫‘, ‘芦‘, ‘娃‘, ‘救‘, ‘爷爷‘],
object: {
firstName: ‘葫芦娃‘,
lastName: ‘爷爷‘,
}
}
})
</script>
</script>
</body>
</html>
结果：
常规写法
// html
<img v-bind:src="imgSrc" width="200px">
// js
data: {
imgSrc:‘http://liangxinghua.com/uploads/image/20180709/1531106987.png‘
}
某些时候我们并不想将变量放在标签内容中，像这样<h2>{{message}}</h2>是将变量h2标签括起来，类似js的innerHTML。但是我们期望将变量imgURL写在如下位置，想这样<img src="imgURL" alt="">导入图片是希望动态获取图片的链接，此时的imgURL并非变量而是字符串imgURL，如果要将其生效为变量，需要使用到一个标签v-bind:，像这样<img v-bind:src="imgURL" alt="">，而且这里也不能使用Mustache语法，类似<img v-bind:src="{{imgURL}}" alt="">，这也是错误的。
<!-- 正确的做法使用v-bind指令 -->
<img v-bind:src="imgURL" alt="">
<a v-bind:href="aHerf"></a>
<!-- 语法糖写法 -->
<img :src="imgURL" alt="">
<a :href="aHerf"></a>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
imgURL:"https://cn.bing.com/th?id=OIP.NaSKiHPRcquisK2EehUI3gHaE8&pid=Api&rs=1",
aHerf:"http://www.baidu.com"
}
})
</script>
此时vue对象中定义的imgURL变量和aHerf变量可以动态的绑定到img标签的src属性和a标签的href属性。v-bind:由于用的很多，vue对他有一个语法糖的优化写法也就是:
v-if 用与条件判断，true显示
原文：https://www.cnblogs.com/slzhao/p/13270285.html