前端技术分享
0%

发表于 更新于 分类于

v-once 指令

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-once</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
	</head>
	<body>
		<div id="app">
			<div v-once>{{ msg }}</div>
			<input v-model="msg" />
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data() {
					return {
						msg: 123
					}
				}
			})
		</script>
	</body>
</html>

在浏览器中运行代码时可以发现，在文本框中输入内容时，div元素中的内容并没有跟着改变，这是因为在浏览器运行时，DOM元素已经渲染完成了。

v-pre 指令

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-pre</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
	</head>
	<body>
		<div id="app">
			<div v-pre>{{ msg }}</div>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data() {
					return {
						msg: 123
					}
				}
			})
		</script>
	</body>
</html>

在浏览器中运行代码时可以看到，页面显示的内容为{{ msg }}。

v-cloak 指令

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

css写法：

1
2
3
[v-cloak] {
	display: none;
}

示例：

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-cloak</title>
		<style type="text/css">
			[v-cloak] {
				display: none;
			}
		</style>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
	</head>
	<body>
		<div id="app">
			<div v-cloak>{{ msg }}</div>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data() {
					return {
						msg: 123
					}
				}
			})
		</script>
	</body>
</html>

<div v-cloak>{{ msg }}</div>里的内容不会显示，直到编译结束后才会进行显示。

发表于 更新于 分类于

v-bind 用于处理 HTML 中的标签属性。

class 对象语法

模版写法：

1
2
3
4
5
6
7
8
<div v-bind:class="{ green: isActive01 }"></div>
多个：
<div v-bind:class="{ red: isActive02, font: isActive03 }">白色</div>

<!-- -------------------- 简写 -------------------- -->
<div :class="{ green: isActive01 }"></div>
多个：
<div :class="{ red: isActive02, font: isActive03 }">白色</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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="utf-8">
 		<title>v-bind class</title>
		<style type="text/css">
			.blue {
				width: 100px;
				height: 100px;
				background-color: blue;
			}
			.green {
				width: 100px;
				height: 100px;
				background-color: green;
			}
			.red {
				width: 100px;
				height: 100px;
				background-color: red;
			}
			.font {
				color: white;
			}
		</style>
 		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
 	</head>
 	<body>
 		<div id="app">
 			<div v-bind:class="styl"></div>
			<div v-bind:class="{ green: isActive01 }"></div>
			<div v-bind:class="{ red: isActive02, font: isActive03 }">白色</div>
 		</div>
 		<script type="text/javascript">
 			var vm = new Vue({
 				el: '#app',
 				data() {
 					return {
 						styl: 'blue',
						isActive01: true,
						isActive02: true,
						isActive03: true
 					}
 				}
 			})
 		</script>
 	</body>
 </html>

class 数组语法

模版写法：

1
2
3
<div v-bind:class="[ class01, class02 ]">白色</div>
<!-- -------------------- 简写 -------------------- -->
<div :class="[ class01, class02 ]">白色</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
32
33
34
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-bind class</title>
		<style type="text/css">
			.red {
				width: 100px;
				height: 100px;
				background-color: red;
			}
			.font {
				color: white;
			}
		</style>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
	</head>
	<body>
		<div id="app">
			<div v-bind:class="[ class01, class02 ]">白色</div>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data() {
					return {
						class01: 'red',
						class02: 'font'
					}
				}
			})
		</script>
	</body>
</html>

style 对象语法

模版写法：

1
2
3
<div v-bind:style="{ color: 'red', fontSize: '50px' }">文字</div>
<!-- -------------------- 简写 -------------------- -->
<div :style="{ color: 'red', fontSize: '50px' }">文字</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
<!DOCTYPE html>
	<html>
	<head>
		<meta charset="utf-8">
		<title>v-bind style</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
	</head>
	<body>
		<div id="app">
			<div v-bind:style="{ color: 'red', fontSize: '50px' }">文字</div>
			<div v-bind:style="styleObject">白色</div>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data() {
					return {
						styleObject: {
							width: '100px',
							height: '100px',
							backgroundColor: 'red',
							color: 'white'
						}
					}
				}
			})
		</script>
	</body>
</html>

注：当样式类似于font-size这种形式时，需要改写为fontSize。

style 数组语法

模版写法：

