Vue详细总结

第 1 章：Vue 核心

1.1 Vue 简介

1.1.1 官网

• 英文官网: https://vuejs.org/

• 中文官网: https://cn.vuejs.org/

1.1.2 介绍与描述

1. 动态构建用户界面的渐进式JavaScript 框架

2. 作者: 尤雨溪

1.1.3 Vue 的特点

1. 遵循MVVM 模式

2. 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发

3. 它本身只关注UI, 也可以引入其它第三方库开发项目

1.1.4 与其它JS 框架的关联

1. 借鉴Angular 的模板和数据绑定技术

2. 借鉴React 的组件化和虚拟DOM 技术

1.1.5 Vue 周边库

1. vue-cli: vue 脚手架

2. vue-resource

3. axios

4. vue-router: 路由

5. vuex: 状态管理

6. element-ui: 基于vue 的UI 组件库(PC 端)

......

1.2 初识Vue

1.3 模板语法

1.3.1 效果

1.3.2 模板的理解

html 中包含了一些JS 语法代码，语法分为两种，分别为：

1. 插值语法（双大括号表达式）

2. 指令（以v-开头）

1.3.3 插值语法

1. 功能: 用于解析标签体内容

2. 语法: {{xxx}} ，xxxx 会作为js 表达式解析

1.3.4 指令语法

1. 功能: 解析标签属性、解析标签体内容、绑定事件

2. 举例：v-bind:href = 'xxxx' ，xxxx 会作为js 表达式被解析

3. 说明：Vue 中有有很多的指令，此处只是用v-bind 举个例子

1.4 数据绑定

1.4.1 效果

1.4.2 单向数据绑定

1. 语法：v-bind:href ="xxx" 或简写为:href

2. 特点：数据只能从data 流向页面

1.4.3 双向数据绑定

1. 语法：v-mode:value="xxx" 或简写为v-model="xxx"

2. 特点：数据不仅能从data 流向页面，还能从页面流向data

1.5 MVVM 模型

1. M：模型(Model) ：对应data 中的数据

2. V：视图(View) ：模板

3. VM：视图模型(ViewModel) ： Vue 实例对象

1.6 事件处理

1.6.1 效果

1.6.2 绑定监听

1. v-on:xxx="fun"

2. @xxx="fun"

3. @xxx="fun(参数)"

4. 默认事件形参: event

5. 隐含属性对象: $event

1.6.3 事件修饰符

• .prevent : 阻止事件的默认行为 event.preventDefault()

• .stop : 停止事件冒泡 event.stopPropagation()

1.6.4 按键修饰符

• keycode : 操作的是某个keycode 值的键

• .keyName : 操作的某个按键名的键(少部分)

1.7 计算属性与监视

1.7.1 效果

1.7.2 计算属性-computed

1. 要显示的数据不存在，要通过计算得来。

2. 在computed 对象中定义计算属性。

3. 在页面中使用{{方法名}}来显示计算的结果。

1.7.3 监视属性-watch

1. 通过通过vm 对象的$watch()或watch 配置来监视指定的属性

2. 当属性变化时, 回调函数自动调用, 在函数内部进行计算

1.8 class 与style 绑定

1.8.1 理解

1. 在应用界面中, 某个(些)元素的样式是变化的

2. class/style 绑定就是专门用来实现动态样式效果的技术

1.8.2 class 绑定

1. :class='xxx'

2. 表达式是字符串: 'classA'

3. 表达式是对象: {classA:isA, classB: isB}

4. 表达式是数组: ['classA', 'classB']

1.8.3 style 绑定

1. :style="{ color: activeColor, fontSize: fontSize + 'px' }"

2. 其中activeColor/fontSize 是data 属性

1.9 条件渲染

1.9.1 条件渲染指令

1. v-if 与v-else

2. v-show

1.9.2 比较v-if 与v-show

1. 如果需要频繁切换v-show 较好

2. 当条件不成立时, v-if 的所有子节点不会解析(项目中使用)

1.10 列表渲染

1.10.1 效果

1.10.2 列表显示指令

• 遍历数组: v-for / index

• 遍历对象: v-for / key

1.11 收集表单数据

1.12 过滤器

1.12.1 效果

1.12.2 理解过滤器

1. 功能: 对要显示的数据进行特定格式化后再显示

2. 注意: 并没有改变原本的数据, 是产生新的对应的数据

1.13 内置指令与自定义指令

1.13.1 常用内置指令

• v-text : 更新元素的 textContent

• v-html : 更新元素的 innerHTML

• v-if : 如果为true, 当前标签才会输出到页面

• v-else: 如果为false, 当前标签才会输出到页面

• v-show : 通过控制display 样式来控制显示/隐藏

