暑期带你不走偏快速学习Vue 思维导图模板

Vue实例

认识Vue

介绍

Vue.js是一套构建用户界面的渐进式框架

渐进式意味着你可以将Vue作为你应用的一部分

Vue采用自底向上增量式开发的设计

Vue.js 是一款 MVVM 框架

特点

数据响应式

解耦视图和数据

可复用的组件

前端路由技术

状态管理

虚拟DOM

安装

CDN引入

下载引入

NPM安装

CLI和NPM结合使用

Vue实例

构造器

new Vue({ option }) 是mvvm中的 viewmodel

实例化时需传入 option (包括数据, 挂载元素, 模板, 方法, 生命周期钩子等选项)

属性与方法

data中的属性可以被实例代理, 并且只有此类属性时响应式的

实例本身的属性和方法都有$前缀用以区分代理属性

实例生命周期

created

实例创建完成后执行的钩子

mounted

编译好HTML挂载到页面执行的事件钩子

update

数据更新之后的钩子

destoryed

实例销毁完成执行的钩子

图示Vue生命周期

分支主题

模板语法

插值指令

Mustache{{}}

支持简单的JS表达式

v-once

该指令表示数据之更新一次

v-html=&quot;&quot;

解析数据中的html渲染到页面

v-text=&quot;&quot;

将数据显示在页面中,跟Mustache比较类似

v-pre

显示原本的Mustache语法

v-cloak

解决插值表达式闪烁的问题

指令

参数

v-bind

绑定属性

v-on

事件监听

v-if, v-else-if, v-else

条件判断

v-show

元素是否显示

v-model

表单数据双向绑定

v-for

循环遍历

修饰符

v-on

.stop

阻止事件冒泡

.prevent

阻止默认事件行为

.once

只触发一次

.{jkeyCode | keyAlias }

特定键触发

v-model

.lazy

失去焦点,或按下回车,数据才会更新

.number

转换为数字类型

.trim

去除两侧空格

缩写

v-bind

:

&lt;div :class=&quot;active&quot;&gt;&lt;/div&gt;

v-on

@

&lt;button @click=&quot;btnClick&quot;&gt;按钮&lt;/button&gt;

过滤器

理解

滤器不改变真正的数据，而只是改变渲染的结果

对文本格式化/处理

使用

全局注册时是filter

局部过滤器是filters

过滤器应该被添加在JS表达式的尾部,由“管道”符指示

计算属性和侦听器

计算属性

主要作用

解决模板中放入过多逻辑

计算属性是基于它们的响应式依赖进行缓存的

计算属性的setter和getter

每个计算属性都包含一个 getter 和 setter

计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter

computed vs methods

methods不管数据发没发生变化都会调用函数

computed只有在依赖数据发生变化时才回调函数

侦听器

数据变化时执行异步或开销较大的操作时

注意: watch 中的属性一定是data 中已经存在的数据

v-bind绑定class与style

绑定class

对象语法

分支主题

数组语法

分支主题

绑定style

对象语法

分支主题

数组语法

分支主题

自动添加前缀

当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀

多重值

从 2.3 + 后起你可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值, 这样写只会渲染数组中最后一个被浏览器支持的值

条件渲染

作用

Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件

v-if ( v-else )

在&lt;template&gt;元素使用v-if

最终的渲染结果将不包含 &lt;template&gt; 元素

v-else 元素需紧跟 v-if 后面

v-else-if (vue2.1.0新增)

使用 key 管理可复用元素

Vue 会尽可能高效地渲染元素, 通常会复用已有元素而不是从头开始渲染

不希望 Vue 出现复用已有的元素, 给对应元素添加唯一值的 key 即可

key表示: 这两个元素是完全独立的，不要复用它们

v-show (简单的切换display属性)

与 v-if 对比

带有 v-show 的元素始终会被渲染并保留在 DOM 中

v-show 只是简单地切换元素的 CSS 属性 display

注意

v-show 不支持 &lt;template&gt; 元素，也不支持 v-else

v-if vs v-show

v-if

当条件不成立不会渲染

切换开销更高, 适合不太可能变化的场景

v-show

无论条件是否成立都会渲染

首次渲染开销较大, 切换开销加较少. 适合频繁切换的场景

v-if 与 v-for 一起使用

处于同一节点时, v-for 优先级更高

列表渲染

v-for

基本语法

分支主题

v-for遍历数组

1.item: 每一项元素 2.index: 下标/索引

v-for遍历对象

1.value: 属性值 2.key: 属性名 3.index: 索引

v-for和v-if

避免 v-if 和 v-for 用在一起

v-for比 v-if 具有更高的优先级

key

作用

key的作用主要是为了高效的更新虚拟DOM

建议: 使用唯一值作为key, 不建议使用index索引

数组更新检测

变异方法 (会改变原数组)

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

非变异方法 (不会改变原数组)

filter()

concat()

slice ()

这些不会改变原始数组，但总是返回一个新数组

注意实现

由于 JavaScript 的限制，Vue 不能检测以下变动的数组：

1.利用索引设置一个项

2.修改数组长度时

事件监听

绑定事件监听

分支主题

事件监听方法/参数

当 methods 中定义方法, 以供@click调用时,需要注意参数问题

