Vue 快速入门
# vue 基本介绍
- vue 基本的介绍
- vue 安装
- 快速入门示例
- 生命周期
- 和 jquery 的对比（mvvm 模式）
# vue 基本的介绍
vue 是一个构建用户界面的渐进式框架。
框架和库的区别？
- 库：基本上就是封装的一些方法在里面，直接使用即可，不用自己再去写逻辑代码。我们学过的库有 jquery、lodash
- 框架：框架基本上就是提供了一整套解决方案，你需要遵循框架的规则和范例来书写代码。
明白了库和框架的区别后，我们来看第二个词：渐进式。
所谓渐进式，就是 Vue 提供了几个不同的层面共开发人员使用。
- 如果只是想要使用 vue 最基本的声明式渲染功能，那么，完全可以把 vue 当成一个模板引擎来使用。
- 如果要以组件化的形式来进行开发，则可以进一步使用 vue 的组件系统。
- 如果要开发单页应用，那么可以使用 vue 技术栈里面的前端路由 vue-router
- 如果组件也来越多，想要组件之间传递数据，可以使用 vue 的状态管理工具 vuex
vue 官网：https://cn.vuejs.org/
# vue 安装
根据官网描述，vue 可以使用 cdn 形式来引入，还可以使用官方提供的脚手架。
目前学习基础语法阶段，我们选择使用 cdn 的形式。
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
# 快速入门示例
vue 快速入门示例代码如下：
<body>
<div id="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el : '#app',
data : {
message : 'Hello Vue'
}
})
</script>
</body>
2
3
4
5
6
7
8
9
10
11
12
13
14
# 模板插值
上面在介绍 vue 的时候，有说过，如果只是想使用 vue 最基本的声明式渲染功能，那么完全可以把vue当作一个模板引擎来使用。
在上面的代码中
<div id="app">
{{ message }}
</div>
2
3
这一块就是我们的模板，中间的 被称之为占位符，就类似于模板引擎中，给模板挖坑。
# 构造器
每一个 vue 应用都通过 Vue 来创建一个 vue 的根实例。然后需要传入一些配置选项：
- el：要挂载的元素
- data：数据，这些数据后期会通过模板插值插入到模板里面
后面会渐渐的学习其他的配置选项。
# 数据绑定
通过上面的例子，我们看到了 vue 实例里面的数据插值到了模板里面，但是，vue 在背后做了大量的工作，实现了一个数据响应式改变。数据一改变，视图自动更新。
const vm = new Vue({
el : '#app',
data : {
message : 'Hello Vue',
name : 'william'
}
})
2
3
4
5
6
7
在控制台通过 vm.message 来改变数据的时候，视图就自动更新了。
# 数据代理
vue 的实例会自动代理你的数据。也就是说，访问数据的时候，直接vue实例.数据键就可以访问了。
<script>
const data = {
message : 'Hello Vue'
}
const vm = new Vue({
el : '#app',
data : data
})
console.log(vm.message); // Hello Vue
vm.message = 'William'
console.log(vm.message === data.message); // true
console.log(data.message); // William
</script>
2
3
4
5
6
7
8
9
10
11
12
13
vue 实例还暴露了一些有用的属性和方法，但是为了和用户自定义的方法属性区分开，这些暴露的数据和方法前面都有一个 $ 符号。
$el，访问到挂载的元素。
const vm = new Vue({
el : '#app',
data : {
message : 'Hello Vue'
}
})
console.log(vm.$el);
2
3
4
5
6
7
上面的代码，通过 $el 就可以访问到挂载的 div 元素。
$watch，vue 提供的一个方法，用于监听数据的变化。代码示例如下：
const vm = new Vue({
el : '#app',
data : {
message : 'Hello Vue'
}
})
// newVal 代表是新的值，oldVal 代表是旧的值
vm.$watch('message',function(newVal,oldVal){
console.log(`新的值为${newVal}，旧的值为${oldVal}`);
})
2
3
4
5
6
7
8
9
10
在上面的代码中，我们通过 $watch 方法来监听 message 数据的变化，如果message数据发生变化，触发$watch的回调函数。
# 生命周期
在 vue 实例从创建到销毁，一共会经历一系列的过程，例如，需要设置数据监听、编译模板、将实例挂载到对应 dom，有这一系列的操作。这一系列的操作是需要时间的，所以在 vue 里面提供了生命周期钩子函数，当你的vue 实例到达特定的时间点，触发对应的生命周期钩子函数。
生命周期钩子函数，就可以把它理解为事件，也就是说，我们针对不同的时间点创建了回调函数，当vue实例到达相应的时间点的时候，自动触发对应的回调函数。
接下来，我们就需要来看一下有哪些生命周期时间点。
在vue中，提供一共8个共4组声明周期钩子函数：
- beforeCreate:vue 实例创建之前
- created:vue实例已经创建完毕，数据也创建完毕，但是数据还没有插入到模板
- beforeMount:将数据渲染到模板之前的时间点
- mounted:数据已经插值到模板里面，视图显示正常
- beforeUpdate:更新前
- updated:更新后
- beforeDestroy:vue 实例销毁前
- destroyed:vue 实例销毁后
下面是一个生命周期的代码示例：
<div id="app">
<button @click="destroy">销毁vue实例</button>
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vm = new Vue({
el : '#app',
data : {
message : 'Hello Vue'
},
beforeCreate() {
console.log(this.message);
},
created() {
console.log(this.message);
},
destroyed() {
console.log('vue 实例被销毁！');
},
methods: {
destroy(){
this.$destroy();
}
},
})
</script>
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
下面再看一个更加具体的示例：
<body>
<div id="app">
<!-- this is a test -->
{{ message }}
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: "this is a test"
},
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:red", "data : " + this.$data); // 已被初始化
console.log("%c%s", "color:red", "message: " + this.message); // 已被初始化
},
beforeMount: function () {
console.group('beforeMount 挂载前状态===============》');
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); // 已被初始化
},
mounted: function () {
console.group('mounted 挂载结束状态===============》');
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); // 已被初始化
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前状态===============》');
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);
},
updated: function () {
console.group('updated 更新完成状态===============》');
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);
},
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>
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
# 和 jquery 的对比（mvvm 模式）
在 jquery 年代，我们从服务器上面拿到数据之后，需要手动对数据进行更新。
也就是说，当我们拿到数据之后，我们还需要劳神费力的去找节点，然后给dom节点赋值。
而 vue 最大的特点就是数据和 dom节点绑定好了，当我们更新数据的时候，dom节点自动更新，视图自然也就更新了。
# mvvm 模式
mvvm 模式指的是三个东西：
- m：model 数据
- v：view 视图
- vm：viewmodel 视图模型
最早的时候，前后端不分离，后端的表现层分为 MVC：
- M：数据
- V：视图
- C：控制器
在不分离的年代，控制器控制数据填充视图，并且把视图返回。
后面就兴起了单页应用，整个V端（视图）跑到了客户端，服务器端就是M和C，C负责把M返回到客户端。
在客户端手动通过js（jquery）将从服务器拿到的M填充到V里面。
但是在大型应用里面，这是相当不利于维护的。
后面，随着facebook推出了react，mvvm 模式渐渐被大家所熟悉。
多了一个 vm（视图模型），vm会和客户端的V进行绑定，vm里面的数据一变，V就变了。后期，我们从服务器端拿回来M后，只需要拿这个M去更新VM即可。
