第 2 节 Mustache、v-bind、计算属性、v-on、v-if、v-for、响应式方法
作者：互联网
第2节 Mustache语法、v-bind、计算属性、v-on、v-if、v-for、响应式方法
Mustache语法（双大括号）
直接写变量或者写一些简单的表达式。
<h2>{{message}}</h2>
<h2>{{firstName}} {{lastName}}</h2>
<h2>{{firstName + ' ' + lastName}}</h2>
<h2>{{counter * 2}}</h2>
其他指令
1、v-once
（1）该指令不需要跟任何表达式
（2）表示元素和组件只渲染一次，不会随着数据的改变而改变。
2、v-html
（1）该指令后面往往会跟上一个string类型
（2）会将string的html解析出来并且进行渲染
<h2 v-html="url"></h2> <!-- 其中，url: '<a href = "http://www.baidu.com">百度一下</a>' -->
3、v-text
该指令后面往往会跟上一个string类型，很少用，会用 mustache语句替代。
4、v-pre
用于跳过这个元素和它子元素的变异过程，用于显示原本的Mustache语句。
<h2>{{message}}</h2> <!-- 解析message中对应的内容 -->
<h2 v-pre>{{message}}</h2> <!-- 直接显示{{message}} -->
5、v-cloak
在某些情况下，浏览器可能会直接显示出未编译的Mustache标签。
在vue解析前，有这个属性，但是在解析之后就没有了，在解析的过程中会被删除。
v-bind（动态绑定属性）
v-bind基本使用
<div id="app">
<img v-bind:src="imgURL" alt=""> <!-- v-bind命令 -->
<a v-bind:href="aHref">百度一下</a>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
imgURL: 'https://img10.360buyimg.com/img/jfs/t1/160510/16/25709/36032/616cea7eEd14780cc/43b0d9ed8c9e9ab0.png',
aHref: 'http://www.baidu.com'
}
})
</script>
语法糖的写法：
<img :src="imgURL" alt=""> <!-- v-bind命令 -->
<a :href="aHref">百度一下</a>
v-bind 动态绑定class
对象语法
语法格式：
<h2 :class="{类名: 布尔值}">{{message}}</h2>
数组语法
用法一：传入的是变量
<h2 class="title" :class="[active, line]">{{message}}</h2> //active 和 line是变量，不需要写单引号
用法二：过于复杂时，可以放在一个methods或者computed中
<h2 class="title" :class="getClasses()">{{message}}</h2> //getClasses()方法
作业（v-bind 和 v-for 结合）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=script, initial-scale=1.0">
<title>Document</title>
<style>
.active {
color: red;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in books" :class="{active:currentIndex === index}" @click="liClick(index)">
{{index}}.{{item}}
</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
books: ['西游记', '红楼梦', '三国演义', '水浒传'],
// 利用状态变量 currentIndex
currentIndex: 0
},
methods: {
liClick(index) {
this.currentIndex = index;
}
}
})
</script>
</body>
</html>
v-bind 绑定 style
对象语法
语法格式：
<h2 :style = "{key(属性名): value(属性值)}">{{message}}</h2>
<h2 :style="{fontSize:'50px'}">{{message}}</h2> //'50px'必须加上单引号，否则被当做变量去解析
数组语法（很少使用）
语法格式：
<h2 :style="[baseStyle, overridingStyles]"></h2>
计算属性
计算属性的操作
1、基本使用
<div id="app">
<h2>{{fullName}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: 'Lee',
lastName: 'James'
},
// computed: 计算属性()
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
</script>
2、复杂操作
<div id="app">
<h2>总价格：{{totalPrice}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
books: [
{ id: 110, name: '西游记', price: 119 },
{ id: 111, name: '红楼梦', price: 105 },
{ id: 112, name: '三国演义', price: 98 },
{ id: 113, name: '水浒传', price: 87 }
]
},
computed: {
totalPrice: function () {
let result = 0
for (let i = 0; i < this.books.length; i++) {
result += this.books[i].price
}
return result
}
}
})
</script>
计算属性的 setter 和 getter
每一个计算属性都包含以个 getter 和 setter。一般没有 set 方法，只读属性。
<div id="app">
<h2>{{fullName}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: 'Lee',
lastName: 'Jane'
},
computed: {
fullName: {
set: function (newValue) {
const names = newValue.split(' ');
this.firstName = names[0];
this.lastName = names[1];
},
get: function () {
return this.firstName + ' ' + this.lastName
}
}
}
})
</script>
计算属性和methods的对比
计算属性的性能会比 methods 高，由于计算属性会进行缓存，所以如果在多次使用时，计算属性只会调用一次。
事件监听
v-on 的基本使用和语法糖
使用 v-on 指令，监听用户发生的事件，比如点击、拖拽、键盘等等。
<body>
<div id="app">
<h2>{{counter}}</h2>
<!-- <button v-on:click="increment">+</button> -->
<!-- <button v-on:click="decrement">-</button> -->
<!-- 采用 v-on 的语法糖：-->
<button @click="increment">+</button>
<button @click="decrement">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
counter: 0
},
methods: {
increment() {
this.counter++
},
decrement() {
this.counter--
}
}
})
</script>
</body>
注：v-on 也有对应的语法糖。v-on:click 可以写成 @click
v-on 的参数传递问题
在事件监听时，
<body>
<div id="app">
<!-- 1、事件调用的方法没有参数 -->
<button @click="btn1Click">按钮1</button>
<button @click="btn1Click()">按钮2</button>
<!-- 2、事件定义时，方法本身需要一个参数 -->
<button @click="btn2Click(123)">按钮3</button>
<button @click="btn2Click()">按钮4</button>
<!-- 在事件定义时，写方法是省略了小括号，但是方法本身是需要一个参数的， -->
<!-- 这时Vue会默认将浏览器生成的event事件对象作为参数传入到方法中 -->
<button @click="btn2Click">按钮5</button>
<!-- 3、方法定义时，需要event对象，同时又需要其他参数 -->
<!-- 手动获取到浏览器参数的event对象：$event -->
<button @click="btn3Click(">按钮6</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
methods: {
btn1Click() {
console.log("btn1Click");
},
btn2Click(event) {
console.log('--------', event);
},
btn3Click(abc, event) {
console.log('+++++++++', abc)
}
}
})
</script>
</body>
v-on 修饰符使用
 |