1
2
3
<div v-bind:style="[style01, style02]">文字</div>
<!-- -------------------- 简写 -------------------- -->
<div :style="[style01, style02]">文字</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
<!DOCTYPE html>
	<html>
	<head>
		<meta charset="utf-8">
		<title>v-bind style</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
	</head>
	<body>
		<div id="app">
			<div v-bind:style="[style01, style02]">文字</div>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data() {
					return {
						style01: {
							width: '100px',
							height: '100px',
							backgroundColor: 'red'
						},
						style02: {
							color: 'white'
						}
					}
				}
			})
		</script>
	</body>
</html>

需要注意的地方

v-bind 不仅用于 class 和 style 中，还用于其它，如：src，href等等。
当v-bind:style使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。

发表于 更新于 分类于

基础用法

模版写法：

1
<input v-model="message">

完整代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-model</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
	</head>
	<body>
		<div id="app">
			<input v-model="message" />
			<div>{{ message }}</div>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data() {
					return {
						message: '123'
					}
				}
			})
		</script>
	</body>
</html>

在浏览器运行此文件后，在文本框输入内容时可以看到文本框下面的内容也在跟着变化，这是因为v-model 指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定，它会根据控件类型自动选取正确的方法来更新元素。

注意：
v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

常见修饰符

修饰符 说明
.lazy 取代 input 监听 change 事件。
.number 输入字符串转为数字。
.trim 输入去掉首尾空格。

模版写法：

1
<input v-model.trim="msg">

完整代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-model</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
	</head>
	<body>
		<div id="app">
			<input v-model.trim="message" />
			<div>{{ message }}</div>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data() {
					return {
						message: '123'
					}
				}
			})
		</script>
	</body>
</html>

在浏览器运行此文件后，可以看到在文本框的头和尾输入空格是无效的。

发表于 更新于 分类于

前言

Vue使用v-on指令监听DOM事件，在开发过程中，可以将其绑定在DOM节点上，以此监听DOM事件来触发一些javascript代码。

点击事件

模版写法：

1
2
3
<button v-on:click="onClick">点击</button>
或简写：
<button @click="onClick">点击</button>

完整代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-on</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
	</head>
	<body>
		<div id="app">
			<button @click="onClick">点击</button>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				methods: {
					onClick() {
						alert('我被点击了');
					}
				}
			})
		</script>
	</body>
</html>

在浏览器运行此文件后，点击里面的按钮可以看到成功弹出我被点击了

回车事件

模版写法：

1
2
3
<input v-on:keyup.enter="onEnter" />
或简写：
<input @keyup.enter="onEnter" />

完整代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-on</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
	</head>
	<body>
		<div id="app">
			<input @keyup.enter="onEnter" />
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				methods: {
					onEnter() {
						alert('我被回车了');
					}
				}
			})
		</script>
	</body>
</html>

在浏览器运行此文件后，点击文本框，然后回车可以看到成功弹出我被点击了

常见修饰符

在日常开发中，经常会使用event.preventDefault（阻止节点默认行为）和event.stopPropagation（阻止事件冒泡），Vue将其封装成简短易用的事件修饰符，可以写在事件名称的后面。

名称 说明
.stop 阻止事件冒泡
.prevent 阻止元素默认行为
.capture 阻止事件捕获
.self 限制事件仅作用于节点自身
.once 事件被触发一次后即解除监听
.passive 可用在移动端滚动事件中，限制事件永不调用preventDefault()方法

模版写法：

1
2
3
<form @submit.prevent="onSubmit">
	<button type="submit">提交</button>
</form>

完整代码：

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-on</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
	</head>
	<body>
		<div id="app">
			<form @submit.prevent="onSubmit">
				<button type="submit">提交</button>
			</form>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				methods: {
					onSubmit() {
						alert('我被提交了');
					}
				}
			})
		</script>
	</body>
</html>

代码说明：当未指定form表单的action时，表单会被提交到当前的URL，所以可以使用.prevent阻止元素默认行为。

按键修饰符

别名修饰符 | 键值修饰符 | 对应按键
————|——— |———–
.delete | .8/.46 | 回车/删除
.tab | .9 | 制表
.enter | .13 | 回车
.esc | .27 | 退出
.space | .32 | 空格
.left | .37 | 左
.up | .38 | 上
.right | .39 | 右
.down | .40 | 下

总结

