让我们继续来学习VUE💘

  • 插值操作
  • 绑定属性
  • 计算属性
  • 事件监听
  • 条件判断
  • 循环遍历
  • 阶段案例
  • v-model

🍔插值操作

Mustache

如何将data中的文本数据,插入到HTML中呢

  • 我们已经学习过了,可以通过Mustache语法(也就是双大括号)。
  • Mustache: 胡子/胡须.

我们可以像下面这样来使用,并且数据是响应式的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div id="app">
<!-- 插入到标签中 -->
<h2>{{message}}, QiQi</h2>
<h2>{{message}}</h2>
<!-- mustache语法中,不仅仅可以直接写变量,也可以写简单的表达式 -->
<h2>{{firstName + lastName}}</h2>
<h2>{{firstName + ' ' + lastName}}</h2>
<!-- 使用两个Mustache -->
<h2>{{firstName}} {{lastName}}</h2>
<!-- 也可以是一个表达式 -->
<h2>{{counter * 2}}</h2>
</div>

<script type='text/javascript' src="../js/vue.js"></script>
<script type='text/javascript'>
const app = new Vue({
el: "#app",
data: {
message: '你好鸭',
firstName: 'kobe',
lastName: 'bryant',
counter: 100
}
})
</script>

v-once

但是,在某些情况下,我们可能不希望界面随意的跟随改变

这个时候,我们就可以使用一个Vue的指令

v-once:

  • 该指令后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的)
  • 该指令表示元素和组件(组件后面才会学习)只渲染一次,不会随着数据的改变而改变。

代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="app">
<div>{{message}}</div>
<h2 v-once>{{message}}</h2>
</div>

<script type='text/javascript' src="../js/vue.js"></script>
<script type='text/javascript'>
const app = new Vue({
el: "#app",
data: {
<!-- message改变,界面并没有重新渲染 -->
message: '你好啊'
}
})

v-html

某些情况下,我们从服务器请求到的数据本身就是一个HTML代码

  • 如果我们直接通过1来输出,会将HTML代码也一起输出。

  • 但是我们可能希望的是按照HTML格式进行解析,并且显示对应的内容。

如果我们希望解析出HTML展示

可以使用v-html指令

  • 该指令后面往往会跟上一个string类型
  • 会将string的html解析出来并且进行渲染

v-text

v-text作用和Mustache比较相似:都是用于将数据显示在界面中

v-text通常情况下,接受一个string类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="app">
<div>{{message}}, QiQi</div>
<div v-text="message">, QiQi</div>
<!-- 缺点:不够灵活,会被覆盖 -->
</div>

<script type='text/javascript' src="../js/vue.js"></script>
<script type='text/javascript'>
const app = new Vue({
el: "#app",
data: {
message: '你好鸭'
}
})
</script>

v-pre

v-pre用于跳过这个元素和它子元素的编译过程,用于显示原本的Mustache语法。

比如下面的代码:

  • 第一个h2元素中的内容会被编译解析出来对应的内容
  • 第二个h2元素中会直接显示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="app">
<h2>{{message}}</h2>
<h2 v-pre>{{message}}</h2>
</div>

<script type='text/javascript' src="../js/vue.js"></script>
<script type='text/javascript'>
const app = new Vue({
el: "#app",
data: {
message: '你好鸭'
}
})
</script>

v-cloak

在某些情况下,我们浏览器可能会直接显然出未编译的Mustache标签。这个属性可以用来解决这个问题

cloak: 斗篷

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
[v-cloak] {
display: none;
}
</style>

<div id="app" v-cloak>
<div>{{message}}</div>
<img src="" alt="">
</div>

<script type='text/javascript' src="../js/vue.js"></script>
<script type='text/javascript'>
//在vue解析之前,div中有一个属性v-cloak
//在vue解析之后,div中没有一个属性c-cloak
const app = new Vue({
el: "#app",
data: {
message: '你好鸭'
}
})
</script>

🍇绑定属性

v-bind介绍

前面我们学习的指令主要作用是将值插入到我们模板的内容当中。

但是,除了内容需要动态来决定外,某些属性我们也希望动态来绑定。

  • 比如动态绑定a元素的href属性
  • 比如动态绑定img元素的src属性

这个时候,我们可以使用v-bind指令:

  • 作用:动态绑定属性
  • 缩写::
  • 预期:any (with argument) | Object (without argument)
  • 参数:attrOrProp (optional)

下面,我们就具体来学习v-bind的使用。

v-bind基础

