vue
2022-08-30 16:39:43 0 举报AI智能生成
vue知识点总结
作者其他创作
大纲/内容
指令的缺点：会覆盖元素内部原有的内容！
v-text
插值表达式：在实际开发中用的最多，只是内容的占位符，不会覆盖原有的内容！(插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中)
{{ }}
可以把带有标签的字符串，渲染成真正的 HTML 内容
v-html
内容渲染指令
v-bind(缩写 :property)
属性绑定指令
$event 是 vue 提供的特殊变量，用来表示原生的事件参数对象 event。$event 可以解决事件参数对象 event 被覆盖的问题
$event
阻止默认行为（例如：阻止 a 连接的跳转、阻止表单的提交等）
.prevent
阻止事件冒泡
.stop
以捕获模式触发当前的事件处理函数
.capture
绑定的事件只触发1次
.once
只有在 event.target 是当前元素自身时触发事件处理函数
.self
事件修饰符
v-on（简写：@）
事件绑定指令
用来辅助开发者在不操作 DOM 的前提下，快速获取表单的数据
<input v-model.number=\"age\" />
自动将用户的输入值转为数值类型
.number
<input v-model.trim=\"msg\" />
自动过滤用户输入的首尾空白字符
.trim
<input v-model.lazy=\"msg\" />
在“change”时而非“input”时更新
.lazy
指令修饰符
v-model
双向绑定指令
v-if 指令会动态地创建或移除 DOM 元素，从而控制元素在页面上的显示与隐藏；
v-if
v-show 指令会动态为元素添加或移除 style=\"display: none;\" 样式，从而控制元素的显示与隐藏；
v-show
v-else
v-else-if
条件渲染指令
用来辅助开发者基于一个数组来循环渲染一个列表结构。v-for 指令需要使用 item in items 形式的特殊语法
当列表的数据变化时，默认情况下，vue 会尽可能的复用已存在的 DOM 元素，从而提升渲染的性能。但这种默认的性能优化策略，会导致有状态的列表无法被正确更新。为了给 vue 一个提示，以便它能跟踪每个节点的身份，从而在保证有状态的列表被正确更新的前提下，提升渲染的性能。此时，需要为每项提供一个唯一的 key 属性
key 的值只能是字符串或数字类型
key 的值必须具有唯一性（即：key 的值不能重复）
建议把数据项 id 属性的值作为 key 的值（因为 id 属性的值具有唯一性）
使用 index 的值当作 key 的值没有任何意义（因为 index 的值不具有唯一性）
建议使用 v-for 指令时一定要指定 key 的值（既提升性能、又防止列表状态紊乱
注意事项
使用 key 维护列表的状态
v-for
列表渲染指令
指令
插值表达式
v-bind 属性绑定
过滤器（Filters）是 vue 为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方
在 filters 节点下定义的过滤器，称为“私有过滤器”，因为它只能在当前 vm 实例所控制的 el 区域内使用。
私有过滤器
全局过滤器
过滤器
watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作
默认情况下，组件在初次加载完毕后不会调用 watch 侦听器。如果想让 watch 侦听器立即被调用，则需要使用 immediate 选项。
immediate 选项
如果 watch 侦听的是一个对象，如果对象中的属性值发生了变化，则无法被监听到。此时需要使用 deep 选项
deep
如果只想监听对象中单个属性的变化，则可以按照如下的方式定义 watch 侦听器
watch擅长处理的场景：一个数据影响多个数据
watch 侦听器
计算属性指的是通过一系列运算之后，最终得到一个属性值
虽然计算属性在声明的时候被定义为方法，但是计算属性的本质是一个属性
计算属性会缓存计算的结果，只有计算属性依赖的数据变化时，才会重新进行运算
特点
computed擅长处理的场景：一个数据受多个数据影响(如：商品总价计算)，同时计算属性本质上就是一个属性，不需要再 data 中存在，且 computed 数据会被缓存
computed
组件的模板结构
每个组件中必须包含 template 模板结构，而 script 行为和 style 样式是可选的组成部分
template 中只能包含唯一的根节点
注意
template
组件的 JavaScript 行为
script
组件的样式
style
PS:每个组件中必须包含 template 模板结构，而 script 行为和 style 样式是可选的组成部分
全局组件注册
vue 规定：组件中封装的自定义属性是只读的，程序员不能直接修改 props 的值。要想修改 props 的值，可以把 props 的值转存到 data 中，因为 data 中的数据都是可读可写的！
props
父组件向子组件共享数据使用自定义事件
子组件向父组件共享数据使用自定义事件
兄弟组件之间的数据共享
组件之间数据共享
Vue 组件
该阶段无法访问 data数据源和 props 中的数据，也无法访问 methods 中的方法
beforeCreate
data、props、methods 都已经创建好，处于可用状态，但模板结构尚未创建，在这个阶段发起 ajax 请求页面数据，但不能操作 DOM
created
准备将内存中编译好的 HTML 结构渲染到浏览器上，此时浏览器还并没有 DOM 结构
beforeMount
已经把内存中的 DOM 结构渲染到了浏览器中，此时 DOM结构已经存在，如果要操作 DOM，最早只能在这个阶段执行
mounted
此阶段所有方法只执行一次
创建阶段
准备根据变化后最新的数据重新渲染 模板
beforeUpdate
已经更新模板数据
updated
此阶段可执行 1次或多次
运行阶段
此时将要销毁组件
beforeDestroy
已经销毁组件
destoryed
此阶段只能执行一次
销毁阶段
父组件 beforecreate
父组件 created
父组件 beforeMount
子组件 beforecreate
子组件 created
子组件 beforeMount
父组件 mounted
子组件 mounted
父组件 beforeDestroy
子组件 beforeDestroy
子组件 destroyed
父组件 destroyed
父子组件生命周期
生命周期
ref 用来辅助开发者在不依赖于 jQuery 的情况下，获取 DOM 元素或组件的引用。每个 vue 的组件实例上，都包含一个 $refs 对象，里面存储着对应的 DOM 元素或组件的引用。默认情况下，组件的 $refs 指向一个空对象。
概念
使用 ref 引用 DOM 元素
使用 ref 引用组件实例
组件的 $nextTick(cb) 方法，会把 cb 回调推迟到下一个 DOM 更新周期之后执行。通俗的理解是：等组件的DOM 更新完成之后，再执行 cb 回调函数。从而能保证 cb 回调函数可以操作到最新的 DOM 元素。
this.$nextTick(cb) 方法
ref 引用
动态组件指的是动态切换组件的显示与隐藏。
如何实现动态组件渲染
include 属性用来指定：只有名称匹配的组件会被缓存。多个组件名之间使用英文的逗号分隔
include 属性
当组件被缓存时，会自动触发组件的 deactivated 生命周期函数。
当组件被激活时，会自动触发组件的 activated 生命周期函数。
keep-alive 对应的生命周期函数
使用 <keep-alive> 保持状态
动态组件
插槽（Slot）是 vue 为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。
插槽
在每个 vue 组件中，可以在 directives 节点下声明私有自定义指令。
eg: v-color
在使用自定义指令时，需要加上 v- 前缀
在 template 结构中使用自定义指令时，可以通过等号（=）的方式，为当前指令动态绑定参数值
为自定义指令动态绑定参数值
在声明自定义指令时，可以通过形参中的第二个参数，来接收指令的参数值
通过 binding 获取指令的参数值
bind 函数只调用 1 次：当指令第一次绑定到元素时调用，当 DOM 更新时 bind 函数不会被触发。 update 函数会在每次 DOM 更新时被调用
update 函数
如果 insert 和update 函数中的逻辑完全相同，则对象格式的自定义指令可以简写成函数格式
私有自定义指令
全局共享的自定义指令需要通过“Vue.directive()”进行声明，
全局自定义指令
自定义指令
Hash 地址与组件之间的对应关系
什么是路由
用户点击了页面上的路由链接
导致了 URL 地址栏中的 Hash 值发生了变化
前端路由监听了到 Hash 地址的变化
前端路由把当前 Hash 地址对应的组件渲染都浏览器中
前端路由的工作方式
vue-router 是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目中组件的切换。
npm i vue-router@xxx
在项目中安装 vue-router
在 src 源代码目录下，新建 router/index.js 路由模块
在 src/main.js 入口文件中，导入并挂载路由模块。
在 src/App.vue 组件中，使用 vue-router 提供的 <router-link> 和 <router-view> 声明路由链接和占位符
声明路由链接和占位符
在 src/router/index.js 路由模块中，通过 routes 数组声明路由的匹配规则
声明路由的匹配规则
vue-router 的基本用法
路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面。通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向
路由重定向
声明子路由链接和子路由占位符
通过 children 属性声明子路由规则
嵌套路由
动态路由指的是：把 Hash 地址中可变的部分定义为参数项，从而提高路由规则的复用性。在 vue-router 中使用英文的冒号（:）来定义路由的参数项。
动态路由匹配
在动态路由渲染出来的组件中，可以使用 this.$route.params 对象访问到动态匹配的参数值，所谓路径参数，即 /param
$route.params 获取路径参数对象
所谓查询参数对象，即路径 ? 后面的键值对
$route.query 获取查询参数对象
为了简化路由参数的获取形式，vue-router 允许在路由规则中开启 props 传参。
使用 props 接收路由参数
点击链接实现导航
声明式导航
普通网页中调用 location.href 跳转到新页面的方式
跳转到指定 hash 地址，并增加一条历史记录
this.$router.push('hash 地址')
跳转到指定的 hash 地址，并替换掉当前的历史记录
this.$router.replace('hash 地址')
实现导航历史前进(n>0)、后退(n<0)
在历史记录中，后退到上一个页面
$router.back()
在历史记录中，前进到下一个页面
$router.forward()
$router.go 的简化用法
this.$router.go(数值 n)
原因
1、是给push函数，传入相应的成功的回调与失败的回调
2、重写 push
解决方案
编程式导航
声明式导航 & 编程式导航
导航守卫可以控制路由的访问权限
每次发生路由的导航跳转时，都会触发全局前置守卫。因此，在全局前置守卫中，程序员可以对每个路由进行访问权限的控制
全局前置守卫的回调函数中接收 3 个形参
直接放行：next()
强制其跳转到登录页面：next('/login')
不允许跳转到后台主页：next(false)
next 函数的 3 种调用方式
全局前置守卫
导航守卫
vue-router
路由
vue
职业：幼儿园
0 条评论
下一页