v-on 在平时开发中是很常用的，触发事件也有很多，在这里就不一一列举了，如果有兴趣，可以上网搜索下。

发表于 更新于 分类于

前言

在上面几章中，我们写入数据采用的都是{{ data }}的方式，
但是有时我们会看到一个现象，那就是当我们刷新页面时，页面会先出现{{ data }}这几个文字，
然后才出现或者不出现我们想要的内容。造出这种现象的原因是网速较慢或者加载vue.js文件报错，
导致数据无法成功渲染。这时我们可以使用 v-text 和 v-html 解决这个问题。

v-text 的使用

模版写法：

1
<div v-text="title"></div>

完整代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-text</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
	</head>
	<body>
		<div id="app">
			<div v-text="title"></div>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data() {
					return {
						title: 'v-text'
					}
				}
			})
		</script>
	</body>
</html>

在浏览器运行此文件，可以看到成功显示出v-text

v-html 的使用

v-text 会将数据解释为纯文本，而非HTML。有时我们需要输出真正的HTML，这时就可以使用v-html。

模版写法：

1
<div v-html="title"></div>

完整代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-html</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
	</head>
	<body>
		<div id="app">
			<div v-html="title"></div>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data() {
					return {
						title: '<h1>v-html</h1>'
					}
				}
			})
		</script>
	</body>
</html>

在浏览器运行此文件，可以看到成功显示出v-html

注意：生产环境中动态渲染HTML是非常危险的，容易导致XSS攻击。所以在使用v-html时，不要在用户提交或可操作的网页上使用。

发表于 更新于 分类于

v-for 的基本用法

v-for 用于实现列表渲染，可以使用item in items和item of items的语法

模版写法：

1
2
3
<li v-for="item in items">{{ item }}</li>
或：
<li v-for="item of items">{{ item }}</li>

js写法：

1
2
3
4
5
6
7
8
var vm = new Vue({
	el: '#app',
	data() {
		return {
			items: [1, 2, 3, 4, 5]
		}
	}
})

完整代码：

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-for</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="item in items">{{ item }}</li>
			</ul>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data() {
					return {
						items: [1, 2, 3, 4, 5]
					}
				}
			})
		</script>
	</body>
</html>

在浏览器运行此文件，可以看到成功显示出如下数据：

1
2
3
4
5
1
2
3
4
5

v-for 渲染对象的键值对

键值对是元素的索引值，也就是本例中的对象在数组中所占的下标。

模版写法：

1
2
3
<li v-for="(item, index) in items">{{ item }}</li>
或：
<li v-for="(item, item) of items">{{ item }}</li>

其实就是多了一个index。

完整代码：

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-for</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="(item, index) in items">
					{{ item }} --- {{ index }}
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data() {
					return {
						items: [1, 2, 3, 4, 5]
					}
				}
			})
		</script>
	</body>
</html>

在浏览器运行此文件，可以看到成功显示出如下数据：

1
2
3
4
5
1 --- 0
2 --- 1
3 --- 2
4 --- 3
5 --- 4

key的说明

  1. 就地复用策略：当在进行列表渲染时，vue会直接对已有的标签进行复用，不会将所有的标签重新删除和创建，只会创建新的元素然后把新的数据渲染进去。
  2. key属性可以用来提升v-for渲染的效率，vue不会去改变原有的元素和数据，而是创建新的元素然后把新的数据渲染进去。
  3. key属性必须是唯一的标识，很多人使用index，不过建议使用数据的id可能会更好。
  4. 是否使用key都不会影响功能的实现，但是在vue2.2.0+版本中，如果不实用key，将会出现警告。

key的使用

模版写法：

1
2
3
<li v-for="(item, index) in items" :key="index">{{ item }}</li>
或：
<li v-for="(item, item) of items" :key="index">{{ item }}</li>

完整代码：

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-for</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<li 
					v-for="(item, index) in items"
					:key="index"
				>
					{{ item }} --- {{ index }}
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data() {
					return {
						items: [1, 2, 3, 4, 5]
					}
				}
			})
		</script>
	</body>
</html>

在浏览器运行此文件，可以看到成功显示出如下数据：

1
2
3
4
5
1 --- 0
2 --- 1
3 --- 2
4 --- 3
5 --- 4

总结

通过以上各种例子可以发现，其实v-for也不会太难，而且在工作中，v-for是经常使用的，比如在加载商品列表时会使用，加载信息记录时也会使用，所以平时需要多写一下。

