暑期带你不走偏快速学习Vue
2021-07-29 11:57:20 3 举报AI智能生成
前端学期不可少的技能，暑期带你不走偏快速学习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=""
解析数据中的html渲染到页面
v-text=""
将数据显示在页面中,跟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
:
<div :class="active"></div>
v-on
@
<button @click="btnClick">按钮</button>
过滤器
理解
滤器不改变真正的数据，而只是改变渲染的结果
对文本格式化/处理
使用
全局注册时是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 )
在<template>元素使用v-if
最终的渲染结果将不包含 <template> 元素
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 不支持 <template> 元素，也不支持 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
当表单 "失去焦点" 或 按下 "回车", data中数据才会更新
.number
输入的内容转换为number数据类型
.trim
过滤用户输入的首尾空白字符
值绑定
动态的给 表单中的 "value" 赋值而已
组件
组件基础
认识组件化
什么是组件化?
如果我们将一个页面所有处理逻辑放在一起, 处理起来会非常复杂, 不利于后续管理及扩展
但是我们可以将一个页面拆解成一个个小的功能块, 每个模块完成自己部分独立的功能, 那么整体的管理和维护的非常容易了
Vue组件化思想
组件可以扩展 HTML 元素，封装可重用的代码
组件系统让我们可以用独立可复用的小组件来构建大型应用
几乎任意类型的应用的界面都可以抽象为一个组件树
注册组件
全局注册
1.Vue.component("tagName", options)
2.使用组件 <tagName/>
局部组件注册
在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通俗理解就是"占坑", 当使用该组件标签时候, 组件标签里面的内容就会自动填坑
如何封装这类组件: 抽取共性,保留不同。
slot 基本使用
在子组件中, 定义一个<slot>就可以为组件开启一个插槽
该插槽插入什么内容取决于父组件如何使用
插槽默认值
有时候我们需要给插槽设置一个具体的默认内容
它只会在没有提供内容的时候就会被渲染
具名插槽 slot
概念
当子组件有多个插槽时,想替换掉指定的插槽怎么办?
slot元素有一个特殊的attribute: name
使用
1.在向具名插槽提供内容时, 我们在template元素使用v-slot指令
2.并以v-slot的参数形式提供其名称: v-slot:header
注意
一个不带name的<slot>出口会带有隐含(默认)的名字"default"
作用域插槽
概念
在父组件中展示子组件的内容, 对子组件内容展示不满意
在其插槽中获取子组件展示的数据, 进行重新修改内容重新展示
总结
有时让插槽内容能够访问子组件中才有的数据是很有用的
父组件替换插槽的标签，但是内容由子组件来提供
0 条评论
下一页
