Vue基础

Vue简介

（1）Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写

（2）Vue基于MVVM（Model-View-ViewModel）思想，通过数据驱动视图，实现了数据的双向绑定，将编程的关注点放在数据上

  • 数据驱动视图：当数据发生变化时，会驱动视图会自动更新；
  • 双向数据绑定：通过v-model指令将表单输入元素与Vue实例中的数据进行双向绑定，实现数据的同步更新

（3）Vue 的版本

版本简介
Vue1.x几乎被淘汰，不再建议学习与使用
Vue2.x目前企业级项目开发中的主流版本，未来1 ~ 2年内可能会被逐渐淘汰
Vue3.x2020-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-ifv-else-if 指令必须配合 v-if 指令一起使用，否则不会被识别
v-elsev-else 指令必须配合 v-if 指令一起使用，否则不会被识别

列表渲染指令（v-for）

指令简介
v-for列表渲染，遍历容器的元素或对象的属性

自定义指令（directives）

自定义指令简介
私有自定义指令仅当前组件可用
全局自定义指令所有组件都可用

Vue实例配置对象

选项说明
dataVue实例数据对象
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生命周期

vue2vue3阶段周期
beforeCreate—创建前
created—创建后
beforeMountonBeforeMount挂载前
mountedonMounted挂载完成
beforeUpdateonBeforeUpdate更新前
updatedonUpdated更新后
beforeDestroyonBeforeUnmount销毁前
destroyedonUnmounted销毁后
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>