情况一: 如果该方法不需要额外参数, 方法后 () 可以省略

没有传入参数, 形参默认值会将原生事件 event 参数传递

情况二: 传入多个参数, 同时也需要 event 事件参数时, 可以通过 $event 传入事件

事件修饰符

.stop

阻止冒泡

.prevent

最默认事件行为

.{jkeyCode \| keyAlias }

从特定键触发

.opce

事件之触发只一次

2.3.0新增

.passive

滚动事件的默认行为 (即滚动行为) 将会立即触发

表单输入绑定

基本概念及用法

基本概念

Vue中使用 v-model 指令来实现表单元素和数据的双向绑定

数据与模板是相互影响的,一方发生变化,另一方立即做出更新

基本语法

分支主题

与 v-bind 区别

v-bind: 只能实现数据的单向绑定, 从 M 自动绑定到 v

v-model: 只有 v-model 才能实现双向数据绑定

注意

v-model只能运用在表单元素中,或者用于自定义组件

v-model原理

v-model其实是一个语法糖

v-bind绑定一个value属性

v-on指令绑定当前元素的input事件

v-model 表单绑定的value

单选按钮

绑定的的值是: value

单个复选框

v-model 即为: 布尔值

多个复选框

绑定的值是: 数组

单个选择框

绑定的的值是: value

多个单选框

绑定的值是: 数组

修饰符

.lazy

当表单 &quot;失去焦点&quot; 或按下 &quot;回车&quot;, data中数据才会更新

.number

输入的内容转换为number数据类型

.trim

过滤用户输入的首尾空白字符

值绑定

动态的给表单中的 &quot;value&quot; 赋值而已

组件

组件基础

认识组件化

什么是组件化?

如果我们将一个页面所有处理逻辑放在一起, 处理起来会非常复杂, 不利于后续管理及扩展

但是我们可以将一个页面拆解成一个个小的功能块, 每个模块完成自己部分独立的功能, 那么整体的管理和维护的非常容易了

Vue组件化思想

组件可以扩展 HTML 元素，封装可重用的代码

组件系统让我们可以用独立可复用的小组件来构建大型应用

几乎任意类型的应用的界面都可以抽象为一个组件树

注册组件

全局注册

1.Vue.component(&quot;tagName&quot;, options)

2.使用组件 &lt;tagName/&gt;

局部组件注册

在Vue实例options中定义

分支主题

模板的分离写法

将template中的HTML分离出来

1.使用 script

2.使用 template

组件中数据的存放

组件中数据的访问

组件是一个单独功能模块的封装

这个模块有属于自己的HTML模板, 也应该有自己的数据data

组件中的可以访问顶层Vue实例中的数据吗?

不能访问Vue实例中的数据

组件数据的存放

组件的数据放在组件对象的data属性当中

只是这个data属性必须是一个函数

而且这个函数要返回一个对象

组件中data为什么必须是函数?

如果在组件中data是一个对象会发生什么?

多个组件会共用相同的数据,数据发生改变后会相互影响

如果在组件中data是一个函数

组件之间的数据都是相互独立存在的,数据改变后,不会相互影响

父子组件的通信

父组件向子组件传值

props

在子组件中,使用选项props用于接收来自父组件的数据

1.在子组件定义 porps 属性, 用来接收父组件传递的数据

2.在使用子组件时, 使用v-bind将父组件的值传递给子组件props 定义的属性

props数据验证

type: 检测是否是给定的类型, 否则抛出警告⚠

default:any: 为该porps之当一个默认值

required: Boolean 定义该porps是否是必填项

validator: Function 自定义验证会将porps值作为唯一值参数代入

子组件向父组件传值

自定义事件

子组件将数据传递到父组件使用: $emit(eventName, [...args])

使用v-on不仅可以监听DOM事件, 也可以用于组件间的自定义事件

自定义事件流程

分支主题

父子组件的访问

父访问子: $children

父访问子: $refs

子访父: $parent

插槽slot

基本理解

组件的插槽也是为了让我们封装的组件更加具有扩展性。

slot通俗理解就是&quot;占坑&quot;, 当使用该组件标签时候, 组件标签里面的内容就会自动填坑

如何封装这类组件: 抽取共性,保留不同。

slot 基本使用

在子组件中, 定义一个&lt;slot&gt;就可以为组件开启一个插槽

该插槽插入什么内容取决于父组件如何使用

插槽默认值

有时候我们需要给插槽设置一个具体的默认内容

它只会在没有提供内容的时候就会被渲染

具名插槽 slot

概念

当子组件有多个插槽时,想替换掉指定的插槽怎么办?

slot元素有一个特殊的attribute: name

使用

1.在向具名插槽提供内容时, 我们在template元素使用v-slot指令

2.并以v-slot的参数形式提供其名称: v-slot:header

注意

一个不带name的&lt;slot&gt;出口会带有隐含(默认)的名字&quot;default&quot;

作用域插槽

概念

在父组件中展示子组件的内容, 对子组件内容展示不满意

在其插槽中获取子组件展示的数据, 进行重新修改内容重新展示

总结

有时让插槽内容能够访问子组件中才有的数据是很有用的

父组件替换插槽的标签，但是内容由子组件来提供