|---|
<body>
<div id="app">
<!-- 1、.stop修饰符的使用：阻止事件的冒泡 -->
<div @click="divClick">
<!-- <button @click="btnClick">按钮</button> -->
<button @click.stop="btnClick">按钮</button>
</div>
<!-- 2、.prevent修饰符的使用：阻止默认事件 -->
<form action="baidu">
<!-- <input type="submit" value="提交" @click="submitClick"> -->
<input type="submit" value="提交" @click.prevent="submitClick">
</form>
<!-- 3、监听某个键盘的键帽 -->
<!-- 监听回车键 -->
<input type="text" @keyup.enter="keyUp">
<!-- 4、.once修饰符的使用 -->
<button @click.once="btn2Click">按钮2</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
methods: {
btnClick() {
console.log("btnClick");
},
divClick() {
console.log("divClick");
},
submitClick() {
console.log('submitClick');
},
keyUp() {
console.log('keyUp');
},
btn2Click() {
console.log('btn2Click');
}
}
})
</script>
</body>
条件判断
v-if、v-else-if、v-else
<body>
<div id="app">
<!-- <h2 v-if=isShow>{{message}}</h2> -->
<!-- <h2 v-else=isShow>isShow为false时，显示我</h2> -->
<!-- <h2 v-if="score>=90">优秀</h2> -->
<!-- <h2 v-else-if="score>=80">良好</h2> -->
<!-- <h2 v-else-if="score>=60">及格</h2> -->
<!-- <h2 v-else>不及格</h2> -->
<!-- 复杂逻辑推荐使用computed -->
<h2>{{result}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好呀',
isShow: true,
score: 99
},
computed: {
result() {
let showMessage = ' ';
if (this.score >= 90) {
showMessage = '优秀';
} else if (this.score >= 80) {
showMessage = '良好';
} else if (this.score >= 60) {
showMessage = '及格';
} else {
showMessage = '不及格';
}
return showMessage;
}
}
})
</script>
</body>
用户登录切换案例
<body>
<div id="app">
<span v-if="isUser">
<label for="username">用户账号</label>
<!-- placeholder：文本框中灰色显示的提示文字 -->
<!-- <input type="text" id="username" placeholder="用户账号"> -->
<input type="text" id="username" placeholder="用户账号" key="username">
</span>
<span v-else>
<label for="email">用户邮箱</label>
<!-- <input type="text" id="email" placeholder="用户邮箱"> -->
<input type="text" id="email" placeholder="用户邮箱" key="email">
</span>
<button @click="isUser=!isUser">切换类型</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
isUser: true
}
})
</script>
</body>
案例中，存在一个小问题，通过增加不同的 key 来解决 复用 问题
 |