发表于 更新于 分类于

先写一个例子

创建一个HelloWorld.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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Hello World</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
	</head>
	<body>
		<div id="app">
			<h1>{{ title }}</h1>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data() {
					return {
						title: 'Hello World'
					}
				}
			})
		</script>
	</body>
</html>

在浏览器运行此文件，可以看到Hello World成功显示出来。

v-if, v-show 指令

  • v-if 的使用

用来判断是否加载html的DOM

v-if 的使用方法并不复杂，只需要挂在元素上即可，与之配套的有 v-else-if 和 v-else，这两个只能个 v-if 配套使用。

创建一个v-if.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
<!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="utf-8">
 		<title>v-if</title>
 		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
 	</head>
 	<body>
 		<div id="app">
 			<div v-if="isShow">isShow 为 true，所以我要显示出来</div>
			<div v-else>isShow 为 false，所以我要隐藏出来</div>
 		</div>
 		<script type="text/javascript">
 			var vm = new Vue({
 				el: '#app',
 				data() {
 					return {
 						isShow: true
 					}
 				}
 			})
 		</script>
 	</body>
 </html>

在浏览器运行此文件，可以看到isShow 为 true，所以我要显示出来成功显示出来。
如果将 isShow 的值修改为 false，则显示出isShow 为 false，所以我要隐藏出来

  • v-show 的使用

调整css中display属性，DOM已经加载，只是CSS控制没有显示出来。

创建一个v-show.html文件，开始写入以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="utf-8">
 		<title>v-show</title>
 		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
 	</head>
 	<body>
 		<div id="app">
 			<div v-show="isShow">isShow 为 true，所以我要显示出来</div>
 		</div>
 		<script type="text/javascript">
 			var vm = new Vue({
 				el: '#app',
 				data() {
 					return {
 						isShow: false
 					}
 				}
 			})
 		</script>
 	</body>
 </html>

在浏览器运行此文件，可以看到页面一片空白什么都没有。但是，当打开浏览器调试界面按F12时，可以看到有以下代码出现：

1
<div style="display: none;">isShow 为 true，所以我要显示出来</div>

由此可以看出，其实内容已经加载出来了，只是使用了 css 中的 display: none; 给隐藏了。

v-if 和 v-show 的区别

  • v-if 在切换中将组件上的事件监听器和子组件销毁和重建。
  • v-show 调整了 dispaly 属性，可以使客户端操作更加流畅。
  • v-show 有更高的初始渲染开销，而 v-if 有更高的切换开销。

简单点理解就是：v-if被判定为假时，Vue不会做任何事情，而 v-show 不管为真假，Vue都会进行DOM渲染。

发表于 更新于 分类于

学习Vue的前提条件

  • HTML的基础知识，比如基本元素的使用和结构代码的编写
  • CSS的基础知识，比如常见样式的编写和页面的布局
  • Javascript的基础知识，比如常见函数的使用
  • 如果能懂一点node 和 webpack，那就更好了

开发工具的选用

开发工具的选用并没有太多的要求，只要适合自己的就行，我在三年前使用的是WebStorm，现在使用的是VSCode。

安装和引入

在Vue官网中有两个版本，分别是：

  1. 开发版本：包含了完整的警告和调试模式
  2. 生产版本：删除了警告

1，安装方式一：直接用<script>引入（不推荐）

1
2
3
4
5
<!-- 最新版本 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 明确的版本号 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

2，安装方式二：使用npm进行安装（推荐）

打开cmd命令窗口，输入以下命令：

1
2
3
npm install vue
或：
npm i vue

注：

npm是随同NodeJS一起安装的包管理工具，新版的nodejs已经集成了npm，所以不需要另外安装npm，可以通过输入 “npm -v” 进行检测是否安装成功。

nodejs的安装方法比较简单，不懂的可以百度或谷歌，这里就不再阐述。

安装cnpm

由于用于npm的仓库源是在国外，资源传输速度较慢而且可能会受到限制，所以建议使用淘宝镜像源cnpm

打开cmd命令窗口，输入以下命令：

1
npm install -g cnpm -registry=https://registry.npm.taobao.org

执行完后，可输入以下命令进行检测cnpm是否安装成功：

1
cnpm -v