v-bind用于绑定一个或多个属性值,或者向另一个组件传递props值(这个学到组件时再介绍)

在开发中,有哪些属性需要动态进行绑定呢?

  • 还是有很多的,比如图片的链接src、网站的链接href、动态绑定一些类、样式等等

比如通过Vue实例中的data绑定元素的src和href,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div id="app" v-cloak>
<!-- 错误的做法 -->
<!-- <img src="{{imgURL}}" alt=""> -->
<!-- 正确的做法:使用v-bind的指令 -->
<img src="" alt="" v-bind:src="imgURL">
<a href="" v-bind:href="aHref">百度一下</a>
<!-- 语法糖的写法 -->
<img alt="" :src="imgURL">
<a :href="aHref">百度一下</a>
</div>

<script type='text/javascript' src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: '你好鸭',
imgURL: 'https://cn.vuejs.org/images/logo.png',
aHref: 'http://www.baidu.com'
}
})
</script>

v-bind语法糖

v-bind有一个对应的语法糖,也就是简写方式

在开发中,我们通常会使用语法糖的形式,因为这样更加简洁。

简写方式如下:

1
2
3
4
<div id=app>    
<img alt="" :src="imgURL">
<a :href="aHref">百度一下</a>
</div>

v-bind绑定class(一)

很多时候,我们希望动态的来切换class,比如:

  • 当数据为某个状态时,字体显示红色。
  • 当数据另一个状态时,字体显示黑色。

绑定class有两种方式:

  • 对象语法
  • 数组语法

v-bind绑定class(二)

绑定方式:对象语法

  • 对象语法的含义是:class后面跟的是一个对象。

对象语法有下面这些用法:

  1. 用法一:直接通过{}绑定一个类

    1
    <h2 :class="{'active': isActive}">Hello World</h2>
  2. 用法二:也可以通过判断,传入多个值

    1
    <h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>
  3. 用法三:和普通的类同时存在,并不冲突

    注:如果isActive和isLine都为true,那么会有title/active/line三个类

    1
    <h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>
  4. 用法四:如果过于复杂,可以放在一个methods或者computed中

    注:classes是一个计算属性

    1
    <h2 class="title" :class="classes">Hello World</h2>

v-bind绑定class(三)

绑定方式:数组语法

  • 数组语法的含义是:class后面跟的是一个数组。

数组语法有下面这些用法:

  1. 用法一:直接通过{}绑定一个类

    1
    <h2 :class="['active']">Hello World</h2>
  2. 用法二:也可以传入多个值

    1
    <h2 :class=“[‘active’, 'line']">Hello World</h2>
  3. 用法三:和普通的类同时存在,并不冲突

    注:会有title/active/line三个类

    1
    <h2 class="title" :class=“[‘active’, 'line']">Hello World</h2>
  4. 用法四:如果过于复杂,可以放在一个methods或者computed中

    注:classes是一个计算属性

    1
    <h2 class="title" :class="classes">Hello World</h2>

v-bind绑定style(一)

我们可以利用v-bind:style来绑定一些CSS内联样式。

在写CSS属性名的时候,比如font-size

  • 我们可以使用驼峰式 (camelCase) fontSize
  • 或短横线分隔 (kebab-case,记得用单引号括起来) ‘font-size’

绑定class有两种方式:

  • 对象语法
  • 数组语法

v-bind绑定style(二)

绑定方式一:对象语法

1
:style="{color: currentColor, fontSize: fontSize + 'px'}"

style后面跟的是一个对象类型

  • 对象的key是CSS属性名称
  • 对象的value是具体赋的值,值可以来自于data中的属性

绑定方式二:数组语法

1
<div v-bind:style="[baseStyles, overridingStyles]"></div>
  • style后面跟的是一个数组类型
  • 多个值以,分割即可

🍈什么是计算属性?

我们知道,在模板中可以直接通过插值语法显示一些data中的数据。

但是在某些情况,我们可能需要对数据进行一些转化后再显示,或者需要将多个数据结合起来进行显示

  • 比如我们有firstName和lastName两个变量,我们需要显示完整的名称。
  • 但是如果多个地方都需要显示完整的名称,我们就需要写多个

我们可以将上面的代码换成计算属性:

  • OK,我们发现计算属性是写在实例的computed选项中的

计算属性的复杂操作

计算属性中也可以进行一些更加复杂的操作,比如下面的例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div id="app">
<h2>总价格:{{totalPrice}}</h2>
</div>

