Vue基础
Vue简介
（1）Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写
（2）Vue基于MVVM（Model-View-ViewModel）思想，通过数据驱动视图，实现了数据的双向绑定，将编程的关注点放在数据上
- 数据驱动视图：当数据发生变化时，会驱动视图会自动更新；
- 双向数据绑定：通过
v-model指令将表单输入元素与Vue实例中的数据进行双向绑定，实现数据的同步更新
（3）Vue 的版本
| 版本 | 简介 |
|---|
| Vue1.x | 几乎被淘汰，不再建议学习与使用 |
| Vue2.x | 目前企业级项目开发中的主流版本，未来1 ~ 2年内可能会被逐渐淘汰 |
| Vue3.x | 2020-09-19 发布 |
MVVM思想
| 概念 | 简介 |
|---|
| Mode | 模型（Model），当前页面渲染时所依赖的数据源和业务逻辑。 |
| View | 视图（View），表示当前页面所渲染的 DOM 结构。 |
| ViewModel | 视图模型（ViewModel），连接视图与数据的中间件 |
Vue核心要素
| 核心要素 | 描述 |
|---|
| 响应式数据 | 数据发生变化时，相关视图会自动更新 |
| 模板语法 | 基于HTML的模板语法，用于将数据和视图进行关联 |
| 组件系统 | 页面拆分为可复用的组件，每个组件有自己的模板、样式和逻辑 |
| 生命周期钩子 | 在组件不同生命周期阶段执行操作的钩子函数 |
| 路由管理 | Vue Router插件用于管理单页面应用程序的路由 |
| 状态管理 | Vuex状态管理库用于在组件间共享和管理全局状态 |
Vue指令
内容渲染指令
| 指令 | 简介 |
|---|
v-text | 会覆盖元素内部原有的内容，不常用 |
{{ }} | 插值表达式，只是内容的占位符，不会覆盖原有的内容，开发常用
只能用在元素的内容节点中，不能用在元素的属性节点中 |
v-html | 可以把带有标签的字符串，渲染成真正的 HTML 内容 |
属性绑定指令（v-bind）
| 指令 | 简介 |
|---|
v-bind | 为HTML标签动态绑定属性值，如设置href、css样式等
给标签原有属性绑定模型数据，模型数据发生变化，标签属性值也随之发生变化 |
事件绑定指令（v-on）
| 指令 | 简写 | 简介 |
|---|
v-on:click | @click | 点击事件，用户点击时触发 |
v-on:input | @input | 输入事件，用户输入时触发 |
v-on:keyup | @keyup | 键盘事件，用户键盘（按键）松开时触发 |
v-on:其他事件 | @其他事件 | 绑定其他事件 |
双向绑定指令（v-model）
| 修饰符 | 作用 |
|---|
v-model.number | 自动将用户的输入值转为数值类型 |
v-model.trim | 自动过滤用户输入的首尾空白字符 |
v-model.lazy | 在失去焦点时更新（change事件），而非获取到焦点时更新（input事件） |
条件渲染指令（v-if）
| 指令 | 简介 |
|---|
v-if | 会动态地创建或移除 DOM 元素，从而控制元素在页面上的显示与隐藏 |
v-show | 会动态为元素添加或移除 style=”display: none;” 样式，从而控制元素的显示与隐藏 |
v-else-if | v-else-if 指令必须配合 v-if 指令一起使用，否则不会被识别 |
v-else | v-else 指令必须配合 v-if 指令一起使用，否则不会被识别 |
列表渲染指令（v-for）
| 指令 | 简介 |
|---|
v-for | 列表渲染，遍历容器的元素或对象的属性 |
自定义指令（directives）
| 自定义指令 | 简介 |
|---|
| 私有自定义指令 | 仅当前组件可用 |
| 全局自定义指令 | 所有组件都可用 |
Vue实例配置对象
| 选项 | 说明 |
|---|
| data | Vue实例数据对象 |
| methods | 定义Vue实例中的方法 |
| components | 定义子组件 |
| computed | 定义计算属性函数（私有计算属性） |
| filters | 定义过滤器函数（私有过滤器） |
| watch | 定义监听器函数 |
| directives | 定义自定义指令 |
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
| <script type="text/javascript">
// 全局过滤器（必须在Vue实例对象前声明）
Vue.filter('', () => {});
new Vue({
// el用于指定当前vue实例为哪个容器服务（值通常为css选择器）
el: "#app",
// data对象用来定义数据模型，数据提供给el指定的容器使用
data: {
},
// methods用于定义事件的处理函数
methods: {
},
// components用于注册子组件
components: {
},
// computed用于定义计算属性函数（私有计算属性）
computed: {
},
// filters用于定义过滤器函数（私有过滤器）
filters: {
},
// watch用于定义监听器函数
watch: {
},
});
</script>
|
Vue组件
| 组成 | 简介 |
|---|
| template | 组件的模板结构，每个组件对应的模板结构，需要定义到<template>节点中 |
| script | 组件的 JavaScript 行为，可以在 <script> 节点中封装组件的 JavaScript 业务逻辑，其中data 必须是一个函数 |
| style | 组件的样式，可以在 <style> 节点中编写样式美化，通过<style>标签的属性 lang=” “ 来切换语法（css、less） |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <!-- template标签里定义html模板 -->
<template>
<div>
</div>
</template>
<!-- script里定义js行为或导入导出文件 -->
<script>
// 默认导出，向其他模块共享成员（仅允许使用一次）
export default {};
</script>
<!-- style标签里定义样式 -->
<style lang="less" scoped></style>
|
Vue插槽
插槽是 vue 为组件的封装者提供的能力，允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽，可以把插槽认为是组件封装期间，为用户预留的内容的占位符
| 插槽 | 简介 |
|---|
| 默认插槽 | <slot></slot> |
| 具名插槽 | 使用插槽需要在template标签，使用v-slot:或slot属性指定插槽的名字 |
| 作用域插槽 | 在封装组件时，为预留插槽绑定自定义属性 props 数据， 这种带有自定义属性 props 数据的 叫做作用域插槽 |
Vue路由
| 路由 | 简介 |
|---|
| 后端路由 | 由服务器端进行实现，并完成资源的分发 服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据 |
| 前端路由 | 依靠hash地址（锚链接）的变化进行实现 浏览器的路径改变时，对应的组件就会显示 |
Vue生命周期
| vue2 | vue3 | 阶段周期 |
|---|
| beforeCreate | — | 创建前 |
| created | — | 创建后 |
| beforeMount | onBeforeMount | 挂载前 |
| mounted | onMounted | 挂载完成 |
| beforeUpdate | onBeforeUpdate | 更新前 |
| updated | onUpdated | 更新后 |
| beforeDestroy | onBeforeUnmount | 销毁前 |
| destroyed | onUnmounted | 销毁后 |
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
| <template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, World!',
};
},
// 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前调用
beforeCreate() {
console.log('beforeCreate');
},
// 在实例创建完成后被立即调用
created() {
console.log('created');
},
// 在挂载开始之前被调用：相关的 render 函数首次被调用
beforeMount() {
console.log('beforeMount');
},
// el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子
mounted() {
console.log('mounted');
},
// 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。可通过访问更新前的状态，从而比较更新前后的数据变化
beforeUpdate() {
console.log('beforeUpdate');
},
// 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。调用时，组件 DOM 已经更新
updated() {
console.log('updated');
},
// keep-alive 组件激活时调用，该钩子函数只在使用 keep-alive 组件时可用
activated() {
console.log('activated');
},
// keep-alive 组件停用时调用，该钩子函数只在使用 keep-alive 组件时可用
deactivated() {
console.log('deactivated');
},
// 实例销毁之前调用。在这一步，实例仍然完全可用
beforeDestroy() {
console.log('beforeDestroy');
},
// 实例销毁后调用。该钩子被调用后，组件实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁
destroyed() {
console.log('destroyed');
},
};
</script>
<style scoped>
p {
color: red;
}
</style>
|