使用cnpm安装vue：

1
2
3
cnpm install vue
或：
cnpm i vue

执行完后，可输入以下命令进行检测Vue是否安装成功：

1
vue -V

总结

前期准备差不多就这些了，其中官网推荐在浏览器安装Vue Devtools，这个我想在后面需要用时再进行安装。还有脚手架vue-cli也会在Vue基础学完后进行使用。
好了，下一章就准备开始写vue了。

发表于 更新于 分类于

map

​遍历数组中每个元素并返回一个新数组，不改变原始数组，原始数组元素顺序依次处理元素。

示例：

1
2
3
4
5
6
7
8
9
10
let arr = [1, 2, 3];
let newArr = arr.map((x, y, z) => {
	console.log(x, y, z);
	// 1 0 [1, 2, 3]
	// 2 1 [1, 2, 3]
	// 3 2 [1, 2, 3]
	return Math.pow(x, 2);
})
console.log('----------');
console.log(newArr); // [1, 4, 9]

注意：map() 不会对空数组进行检测。

forEach

遍历数组中每个元素，并将元素传递给回调函数，但是没有返回值。

示例：

1
2
3
4
5
6
7
let arr = [1, 2, 3];
arr.forEach((x, y, z) => {
	console.log(x, y, z);
	// 1 0 [1, 2, 3]
	// 2 1 [1, 2, 3]
	// 3 2 [1, 2, 3]
})

注意: forEach() 对于空数组是不会执行回调函数的。

filter

遍历数组中每个元素返回一个满足返回条件的新数组，起到一个过滤作用。
简单点说就是，新数组中的元素是通过检查指定数组中符合条件的所有元素，不符合条件的元素就会被过滤掉。

示例：

1
2
3
4
5
6
7
8
9
let arr = [1, 2, 3];
let newArr = arr.filter((x, y, z) => {
	console.log(x, y, z);
	// 1 0 [1, 2, 3]
	// 2 1 [1, 2, 3]
	// 3 2 [1, 2, 3]
	return x > 1;
})
console.log(newArr); // [2, 3]

注意：filter() 不会对空数组进行检测，也不会改变原始数组。

reduce

接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算出一个值。比如，我们计算【1+2+3+4+5=？】时可以用此方法。

示例：

1
2
3
4
5
6
7
8
let arr = [1, 2, 3];
let total = arr.reduce((num , arg) => {
	console.log(num, arg);
	// 1 2
	// 3 3
	return num + arg;
})
console.log(total); // 6

注意: reduce() 对于空数组是不会执行回调函数的。

总结

map 和 filter 都是 immutable methods，也就是说它们只会返回一个新数组，而不会改变原来的那个数组。

发表于 更新于 分类于

参考文档：promise

promise 对象是一个代理对象（代理一个值），被代理的值在promise对象创建时可能是未知的。它允许你为异步操作的成功和失败分别绑定相应的处理方法（handlers）。 这让异步方法可以像同步方法那样返回值，但并不是立即返回最终执行结果，而是一个能代表未来出现的结果的promise对象

语法

1
new Promise( function(resolve, reject) {...} /* executor */  );

executor是带有 resolve 和 reject 两个参数的函数 。Promise构造函数执行时立即调用executor 函数， resolve 和 reject 两个函数作为参数传递给executor（executor 函数在Promise构造函数返回所建promise实例对象前被调用）。resolve 和 reject 函数被调用时，分别将promise的状态改为fulfilled（完成）或rejected（失败）。executor 内部通常会执行一些异步操作，一旦异步操作执行完毕(可能成功/失败)，要么调用resolve函数来将promise状态改成fulfilled，要么调用reject 函数将promise的状态改为rejected。如果在executor函数中抛出一个错误，那么该promise 状态为rejected。executor函数的返回值被忽略。

示例：

1
2
3
4
5
6
7
8
9
let demo = new Promise((resolve, reject) => {
	resolve('success');
	reject('failed') ;
})
demo.then((result) => {
  console.log(result);
}, (result) => {
  console.log(result);
})

promise的三种状态

状态 说明
pending 初始状态，既不是成功，也不是失败状态
fulfilled 意味着操作成功完成
rejected 意味着操作失败

promise的链式调用

  • Promise.prototype.then
  • Promise.prototype.catch

promise的作用

主要是解决地狱回调的问题