|---|
v-if 和 v-show 的区别
 |
|---|
循环遍历
v-for 遍历数组
在遍历过程中，获取索引值(下标值)
<!-- 在遍历过程中，获取索引值(下标值) -->
<li v-for="(item,index) in names">
{{index + 1}}-{{item}}
</li>
v-for 遍历对象
<!-- 1、在遍历对象的过程中，如果只是获取一个值，那么获取到的是value -->
<ul>
<li v-for="item in info">{{item}}</li>
</ul>
<!-- 2、获取key和value 格式：(value, key) -->
<ul>
<li v-for="(value,key) in info">
{{key}}-{{value}}
</li>
</ul>
<!-- 3、获取key、value和index -->
<ul v-for="(value,key,index) in info">
<li>
{{index}}-{{key}}-{{value}}
</li>
</ul>
v-for绑定和非绑定key的区别
 |
|---|
数组中的响应式方法
响应式
1、push()：在数组末尾加入一个或多个元素
this.letters.push('aaa', 'bbb')
2、pop()：删除数组中最后一个元素
this.letters.pop()
3、shift()：删除数组中第一个元素
this.letters.shift()
4、unshift()：在数组最前面添加一个或多个元素
this.letters.unshift('aaa', 'bbb')
5、splice()：删除/插入/替换元素
1）第一个参数：开始的位置（索引值）
2）第二个参数：
（1）删除元素：表示要 删除的元素个数（如果没有传，则删除后面的所有元素）
this.letters.splice(0,1) //从第一元素开始，删除一个元素
（2）替换元素：表示要 替换的元素个数，后面是用于替换前面的元素
this.letters.splice(0,2,'aaa','bbb') //替换从第一个元素开始和其后的一个元素为'aaa','bbb'
（3）插入元素：为 0，并且后面跟上要插入的元素
this.letters.splice(1, 0, 'aaa') //在第二个元素前面插入一个元素'aaa'
6、sort()：排序
7、reverse()：翻转
8、set(要修改的对象, 索引值, 修改后的值) (重要)
Vue.set(this.letters, 0, 'bbb') //将letters中的第一个元素修改为'bbb'
非响应式
通过索引值修改数组中的元素，是非响应式，修改后不会在网页中显示出来。
this.letters[0] = 'bbbb'
购物车案例
当购物车中书籍全被移除时，显示“购物车为空”。购买数量至少为1
1、index.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>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app">
<div v-if="books.length">
<table>
<thead>
<tr>
<th></th>
<th>书籍名称</th>
<th>出版日期</th>
<th>价格</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in books">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.date}}</td>
<td>{{item.price | showPrice}}</td>
<td>
<button @click="decrement(index)">-</button>
{{item.count}}
<button @click="increment(index)">+</button>
</td>
<td><button @click="removeHandler(index)">移除</button></td>
</tr>
</tbody>
</table>
<h2>总价格：{{totalPrice | showPrice}}</h2>
</div>
<h2 v-else>购物车为空</h2>
</div>
<script src="../js/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
2、style.css
table {
border: 1px solid #e9e9e9;
border-collapse: collapse;
border-spacing: 0;
}
th,td {
padding:8px 16px;
border:1px solid #e9e9e9;
text-align: left;
}
th {
background-color: #f7f7f7;
color: #5c6b77;
font-weight: 600;
}
3、main.js
const app = new Vue({
el: '#app',
data: {
books: [
{
id: 1,
name: '《算法导论》',
date: '2006-9',
price: 85.00,
count: 1
},
{
id: 2,
name: '《UNIX编程艺术》',
date: '2006-2',
price: 59.00,
count: 1
},
{
id: 3,
name: '《编程珠玑》',
date: '2008-10',
price: 39.00,
count: 1
},
{
id: 4,
name: '《代码大全》',
date: '2006-3',
price: 128.00,
count: 1
}
]
},
methods: {
increment(index) {
this.books[index].count++;
},
decrement(index) {
this.books[index].count--;
if (this.books[index].count < 1) {
this.books[index].count = 1;
}
},
removeHandler(index) {
this.books.splice(index, 1);
}
},
computed: {
totalPrice() {
let totalPrice = 0;
for (let i = 0; i < this.books.length; i++) {
totalPrice += this.books[i].price * this.books[i].count
}
return totalPrice
}
},
//过滤器
filters: {
showPrice(price) {
return '￥' + price.toFixed(2)
}
}
})
标签：index,--,bind,app,元素,语法,响应,books,Mustache 来源： https://blog.csdn.net/qq_48015123/article/details/121015407