<script type='text/javascript' src="../js/vue.js"></script>
<script type='text/javascript'>
const app = new Vue({
el: "#app",
data: {
books: [
{id: 110, name: 'Unix编码艺术', price: 119},
{id: 111, name: '代码大全', price: 110},
{id: 112, name: '深入理解计算机原理', price: 99},
{id: 113, name: '现代操作系统', price: 88}
]
},
// 计算属性'
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

  • 在上面的例子中,我们只是使用getter来读取。
  • 在某些情况下,你也可以提供一个setter方法(不常用)。
  • 在需要写setter的时候,代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div id="app">
<h2>{{fullName}}</h2>
</div>

<script type='text/javascript' src="../js/vue.js"></script>
<script type='text/javascript'>
const app = new Vue({
el: "#app",
data: {
firstName: 'Kobe',
lastName: 'Bryant'
},
// 计算属性一般是没有set方法,只读属性.
computed: {
fullName: {
set: function (newValue) {
const names = newValue.split(' ');
this.firstName = names[0];
this.lastName = names[1];
},
get: function (){
return this.firstName + ' ' + this.lastName
}
},

fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
</script>

计算属性的缓存

我们可能会考虑这样的一个问题:

  • methodscomputed看起来都可以实现我们的功能,
  • 那么为什么还要多一个计算属性这个东西呢?
  • 原因:计算属性会进行缓存,如果多次使用时,计算属性只会调用一次

🍉事件监听

在前端开发中,我们需要经常和用于交互。

  • 这个时候,我们就必须监听用户发生的时间,比如点击、拖拽、键盘事件等等
  • 在Vue中如何监听事件呢?使用v-on指令

v-on介绍

  • 作用:绑定事件监听器
  • 缩写:@
  • 预期:Function | Inline Statement | Object
  • 参数:event

下面,我们就具体来学习v-on的使用。

v-on基础

这里,我们用一个监听按钮的点击事件,来简单看看v-on的使用

  • 下面的代码中,我们使用了v-on:click=”counter++”
  • 另外,我们可以将事件指向一个在methods中定义的函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div id="app">
<h2>点击次数:{{counter}}</h2>
<button v-on:click="counter++">按钮点击1</button>
<button v-on:click="btnClick">按钮点击2</button>
</div>

<script type='text/javascript' src="../js/vue.js"></script>
<script type='text/javascript'>
//语法糖:简写 v-on --> @click
//proxy
const app = new Vue({
el: '#app',
data: {
counter: 0
},
methods: {
btnClick() {
this.counter++
}
},
})
</script>

注:v-on也有对应的语法糖:

v-on:click可以写成@click

v-on参数

当通过methods中定义方法,以供@click调用时,需要注意参数问题:

情况一:如果该方法不需要额外参数,那么方法后的()可以不添加。

  • 但是注意:如果方法本身中有一个参数,那么会默认将原生事件event参数传递进去

情况二:如果需要同时传入某个参数,同时需要event时,可以通过$event传入事件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<div id="app">
<!-- 时间调用的方法没有参数 -->
<button @click="btn1Click()">按钮1</button>
<button @click="btn1Click">按钮1</button>

<!-- 在事件定义时,写函数时省略了小括号,但是方法本身是需要一个参数的时候,这个时候,VUE会默认将浏览器生成的event对象作为参数传入到方法 -->
<button @click="btn2Click(123)">按钮2</button>
<!-- undefined -->
<button @click="btn2Click()">按钮2</button>
<!-- MouseEvent -->
<button @click="btn2Click">按钮2</button>
<!-- 方法定义时,我们需要event对象,同时又需要其他参数 -->
<button @click="btn3Click">按钮3</button>
<!-- 在调用方法时,如何手动获取到浏览器参数的event对象:$event -->
<button @click="btn3Click(123, $event)">按钮3</button>

</div>

<script type='text/javascript' src="../js/vue.js"></script>
<script type='text/javascript'>
const app = new Vue({
el: "#app",
data: {
message: '你好啊'
},
methods: {
btn1Click() {
console.log("btn1Click");
},
btn2Click(event) {
console.log("--------",event);
},
btn3Click(abc, event) {
console.log("+++++", abc, event);
}
},
})
</script>

v-on修饰符

在某些情况下,我们拿到event的目的可能是进行一些事件处理。

Vue提供了修饰符来帮助我们方便的处理一些事件:

  • .stop - 调用 event.stopPropagation()。
  • .prevent - 调用 event.preventDefault()。
  • .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
  • .native - 监听组件根元素的原生事件。
  • .once - 只触发一次回调。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
   <!-- 1. .stop修饰符的使用 停止冒泡 -->
<div @click="divClick">
aaaaa
<button @click.stop="btnClick">按钮</button>
</div>
<!-- 2. .prevent修饰符的使用 阻止默认行为 -->
<form action="baidu">
<input type="submit" value="提交" @click.prevent="submitClick">
</form>
<!-- 3. .prevent修饰符的使用 阻止默认行为 没有表达式 -->
<form @submit.prevent></form>
<!-- 4. .监听某个键盘的键帽 键别名-->
<input type="text" @keyup.enter="keyUp">
<input type="text" @keyup.enter="keyUp">
<!-- 5. .once修饰符的使用 点击回调只会触发一次-->
<button @click.once="btn2Click">.once</button>

🍊条件判断

v-if、v-else-if、v-else

v-if、v-else-if、v-else

  • 这三个指令与JavaScript的条件语句if、else、else if类似。
  • Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件

简单的案例演示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="app">
<h2 v-if="score>=90">优秀</h2>
<h2 v-else-if="score>=80">良好</h2>
<h2 v-else-if="score>=60">及格</h2>
<h2 v-else>不及格</h2>
</div>

<script type='text/javascript' src="../js/vue.js"></script>
<script type='text/javascript'>
const app = new Vue({
el: "#app",
data: {
score: 99,
}
</script>

v-if的原理:

  • v-if后面的条件为false时,对应的元素以及其子元素不会渲染。
  • 也就是根本没有不会有对应的标签出现在DOM中。

条件渲染案例

我们来做一个简单的小案例:

用户再登录时,可以切换使用用户账号登录还是邮箱地址登录。

image-20210424172246592

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div id="app">
<span v-if="isUser">
<label for="username">用户账号</label>
<input type="text" name="username" id="username" placeholder="用户账号">
</span>

<span v-else>
<label for="email">用户邮箱</label>
<input type="email" name="email" id="email" placeholder="用户邮箱">
</span>

<button @click="handleToggle">切换类型</button>
</div>

<script type='text/javascript' src="../js/vue.js"></script>
<script type='text/javascript'>
const app = new Vue({
el: "#app",
data: {
isUser: true
},
methods: {
handleToggle() {
this.type = this.type === 'email' ? 'username' : 'email'
}
},
})
</script>

案例小问题

小问题:

  • 如果我们在有输入内容的情况下,切换了类型,我们会发现文字依然显示之前的输入的内容。
  • 但是按道理讲,我们应该切换到另外一个input元素中了。
  • 在另一个input元素中,我们并没有输入内容。
  • 为什么会出现这个问题呢?

问题解答:

  • 这是因为Vue在进行DOM渲染时,出于性能考虑,会尽可能的复用已经存在的元素,而不是重新创建新的元素。
  • 在上面的案例中,Vue内部会发现原来的input元素不再使用,直接作为else中的input来使用了。

解决方案:

  • 如果我们不希望Vue出现类似重复利用的问题,可以给对应的input添加key
  • 并且我们需要保证key的不同

image-20210424172754615

v-show

v-show的用法和v-if非常相似,也用于决定一个元素是否渲染:

v-if和v-show对比

v-if和v-show都可以决定一个元素是否渲染,那么开发中我们如何选择呢?

  • v-if当条件为false时,压根不会有对应的元素在DOM中。
  • v-show当条件为false时,仅仅是将元素的display属性设置为none而已。

开发中如何选择呢?

  • 当需要在显示与隐藏之间切片很频繁时,使用v-show
  • 当只有一次切换时,通过使用v-if

image-20210424173009137

🍋遍历循环

v-for遍历数组

当我们有一组数据需要进行渲染时,我们就可以使用v-for来完成。

  • v-for的语法类似于JavaScript中的for循环。
  • 格式如下:item in items的形式。

我们来看一个简单的案例:

image-20210424173330040

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="app">
<!--1.在遍历的过程中,没有使用索引值(下标值)-->
<ul>
<li v-for="item in names">{{item}}</li>
</ul>

<!--2.在遍历的过程中, 获取索引值-->
<ul>
<li v-for="(item, index) in names">{{index+1}}.{{item}}</li>
</ul>
</div>

<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
names: ['QiQi', 'kobe', 'james', 'curry']
}
})
</script>

如果在遍历的过程中不需要使用索引值

  • v-for=”movie in movies”
  • 依次从movies中取出movie,并且在元素的内容中,我们可以使用Mustache语法,来使用movie

如果在遍历的过程中,我们需要拿到元素在数组中的索引值呢?

  • 语法格式:v-for=(item, index) in items
  • 其中的index就代表了取出的item在原数组的索引值。

v-for遍历对象

v-for可以用户遍历对象:

比如某个对象中存储着你的个人信息,我们希望以列表的形式显示出来。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<div id="app">
<!--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">{{value}}-{{key}}</li>
</ul>

<!--3.获取key和value和index 格式: (value, key, index) -->
<ul>
<li v-for="(value, key, index) in info">{{value}}-{{key}}-{{index}}</li>
</ul>
</div>

<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
info: {
name: 'QiQi',
age: 18,
height: 1.88
}
}
})
</script>

组件的key属性

官方推荐我们在使用v-for时,给对应的元素或组件添加上一个:key属性。

为什么需要这个key属性呢(了解)?

  • 这个其实和Vue的虚拟DOM的Diff算法有关系。
  • 这里我们借用React’s diff algorithm中的一张图来简单说明一下:

image-20210424173702945

当某一层有很多相同的节点时,也就是列表节点时,我们希望插入一个新的节点

  • 我们希望可以在B和C之间加一个F,Diff算法默认执行起来是这样的。
  • 即把C更新成F,D更新成C,E更新成D,最后再插入E,是不是很没有效率?

所以我们需要使用key来给每个节点做一个唯一标识

  • Diff算法就可以正确的识别此节点
  • 找到正确的位置区插入新的节点。

所以一句话,key的作用主要是为了高效的更新虚拟DOM。

检测数组更新

因为Vue是响应式的,所以当数据发生变化时,Vue会自动检测数据变化,视图会发生对应的更新。

Vue中包含了一组观察数组编译的方法,使用它们改变数组也会触发视图的更新。

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<script>
const app = new Vue({
el: '#app',
data: {
letters: ['a', 'b', 'c', 'd']
},
methods: {
btnClick() {
// 1.push方法
this.letters.push('aaa')
this.letters.push('aaaa', 'bbbb', 'cccc')

// 2.pop(): 删除数组中的最后一个元素
this.letters.pop();

// 3.shift(): 删除数组中的第一个元素
this.letters.shift();

// 4.unshift(): 在数组最前面添加元素
this.letters.unshift()
this.letters.unshift('aaa', 'bbb', 'ccc')

// 5.splice作用: 删除元素/插入元素/替换元素
// 删除元素: 第二个参数传入你要删除几个元素(如果没有传,就删除后面所有的元素)
// 替换元素: 第二个参数, 表示我们要替换几个元素, 后面是用于替换前面的元素
// 插入元素: 第二个参数, 传入0, 并且后面跟上要插入的元素
splice(start)
this.letters.splice(1, 3, 'm', 'n', 'l', 'x')
this.letters.splice(1, 0, 'x', 'y', 'z')

// 6.sort()
this.letters.sort()

// 7.reverse()
this.letters.reverse()

// 注意: 通过索引值修改数组中的元素
this.letters[0] = 'bbbbbb';
this.letters.splice(0, 1, 'bbbbbb')
// set(要修改的对象, 索引值, 修改后的值)
Vue.set(this.letters, 0, 'bbbbbb')
}
}
})
</script>

🍌阶段案例

图书购物车

image-20210424174218236

代码实现:

HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</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)" v-bind:disabled="item.count <= 1">-</button>
{{item.count}}
<button @click="increment(index)">+</button>
</td>
<td><button @click="removeHandle(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>
<script>
</script>
</body>
</html>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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;
}

