Vue技术框架
# Vue.js 是什么
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
# 官方参考文档
- Vue2.0 官方文档 (opens new window)
- Vue2.0 中文文档 (opens new window)
- Vue2.0 脚手架(vue cli) (opens new window)
- Vue3.0 中文文档 (opens new window)
- Vue3.0 中文文档 - vuejs (opens new window)
- Vue3.0 英文文档 (opens new window)
# Vue 基本使用
# 1、直接引 js 入文件
可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script>
标签引入。点击下载:vue.min.js (opens new window)
<script src="./vue.min.js"></script>
1
# 2、直接使用 CDN 库
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<!-- 或者 -->
<script src="https://unpkg.com/vue/dist/vue.js"></script> <!--会保持和 npm 发布的最新的版本一致。-->
<!-- 或者 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
1
2
3
4
5
2
3
4
5
# 3、通过 npm 安装 Vue
国内使用 npm
速度很慢,你可以使用淘宝定制的 cnpm
(gzip 压缩支持) 命令行工具代替默认的 npm
:
npm install -g cnpm --registry=https://registry.npm.taobao.org
npm config set registry https://registry.npm.taobao.org
1
2
2
这样就可以使用 cnpm
命令来安装模块了:
#cnpm install [name]
cnpm install vue
1
2
2
# 4、使用 vue-cli2.0 快速构建 Vue 开发项目
Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。
全局安装 vue-cli
$ cnpm install --global vue-cli
1
创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
1
这里需要进行一些配置,默认回车即可
This will install Vue 2.x version of the template.
For Vue 1.x use: vue init webpack#1.0 my-project
? Project name my-project
? Project description A Vue.js project
? Author runoob <test@runoob.com>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "my-project".
To get started:
cd my-project
npm install
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
进入项目,安装并运行:
$ cd my-project
$ cnpm install
$ cnpm run dev
DONE Compiled successfully in 4388ms
> Listening at http://localhost:8080
1
2
3
4
5
6
2
3
4
5
6
# 5、(推荐)使用 vue-cli3.0 快速构建 Vue 开发项目
注意
Vue CLI
的包名称由 vue-cli
改成了 @vue/cli
。 如果你已经全局安装了旧版本的 vue-cli
(1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g
或 yarn global remove vue-cli
卸载它。
可以使用下列任一命令安装这个新的包:
npm install -g @vue/cli
# OR
yarn global add @vue/cli
1
2
3
2
3
如需升级全局的 Vue CLI
包,请运行:
npm update -g @vue/cli
# 或者
yarn global upgrade --latest @vue/cli
1
2
3
2
3
创建项目
#vue create <project-name> 项目名称任意 我以 vue-cil3.0-template 为例
vue create vue-cil3.0-template
1
2
2
运行项目
cd vue-cil3.0-template # 进入项目根目录
npm run serve # 运行项目
1
2
2
# 组件的生命周期
钩子函数 | 描述 |
---|---|
beforeCreate | 组件实例刚被创建,组件属性计算之前,如data属性等 |
created | 组件实例创建完成,属性已绑定,但DOM还未生成,$el属性还不存在 |
beforeMount | 模板编译 / 挂载之前 |
mounted | 模板编译 / 挂载之后 |
beforeUpdate | 组件更新之前 |
update | 组件更新之后 |
activated | 组件被激活时调用 |
deactivated | 组件被移除时调用 |
beforeDestory | 组件销毁前调用 |
destoryed | 组件销毁后调用 |
# 生命周期测试代码
<!DOCTYPE html>
<html>
<head>
<title>钩子函数</title>
<meta charset="utf-8">
<script src="http://cdn.bootcss.com/vue/2.1.10/vue.js"></script>
<body>
<div id="app">
<input type="button" @click="change" value="更新数据" />
<input type="button" @click="destroy" value="销毁" />
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
message: "Welcome Vue",
myValue: ''
},
props: {
value: {
type: String,
default: ""
}
},
watch: {
message(newValue) {
this.myValue = newValue;
}
},
methods: {
change() {
this.message = 'Datura is me';
},
destroy() {
vm.$destroy();
}
},
beforeCreate: function () {
console.group('beforeCreate 创建前状态===============》');
console.log("%c%s", "color:red", "el : " + this.$el); //undefined
console.log("%c%s", "color:red", "data : " + this.$data); //undefined
console.log("%c%s", "color:red", "message: " + this.message);//undefined
},
created: function () {
console.group('created 创建完毕状态===============》');
console.log("%c%s", "color:red", "el : " + this.$el); //undefined
console.log("%c%s", "color:green", "data : " + this.$data); //[object Object] => 已被初始化
console.log("%c%s", "color:green", "message: " + this.message); //Welcome Vue => 已被初始化
},
beforeMount: function () {
console.group('beforeMount 挂载前状态===============》');
console.log("%c%s", "color:green", "el : " + (this.$el)); //已被初始化
console.log(this.$el); // 当前挂在的元素
console.log("%c%s", "color:green", "data : " + this.$data); //已被初始化
console.log("%c%s", "color:green", "message: " + this.message); //已被初始化
},
mounted: function () {
console.group('mounted 挂载结束状态===============》');
console.log("%c%s", "color:green", "el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:green", "data : " + this.$data); //已被初始化
console.log("%c%s", "color:green", "message: " + this.message); //已被初始化
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前状态===============》'); //这里指的是页面渲染新数据之前
console.log("%c%s", "color:green", "el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:green", "data : " + this.$data);
console.log("%c%s", "color:green", "message: " + this.message);
},
updated: function () {
console.group('updated 更新完成状态===============》');
console.log("%c%s", "color:green", "el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:green", "data : " + this.$data);
console.log("%c%s", "color:green", "message: " + this.message);
},
beforeDestroy: function () {
console.group('beforeDestroy 销毁前状态===============》');
console.log("%c%s", "color:red", "el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red", "data : " + this.$data);
console.log("%c%s", "color:red", "message: " + this.message);
},
destroyed: function () {
console.group('destroyed 销毁完成状态===============》');
console.log("%c%s", "color:red", "el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red", "data : " + this.$data);
console.log("%c%s", "color:red", "message: " + this.message)
}
})
</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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
上次更新: 2024/01/30, 00:35:17
- 01
- Node与GLIBC_2.27不兼容解决方案08-19
- 02
- Git清空本地文件跟踪缓存08-13