Vue技术框架

# Vue.js 是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

# 官方参考文档

# Vue 基本使用

# 1、直接引 js 入文件

可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。点击下载：vue.min.js (opens new window)

<script src="./vue.min.js"></script>

# 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

# 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

这样就可以使用 cnpm 命令来安装模块了：

#cnpm install [name]
cnpm install vue

1
2

# 4、使用 vue-cli2.0 快速构建 Vue 开发项目

Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。全局安装 vue-cli

$ cnpm install --global vue-cli

创建一个基于 webpack 模板的新项目

$ vue init webpack my-project

这里需要进行一些配置，默认回车即可

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

进入项目，安装并运行：

$ cd my-project
$ cnpm install
$ cnpm run dev
 DONE  Compiled successfully in 4388ms

> Listening at http://localhost:8080

1
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

如需升级全局的 Vue CLI 包，请运行：

npm update -g @vue/cli
# 或者
yarn global upgrade --latest @vue/cli

1
2
3

创建项目

#vue create <project-name> 项目名称任意 我以 vue-cil3.0-template 为例
vue create vue-cil3.0-template

1
2

运行项目

cd vue-cil3.0-template # 进入项目根目录
npm run serve # 运行项目

1
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

#Vue

上次更新: 2024/01/30, 00:35:17

← Vue开发中安装库经常报错 Vue生命周期→