JS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
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--
},
removeHandle(index) {
this.books.splice(index, 1)
}
},
computed: {
totalPrice() {
return this.books.reduce(function (preValue, book) {
return preValue + book.price * book.count
}, 0)
}
},
filters: {
showPrice(price) {
return '¥' + price.toFixed(2)
}
}
})

🍍v-model

表单绑定v-model

表单控件在实际开发中是非常常见的。特别是对于用户信息的提交,需要大量的表单。

Vue中使用v-model指令来实现表单元素和数据的双向绑定。

案例的解析:

  • 当我们在输入框输入内容时
  • 因为input中的v-model绑定了message,所以会实时将输入的内容传递给message,message发生改变。
  • 当message发生改变时,因为上面我们使用Mustache语法,将message的值插入到DOM中,所以DOM会发生响应的改变。
  • 所以,通过v-model实现了双向的绑定。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="app">
<input type="text" v-model="message">
{{message}}
</div>

<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊'
}
})
</script>

当然,我们也可以将v-model用于textarea元素

1
2
3
4
5
<!-- 2. 用法二:绑定textarea元素 -->
<textarea v-model="message"></textarea>
<p>
输入的内容是:{{message}}
</p>

v-model原理

v-model其实是一个语法糖,它的背后本质上是包含两个操作:

  • 1.v-bind绑定一个value属性
  • 2.v-on指令给当前元素绑定input事件