• v-for : 遍历数组/对象

• v-on : 绑定事件监听, 一般简写为@

• v-bind : 绑定解析表达式, 可以省略v-bind

• v-model : 双向数据绑定

• v-cloak : 防止闪现, 与css 配合: [v-cloak] { display: none }

1.13.2 自定义指令

1. 注册全局指令

Vue.directive('my-directive', function(el, binding){ 
    el.innerHTML = binding.value.toupperCase()
})

2. 注册局部指令

directives : {
    'my-directive' : { 
            bind (el, binding) {
            el.innerHTML = binding.value.toupperCase()
        }
    }
}

使用指令

v-my-directive='xxx'

1.14 Vue 实例生命周期

1.14.1 效果

1.14.2 生命周期流程图

1.14.3 vue 生命周期分析

1. 初始化显示

• beforeCreate()

• created()

• beforeMount()

• mounted()

2. 更新状态: this.xxx = value

• beforeUpdate()

• updated()

3. 销毁vue 实例: vm.$destory()

• beforeDestory()

• destoryed()

1.14.4 常用的生命周期方法

1. mounted(): 发送ajax 请求, 启动定时器等异步任务

2. beforeDestory(): 做收尾工作, 如: 清除定时器

第 2 章：Vue 组件化编程

2.1 模块与组件、模块化与组件化

2.1.1 模块

1. 理解: 向外提供特定功能的 js 程序, 一般就是一个js 文件

2. 为什么: js 文件很多很复杂

3. 作用: 复用js, 简化js 的编写, 提高js 运行效率

2.1.2 组件

1. 理解: 用来实现局部(特定)功能效果的代码集合(html/css/js/image…..)

2. 为什么: 一个界面的功能很复杂

3. 作用: 复用编码, 简化项目编码, 提高运行效率

2.1.3 模块化

当应用中的js 都以模块来编写的, 那这个应用就是一个模块化的应用。

2.1.4 组件化

当应用中的功能都是多组件的方式来编写的, 那这个应用就是一个组件化的应用,

2.2 非单文件组件

1. 模板编写没有提示

2. 没有构建过程, 无法将ES6 转换成ES5

3. 不支持组件的CSS

4. 真正开发中几乎不用

2.3 单文件组件

2.3.1 一个.vue 文件的组成(3 个部分)

1. 模板页面

<template> 
    页面模板
</template>

2. JS 模块对象

<script> export default {
    data() {
        return {

            }
        }, 
    methods: {},
    computed: {}, 
    components: {}
}
</script>

3. 样式

<style> 
    样式定义
</style>

2.3.2 基本使用

1. 引入组件

2. 映射成标签

3. 使用组件标签

第3 章：使用Vue 脚手架

3.1 初始化脚手架

3.1.1 说明

1. Vue 脚手架是Vue 官方提供的标准化开发工具（开发平台）。

2. 最新的版本是4.x。

3. 文档: https://cli.vuejs.org/zh/。

3.1.2 具体步骤

第一步（仅第一次执行）：全局安装@vue/cli。

npm install -g @vue/cli

第二步：切换到你要创建项目的目录，然后使用命令创建项目

vue create xxxx

第三步：启动项目

npm run serve

备注：

1. 如出现下载缓慢请配置npm 淘宝镜像

npm config set registry https://registry.npm.taobao.org

2. Vue 脚手架隐藏了所有webpack 相关的配置，若想查看具体的webpakc 配置，请执行：

vue inspect > output.js

3.1.3 模板项目的结构

├── node_modules

├── public

│ ├── favicon.ico: 页签图标

│ └── index.html: 主页面

├── src

│ ├── assets: 存放静态资源

│ │ └── logo.png

│ │── component: 存放组件

│ │ └── HelloWorld.vue

│ │── App.vue: 汇总所有组件

│ │── main.js: 入口文件

├── .gitignore: git 版本管制忽略的配置

├── babel.config.js: babel 的配置文件

├── package.json: 应用包配置文件

├── README.md: 应用描述文件

├── package-lock.json：包版本控制文件

3.2 ref 与props

3.2.1 ref

作用：用于给节点打标识

读取方式：this.$refs.xxxxxx

3.2.2 props

作用：用于父组件给子组件传递数据

读取方式一: 只指定名称

props: ['name', 'age', 'setName']

读取方式二: 指定名称和类型

props: {
    name: String, 
    age: Number,
    setNmae: Function
}

读取方式三: 指定名称/类型/必要性/默认值

props: {
    name: {type: String, required: true, default:xxx},
}

3.3 混入

Vue 插件是一个包含install 方法的对象

通过install 方法给Vue 或Vue 实例添加方法, 定义全局指令等

3.4 插件