Vue 中一些常用的指令和用法及其一些案例
一，mustache 语法
- 使用“mustache” 语法 {{ msg }}（双花括号）
- mustache 标签将会被替换为 data 对象上对应的 msg 属性的值。
- 只要绑定的数据对象上的 msg 属性发生改变，插值内容也会随之更新。
<!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> <script src="../Vue/vue.js"></script> </head> <body> <div id="app"> <!-- <h1>{{fistname}}-{{lastname}}</h1> --> <h2>{{fistname +'-'+lastname}}</h2> </div> <script> const vm = new Vue({ el:'#app', data(){ return{ fistname:'李', lastname:'华' } } }) </script> </body> </html>
注意：
- mustach语法 支持 js 的数据类型
- mustach语法 不支持 console.log 和 alert()
二，Vue —— v-for 指令
v-for有三个值:
v-for="数组或对象中的每一个值 in/of 数组或对象本身"
<!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>
<script src="../Vue/vue.js"></script>
</head>
<body>
<div id="app">
<div>{{list}}</div>
直接写渲染的结果是['李华','小明','小丽']
<!-- <div v-for="item of list">{{item}}</div> -->
v-for有三个值:
v-for="数组或对象中的每一个值 in/of 数组或对象本身"
<div v-for="item in list">{{item}}</div>
<div v-for="item of obj">{{item}}</div>
<!-- <div v-for="item in obj">{{item}}</div> -->
<!-- <div v-for="item of obj2">{{item.realname}} {{item.age}}</div> -->
<h2 v-for="(item,index) in list" :key="index"> {{item}} </h2>
在将来的项目中写v-for是需要加上:key 他的值可以写索引最好写数据中的id值
<!-- <h2 v-for="item in obj2" :key="item.id">{{item.realname+'-'+item.age}}</h2> -->
</div>
<script>
const vm = new Vue({
el: '#app',
data() {
return {
list: ['李华', '小明', '小丽'],
obj: {
a: 1,
b: 2,
c: 3
},
obj2: [
{ id: 1, realname: '李华', age: 19 },
{ id: 2, realname: '小丽', age: 29 },
{ id: 3, realname: '小明', age: 11 },
{ id: 4, realname: '小红', age: 16 }
]
}
}
})
</script>
</body>
</html> 
数据绑定：就是将数据填充到网页
数据响应式：在网页控制台更改页面数据的过程就叫数据响应式
三，Vue —— v-once 指令
不需要表达式
只渲染元素和组件一次。 显示内容之后就不再具有响应式功能（无法用数据响应式更改网页数据）
应用场景：如果显示的数据信息后续不需要再次修改，可以使用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>
<script src="../Vue/vue.js"></script>
</head>
<body>
<div id="app">
普通插值
<h2>{{msg}}</h2>
v-once 只渲染一次
<h2 v-once>{{msg}}</h2>
</div>
<script>
const vm = new Vue({
el: '#app',
data() {
return {
msg: '我是否会改变呢？'
}
}
})
</script>
</body>
</html> 
四，Vue —— 增减小案例 <!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>
<script src="../Vue/vue.js"></script>
</head>
<body>
<div id="app">
<!-- <button v-on:click="add">+</button>
<h3>{{count}}</h3>
<button v-on:click="sub">-</button> -->
<!-- 简写 -->
<button @click="add">+</button>
<h1>{{count}}</h1>
<button @click="sub">-</button>
</div>
</body>
<script>
const vm = new Vue({
el: '#app',
data() {
return {
count: 0
}
},
methods: {
add() { //以后所有的方法都写在methods里面
this.count++
},
sub() {
this.count--
}
}
})
</script>
</html>
效果图：
五，Vue —— v-html 指令
作用：填充HTML片段 但是存在安全问题 可以再本网在内部数据使用，如果是来自第三方的数据不可用
属于：数据绑定指令
是 innerHTML 更新的新版 作用与innerHTML 类似
<!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>
<script src="../Vue/vue.js"></script>
</head>
<body>
<div id="app">
v-html 可以解析html格式, 与innerHTML用法相似
<h2 v-html="url"></h2>
</div>
<script>
const vm = new Vue({
el:'#app',
data(){
return{
url:""
}
}
})
</script><a href="http://www.baidu.com">百度一下</a>
</body>
</html> 
六，Vue —— v-text 指令
作用：填充纯文本 与插值表达式相比更加简洁
属于 数据绑定指令
没有 v-text属性的只会插入与msg对应的data数据 下例结果为 今天周几啊？周六
有v-text 属性会覆盖标签内所有的内容与innerText很相似然后再插msg数据
<!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>
<script src="../Vue/vue.js"></script>
</head>
<body>
<div id="app">
<h2>今天周几啊？{{msg}}</h2>
v-text指令 与 inntext的作用相似
<h2 v-text="msg"> 今天周几啊？ {{msg}} </h2>
</div>
<script>
const vm = new Vue({
el:'#app',
data(){
return{
msg:"周六"
}
}
})
</script>
</body>
</html>
七，Vue —— v-pre 指令
跳过这个元素和它的子元素的编译过程。
属于：数据绑定指令
v-pre 可以用来显示原始 Mustache 标签。跳过编译过（分析编译过程）
<!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>
<script src="../Vue/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<h1 v-pre>{{msg}}</h1>
</div>
</body>
<script>
const vm = new Vue({
el:'#app',
data(){
return{
msg:'我直接都不渲染你气不气'
}
}
})
</script>
</html> 
八，Vue —— v-cloak 指令
1， 提供样式
[v-cloak]{ display:none; }
执行原理：先通过样式隐藏内容，然后在内存中进行值得更新，更新好之后在显示最终的结果
主要是为了解决闪动问题
九，Vue——v-bind 指令
v-bind 可以简写成 ：
含义：
class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。
Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。
声明： 下篇文章将详细介绍 v-bind指令 用法及实操小案例 不要走开广告之后更加精彩哦！
投递影石Insta360等公司10个岗位
百度HR面16人在聊