也就是说下面的代码:等同于下面的代码:

1
<input type="text" v-model="message">

等同于

1
<input type="text" v-bind:value="message" v-on:input="message = $event.target.value">

v-model:checkbox

复选框分为两种情况:单个勾选框和多个勾选框

单个勾选框:

  • v-model即为布尔值。
  • 此时input的value并不影响v-model的值。

多个复选框:

  • 当是多个复选框时,因为可以选中多个,所以对应的data中属性是一个数组。
  • 当选中某一个时,就会将input的value添加到数组中。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div id="app">
<!--1.checkbox单选框-->
<label for="agree">
<input type="checkbox" id="agree" v-model="isAgree">同意协议
</label>
<h2>是否选中: {{isAgree}}</h2>

<!--2.checkbox多选框-->
<input type="checkbox" value="篮球" v-model="hobbies">篮球
<input type="checkbox" value="足球" v-model="hobbies">足球
<input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
<input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
<h2>您的爱好是: {{hobbies}}</h2>

<label v-for="item in originHobbies" :for="item">
<input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
</label>
</div>

<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
isAgree: false, // 单选框
hobbies: [], // 多选框,
originHobbies: ['篮球', '足球', '乒乓球', '羽毛球', '台球', '高尔夫球']
}
})
</script>

v-model:select

