说明
1
| hexo 中的语法不允许出现两个'}' 连着的情况， 所以代码中的两个 '}' 引用符号全部改为了']]'
|
vue2.x 技术快速上手
vue是一个用于构建用户界面的渐进式框架
- 构建用户界面： 基于数据动态渲染页面
- 渐进式： 循序渐进的学习
- 框架： 按照约定的规则进行开发
两种开发方式：
- Vue核心包开发 场景：局部模块改造
- Vue核心包&Vue插件&工程化 场景：整站开发
创建一个vue实例
核心四部：
准备容器
引包（官网） — 开发版本/生产版本
创建Vue实例 new Vue()
指定配置项，渲染数据
- el:指定挂载点
- data提供数据
vue响应式特性：
- 什么是响应式？
简单理解就是数据变，视图对应变。
- 如何访问 和 修改 data中的数据（响应式演示）
data中的数据, 最终会被添加到实例上
① 访问数据： “实例.属性名”
② 修改数据： “实例.属性名”= “值”
vue指令 v-XXX
概念：指令（Directives）是 Vue 提供的带有 v- 前缀 的 特殊 标签属性。
为啥要学：提高程序员操作 DOM 的效率。
vue 中的指令按照不同的用途可以分为如下 6 大类：
- 内容渲染指令（v-html、v-text）
- 条件渲染指令（v-show、v-if、v-else、v-else-if）
- 事件绑定指令（v-on）
- 属性绑定指令 （v-bind）
- 双向绑定指令（v-model）
- 列表渲染指令（v-for）
内容表达式(v-html、v-text)：
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
| <body>
<h1>Vue指令----v-html </h1>
<p>
- 使用语法：`<p v-html="intro">hello</p>`，意思是将 intro 值渲染到 p 标签中<br>
- 类似 innerHTML，使用该语法，会覆盖 p 标签原有内容 <br>
- 类似 innerHTML，使用该语法，能够将HTML标签的样式呈现出来。
代码演示：
</p>
<h1>v-text </h1>
<p>语法和之前的一样</p>
<p>类似 innerText，使用该语法，会覆盖 p 标签原有内容</p>
<div id="app">
<div v-html="msg"></div>
</div>
<script src="../vue快速上手/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
msg: `<a href="https://wclspace.xyz">Rayce blog</a>`
}
})
</script>
</body>
|
条件渲染指令（v-show、v-if、v-else、v-else-if）
v-if
- 作用： 控制元素显示隐藏（条件渲染）
- 语法： v-if= “表达式” 表达式值 true显示， false 隐藏
- 原理： 基于条件判断，是否创建 或 移除元素节点
- 场景： 要么显示，要么隐藏，不频繁切换的场景
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <div id="app">
<div v-show="flag" class="box">我是v-show控制的盒子</div>
<div v-if="flag" class="box">我是v-if控制的盒子</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
flag: false
}
})
</script>
|
对于多条件判断的， 可以使用 v-else / v-else if="表达式", 需要紧接着 v-if使用
v-show
- 作用： 控制元素显示隐藏
- 语法： v-show = “表达式” 表达式值为 true 显示， false 隐藏
- 原理： 切换 display:none 控制显示隐藏
- 场景：频繁切换显示隐藏的场景
事件绑定指令（v-on）
作用： 注册事件 = 添加监听 + 提供处理逻辑
使用Vue时，如需为DOM注册事件，及其的简单，语法如下：
- <button v-on:事件名=”内联语句”>按钮
- <button v-on:事件名=”处理函数”>按钮
- <button v-on:事件名=”处理函数(实参)”>按钮
- v-on: 简写为 @
- 内联语句
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <div id="app">
<button @click="count--">-</button>
<span>{{ count ]]</span>
<button v-on:click="count++">+</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
count: 100
}
})
</script>
|
- 事件处理函数
- 事件处理函数应该写到一个跟data同级的配置项（methods）中
- methods中的函数内部的this都指向Vue实例
1
2
3
4
5
6
7
8
9
10
11
12
13
| <div id="app">
<button>切换显示隐藏</button>
<h1 v-show="isShow">黑马程序员</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
isShow: true
}
})
</script>
|
- 给事件处理函数传参
- 如果不传递任何参数，则方法无需加小括号；methods方法中可以直接使用 e 当做事件对象
- 如果传递了参数，则实参
$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
| <style>
.box {
border: 3px solid #000000;
border-radius: 10px;
padding: 20px;
margin: 20px;
width: 200px;
}
h3 {
margin: 10px 0 20px 0;
}
p {
margin: 20px;
}
</style>
<div id="app">
<div class="box">
<h3>小黑自动售货机</h3>
<button>可乐5元</button>
<button>咖啡10元</button>
<button>牛奶8元</button>
</div>
<p>银行卡余额：{{ money ]]元</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
money: 100
}
})
</script>
|
属性绑定指令(v-bind)
- 作用：动态设置html的标签属性 比如：src、url、title
- 语法：**v-bind:**属性名=“表达式”
- **v-bind:**可以简写成 => :
比如，有一个图片，它的 src 属性值，是一个图片地址。这个地址在数据 data 中存储。
则可以这样设置属性值：
<img v-bind:src="url" /><img :src="url" /> （v-bind可以省略）
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<img v-bind:src="imgUrl" v-bind:title="msg" alt="">
<img :src="imgUrl" :title="msg" alt="">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
imgUrl: './imgs/10-02.png',
msg: 'hello'
}
})
</script>
</body>
</html>
|
列表渲染指令（v-for）
Vue 提供了 v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。
v-for 指令需要使用 (item, index) in arr 形式的特殊语法，其中：
- item 是数组中的每一项·
- index 是每一项的索引，不需要可以省略
- arr 是被遍历的数组
此语法也可以遍历对象和数字
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
//遍历对象
<div id="app">
<ul>
<li v-for="(item, index) in list">{{ item ]] -- {{ index ]]</li>
</ul>
</div>
</div>
value:对象中的值
key:对象中的键
index:遍历索引从0开始
//遍历数字
item从1 开始
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app1 = new Vue({
el: '#app',
data: {
list: ['new','new1','new2']
}
})
</script>
</body>
</html>
|
指令补充
指令修饰符
所谓指令修饰符就是通过“.”指明一些指令后缀 不同的后缀封装了不同的处理操作 —> 简化代码
按键修饰符
- @keyup.enter —>当点击enter键的时候才触发
代码演示：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <div id="app">
<h3>@keyup.enter → 监听键盘回车事件</h3>
<input v-model="username" type="text">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
username: ''
},
methods: {
}
})
</script>
|
v-model修饰符
- v-model.trim —>去除首位空格
- v-model.number —>转数字
事件修饰符
- @事件名.stop —> 阻止冒泡
- @事件名.prevent —>阻止默认行为
- @事件名.stop.prevent —>可以连用 即阻止事件冒泡也阻止默认行为
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
59
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.father {
width: 200px;
height: 200px;
background-color: pink;
margin-top: 20px;
}
.son {
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
<div id="app">
<h3>v-model修饰符 .trim .number</h3>
姓名：<input v-model.trim="username" type="text"><br>
年纪：<input v-model.number="age" type="text"><br>
<h3>@事件名.stop → 阻止冒泡</h3>
<div @click="fatherFn" class="father">
<div @click="sonFn" class="son">儿子</div>
</div>
<h3>@事件名.prevent → 阻止默认行为</h3>
<a @click href="http://www.baidu.com">阻止默认行为</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
username: '',
age: '',
},
methods: {
fatherFn () {
console.log('老被点击了')
},
sonFn (e) {
console.log('小被点击了')
}
}
})
</script>
</body>
</html>
|
v-bind对于样式操作的增强
对于控制样式的增强- class
Vue 扩展了 v-bind 的语法，可以针对 class 类名 和 style 行内样式 进行控制
语法：
1
2
3
4
5
6
7
8
9
| <div> :class = "对象/数组">这是一个div</div>
<div class="box" :class="{ 类名1: 布尔值, 类名2: 布尔值 }"></div>
<div class="box" :class="[ 类名1, 类名2, 类名3 ]"></div>
|
案例：
当我们点击哪个tab页签时，哪个tab页签就高亮
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
59
60
61
62
63
64
65
66
67
68
69
70
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
* {
margin: 0;
padding: 0;
}
ul {
display: flex;
border-bottom: 2px solid #e01222;
padding: 0 10px;
}
li {
width: 100px;
height: 50px;
line-height: 50px;
list-style: none;
text-align: center;
}
li a {
display: block;
text-decoration: none;
font-weight: bold;
color: #333333;
}
li a.active {
background-color: #e01222;
color: #fff;
}
</style>
<div id="app">
<ul>
<li v-for="(item, index) in list" :key="item.id" @click="activeIndex=index">
<a v-bind:class="{active: index === activeIndex ? true : false }">{{ item.name ]]</a>
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
activeIndex: 2,
list: [
{ id: 1, name: '京东秒杀' },
{ id: 2, name: '每日特价' },
{ id: 3, name: '品类秒杀' }
]
}
})
</script>
</body>
</html>
|
v-bind对有样式控制的增强-操作style
语法：
1
| <div class="box" :style="{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }"></div>
|
案例：
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.box {
width: 200px;
height: 200px;
background-color: rgb(187, 150, 156);
}
</style>
<div id="app">
<div class="box" :style="{width: '400px', height: '200px', backgroundColor: 'red' }"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
}
})
</script>
</body>
</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
49
50
51
52
53
54
55
56
57
58
59
60
61
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.progress {
height: 25px;
width: 400px;
border-radius: 15px;
background-color: #272425;
border: 3px solid #272425;
box-sizing: border-box;
margin-bottom: 30px;
}
.inner {
width: 50%;
height: 20px;
border-radius: 10px;
text-align: right;
position: relative;
background-color: #409eff;
background-size: 20px 20px;
box-sizing: border-box;
transition: all 1s;
}
.inner span {
position: absolute;
right: -20px;
bottom: -25px;
}
</style>
<div id="app">
<div class="progress">
<div class="inner" :style="{width: percent + '%'}">
<span>{{percent ]]%</span>
</div>
</div>
<button @click="percent =25">设置25%</button>
<button @click="percent =50">设置50%</button>
<button @click="percent =75">设置75%</button>
<button @click="percent =100">设置100%</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
percent: 30,
}
})
</script>
</body>
</html>
|
v-model应用与其他表单元素
常见的表单元素都可以用 v-model 绑定关联 → 快速 获取 或 设置 表单元素的值
它会根据 控件类型 自动选取 正确的方法 来更新元素
1
2
3
4
5
6
| 输入框 input:text ——> value
文本域 textarea ——> value
复选框 input:checkbox ——> checked
单选框 input:radio ——> checked
下拉菜单 select ——> 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
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
59
60
61
62
63
64
65
66
67
68
69
70
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
textarea {
display: block;
width: 240px;
height: 100px;
margin: 10px 0;
}
</style>
<div id="app">
<h3>学习网</h3>
姓名：
<input type="text">
<br><br>
是否单：
<input type="checkbox" v-model="isSingle">
<br><br>
性别:
<input v-model="gender" type="radio" name="gender" value="1">男
<input v-model="gender" type="radio" name="gender" value="0">女
<br><br>
所在城市:
<select v-model="cityId">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">成都</option>
<option value="4">南京</option>
</select>
<br><br>
自我描述：
<textarea v-model="desc"></textarea>
<button>立即注册</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
username: '',
isSingle: true,
gender: '0',
cityId: '3',
desc: 'time and on '
}
})
</script>
</body>
</html>
|
Computed计算属性
基础语法
概念:
基于现有的数据，计算出来的新属性。 依赖的数据变化，自动重新计算。
语法
- 声明在 computed 配置项中，一个计算属性对应一个函数
- 使用起来和普通属性一样使用