和checkbox一样,select也分单选和多选两种情况。

单选:只能选中一个值。

  • v-model绑定的是一个值。
  • 当我们选中option中的一个时,会将它对应的value赋值到mySelect中

多选:可以选中多个值。

  • v-model绑定的是一个数组。
  • 当选中多个值时,就会将选中的option对应的value添加到数组mySelects中
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div id="app">
<!--1.选择一个-->
<select name="abc" v-model="fruit">
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="榴莲">榴莲</option>
<option value="葡萄">葡萄</option>
</select>
<h2>您选择的水果是: {{fruit}}</h2>

<!--2.选择多个-->
<select name="abc" v-model="fruits" multiple>
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="榴莲">榴莲</option>
<option value="葡萄">葡萄</option>
</select>
<h2>您选择的水果是: {{fruits}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
fruit: '香蕉',
fruits: []
}
})
</script>

值绑定

初看Vue官方值绑定的时候,我很疑惑:what the hell is that?

但是仔细阅读之后,发现很简单,就是动态的给value赋值而已:

  • 我们前面的value中的值,可以回头去看一下,都是在定义input的时候直接给定的。
  • 但是真实开发中,这些input的值可能是从网络获取或定义在data中的。
  • 所以我们可以通过v-bind:value动态的给value绑定值。
  • 这不就是v-bind吗?

这不就是v-bind在input中的应用吗?搞的我看了很久,搞不清他想讲什么。

这里不再给出对应的代码,因为会用v-bind,就会值绑定的应用了。

修饰符

lazy修饰符:

  • 默认情况下,v-model默认是在input事件中同步输入框的数据的。
  • 也就是说,一旦有数据发生改变对应的data中的数据就会自动发生改变。
  • lazy修饰符可以让数据在失去焦点或者回车时才会更新

number修饰符:

  • 默认情况下,在输入框中无论我们输入的是字母还是数字,都会被当做字符串类型进行处理。
  • 但是如果我们希望处理的是数字类型,那么最好直接将内容当做数字处理。
  • number修饰符可以让在输入框中输入的内容自动转成数字类型

trim修饰符:

  • 如果输入的内容首尾有很多空格,通常我们希望将其去除
  • trim修饰符可以过滤内容左右两边的空格
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="app">
<!--1.修饰符: lazy-->
<input type="text" v-model.lazy="message">
<h2>{{message}}</h2>


<!--2.修饰符: number-->
<input type="number" v-model.number="age">
<h2>{{age}}-{{typeof age}}</h2>

<!--3.修饰符: trim-->
<input type="text" v-model.trim="name">
<h2>您输入的名字:{{name}}</h2>
</div>

好啦,今天的VUE就学习到这里啦🍔~~