![](https://img-blog.csdnimg.cn/20210818225228564.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue3学习笔记
文章平均质量分 59
Vue3中方法和属性的使用 以及一些编码小技巧 希望通过这些文章能够对正在学习Vue的小伙伴有所帮助
李公子丶
学而时习之,不亦说乎!
展开
-
vee-validate表单校验的使用方法
VeeValidate 是 Vue.js 表单验证框架。VeeValidatehttps://vee-validate.logaretm.com/第一步:安装npm i vee-validate@4.0.3第二步:导入// 导入组件import { Form, Field } from 'vee-validate'export default { name: 'LoginForm', components: { Form, Field }}第三步:使用 .原创 2022-01-26 22:09:31 · 2648 阅读 · 0 评论 -
Vue指定组件内容的三种方式(el, template ,render)
指定组件显示的内容:new Vue({选项})el 选项,通过一个选择器找到容器,容器内容就是组件内容提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器,也可以是一个 HTMLElement 实例。在实例挂载之后,元素可以用 vm.$el 访问。如果在实例化时存在这个选项,实例将立即进入编译过程,否则,需要显式调用 vm.$mount() 手动开启编译。项目中会有index.html 文件,里面会存在一个div<div id="ap原创 2022-01-19 17:56:30 · 1900 阅读 · 0 评论 -
Vue3 通过自定义指令实现图片懒加载
介绍一个webAPI:IntersectionObserverIntersectionObserver API,可以自动"观察"元素是否可见,Chrome 51+ 已经支持。由于可见(visible)的本质是,目标元素与视口产生一个交叉区,所以这个 API 叫做"交叉观察器"。检测某个元素是否进入了"视口"(viewport),即用户能不能看到它。// 创建观察对象实例const observer = new IntersectionObserver(callback[, options].原创 2022-01-14 18:24:03 · 273 阅读 · 0 评论 -
Vue3配置注册插件
什么是插件扩展vue原有的功能:全局组件,自定义指令,挂载原型方法,注意:没有全局过滤器。这就是插件插件的语法要素vue2.0插件写法要素:导出一个对象,有install函数,默认传入了Vue构造函数,Vue基础之上扩展vue3.0插件写法要素:导出一个对象,有install函数,默认传入了app应用实例,app基础之上扩展// 导入组件import Skeleton from './skeleton.vue'// 向外暴露一个对象 需要有 install 方法export de原创 2022-01-11 21:06:27 · 994 阅读 · 0 评论 -
vue3中通过ref属性获取DOM
获取单个ref属性绑定的dom元素vue3需要借助生命周期方法,在setup执行时,template中的元素还没挂载到页面上,所以必须在mounted之后才能获取到元素。<template> <h1 ref="box">Ref属性获取dom</h1></template><script>import { ref, onMounted } from 'vue'export default { name: 'Ref',原创 2022-01-07 15:22:12 · 6135 阅读 · 1 评论 -
vue3中路由的配置
创建路由模块在项目中创建router.js 路由模块,在其中按照如下4个步骤创建并得到路由的实例对象:1. 从vue-router中按需导入两个方法2. 导入需要使用路由控制的组件3. 创建路由实例对象4. 向外共享路由实例对象5. 在mian.js中导入并挂载路由模块// 1. 从vue-router 中按需导入两个方法// 2. createRouter 方法用于创建路由的实例对象// 3. createHashHistory 用于指定路由的工作模式(hash 模式)原创 2022-01-05 20:33:48 · 2311 阅读 · 0 评论 -
Vue3中的一些改变
全局API的转移 Vue 2.x 有许多全局 API 和配置。 例如:注册全局组件、注册全局指令等。 //注册全局组件Vue.component('MyButton', { data: () => ({ count: 0 }), template: '<button @click="count++">Clicked {{ count }} times.</button>'})//注册全局指令Vue.directive('fo原创 2021-08-22 18:17:32 · 321 阅读 · 0 评论 -
Vue3中新的组件
Fragment在Vue2中: 组件必须有一个根标签在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中好处: 减少标签层级, 减小内存占用<template> <h3>我是App组件</h3> <h3>我是App组件</h3> <h3>我是App组件</h3></template> ...原创 2021-08-22 18:14:33 · 557 阅读 · 0 评论 -
Vue3中响应式数据的判断
isRef: 检查一个值是否为一个 ref 对象isReactive: 检查一个对象是否是由 reactive 创建的响应式代理isReadonly: 检查一个对象是否是由 readonly 创建的只读代理isProxy: 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理import {ref, reactive,toRefs,readonly,isRef,isReactive,isReadonly,isProxy } from 'vue'export de原创 2021-08-22 16:05:31 · 935 阅读 · 0 评论 -
Vue3中组件数据传递之provide 与 inject
作用:实现祖与后代组件间通信套路:父组件有一个 provide 选项来提供数据,后代组件有一个 inject 选项来开始使用这些数据用法: 用法很简我们需要引入方法 在祖组件中调用provide方法来提供数据 在子组件中调用inject方法来接收数据祖组件中:setup(){ ...... let car = reactive({name:'奔驰',price:'40万'}) provide('car'...原创 2021-08-22 15:32:23 · 1223 阅读 · 2 评论 -
Vue3中customRef的用法
作用:创建一个自定义的 ref,并对其依赖项跟踪和更新触发进行显式控制。<template> <div> <input type="text" v-model="keyWorld"> <h1>值是:{{keyWorld}}</h1> </div></template><script>import { customRef } from "vue";export default原创 2021-08-22 14:43:56 · 2957 阅读 · 0 评论 -
Vue3中toRaw 与 markRaw的使用
toRaw: 作用:将一个由reactive生成的响应式对象转为普通对象。 使用场景:用于读取响应式对象对应的普通对象,对这个普通对象的所有操作,不会引起页面更新。 markRaw: 作用:标记一个对象,使其永远不会再成为响应式对象。 应用场景: 有些值不应被设置为响应式的,例如复杂的第三方类库等。 当渲染具有不可变数据源的大列表时,跳过响应式转换可以提高性能。 代码演示大气...原创 2021-08-21 17:51:28 · 3288 阅读 · 0 评论 -
Vue3中readonly 与 shallowReadonly的使用方法
readonly:让一个响应式数据变为只读的(深只读)。shallowReadonly:让一个响应式数据变为只读的(浅只读)。应用场景: 不希望数据被修改时。代码演示readonly 我们在代码中定义了一个响应式对象person 然后使用readonly(person )方法传入person 返回一个只读的对象 用p接收并返回<template> <div> <h1...原创 2021-08-21 16:32:05 · 1451 阅读 · 0 评论 -
Vue3中shallowReactive 与 shallowRef 的用法
shallowReactive 与 shallowRef shallowReactive:只处理对象最外层属性的响应式(浅响应式)。 shallowRef:只处理基本数据类型的响应式, 不进行对象的响应式处理。 什么时候使用? 如果有一个对象数据,结构比较深, 但变化时只是外层属性变化 ===> shallowReactive。 如果有一个对象数据,后续功能不会修改该对象中的属性,而是生新的对象来替换 ===> shallowRef。原创 2021-08-21 15:54:44 · 24062 阅读 · 0 评论 -
Vue3中toRef和toRefs的使用方法
了解toRef:创建一个 ref 对象,其value值指向另一个对象中的某个属性。语法:const name = toRef(person,'name')应用: 要将响应式对象中的某个属性单独提供给外部使用时。扩展:toRefs 与toRef功能一致,但可以批量创建多个 ref 对象,语法:toRefs(person)代码演示 我们在组件中定义了一个人的信息 并将定义的信息返回 在页面中使用<...原创 2021-08-20 22:45:04 · 2771 阅读 · 0 评论 -
一招学会自定义hook函数---让你的代码更精简
什么是hook?本质是一个函数,把setup函数中使用的Composition API进行了封装。类似于vue2.x中的mixin。自定义hook一般放在src下面hooks文件夹里面 文件名使用use开头方法自定义 Hook 是一个函数,函数内部可以调用其他的 Hook。自定义hook的优势:复用代码, 让setup中的逻辑更清楚易懂。自定义hook相对于普通js复用逻辑的抽离...原创 2021-08-20 20:41:14 · 1704 阅读 · 3 评论 -
一起来聊聊Vue3的这“一生(生命周期)”
什么是生命周期:vue中每个组件都是独立的,每个组件都有一个属于它的生命周期,从一个组件创建、数据初始化、挂载、更新、销毁,这就是一个组件所谓的生命周期。vue2和vue3中生命周期的对比:对Vue2生命周期不熟悉的同学可以看我的另一篇文章Vue2的生命周期Vue3.0中可以继续使用Vue2.x中的生命周期钩子,但有有两个被更名: beforeDestroy改名为 beforeUnmount destroyed改名为 unmounted ...原创 2021-08-20 17:38:05 · 1762 阅读 · 2 评论 -
Vue3中的计算属性与监视
computed函数 与Vue2.x中computed配置功能一致 写法:有两种形式 简写形式 和完整写法 不管是那种写法我们都需要在组件中先引入computed方法在使用 引入computed 方法import { computed } from 'vue' 下面我们通过代码来具体演示它的用法 我们在setup方法中声明了一个data对象, 对象中我们提供了一个人的姓(firstName) 和 名(lastName)...原创 2021-08-19 20:59:44 · 836 阅读 · 1 评论 -
Vue3中通过ref函数和reactive函数实现响应式数据
ref函数作用: 定义一个响应式的数据语法: const xxx = ref(initValue) 创建一个包含响应式数据的引用对象(reference对象,简称ref对象)。 JS中操作数据: xxx.value 模板中读取数据: 不需要.value,直接:<div>{{xxx}}</div> <template> <div> <p>姓名:{{name}}</p> &.原创 2021-08-17 16:37:36 · 2538 阅读 · 0 评论 -
Vue3.0教你如何创建工程
Vue3简介 2020年9月18日,Vue.js发布3.0版本,代号:One Piece(海贼王) 耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者 github上的tags地址:https://github.com/vuejs/vue-next/releases/tag/v3.0.0 Vue3带来了什么: 1.性能的提升 打包大小减少41% 初次渲染快55%, 更新渲染快133% 内存减少54% .......原创 2021-08-16 14:23:43 · 257 阅读 · 0 评论 -
教你如何安装Vue3.0的开发者工具,在线安装、离线安装(内含扩展包)
各位小伙伴大家好本篇文章教你如何安装vue3.0的开发者工具为什么要安装vue3的开发者工具?vue2.0的开发者工具中是不支持vue3.0的代码的 所以我们需要安装一个vue3专用的开发者工具 让我们在vue3的项目中更好更方便的去调试 有两种安装方式:在线安装、离线安装在线安装打开chrome网上应用商店搜索一下vue 选择添加至Chrome 下载完成之后就安装成功了离线安装 有很多小伙伴因为一些原因打不开Chrome应用商店,...原创 2021-08-16 16:02:31 · 9368 阅读 · 15 评论 -
带你分析Vue3响应式和Vue2响应式的区别
vue2.x的响应式 实现原理: 对象类型:通过Object.defineProperty()对属性的读取、修改进行拦截(数据劫持)。 数组类型:通过重写更新数组的一系列方法来实现拦截。(对数组的变更方法进行了包裹) Object.defineProperty(data, 'count', { get () {}, set () {}}) 具体可以看我的另一篇文章Vue2中的数据代理 存在问题: 新增属性、...原创 2021-08-18 01:50:51 · 365 阅读 · 0 评论 -
从setup开始拉开Vue3的序幕
理解setup Vue3.0中一个新的配置项,值为一个函数。 setup是所有Composition API(组合API)“ 表演的舞台 ”。 组件中所用到的:数据、方法等等,均要配置在setup中。 setup函数的两种返回值: 若返回一个对象,则对象中的属性、方法, 在模板中均可以直接使用。(重点关注!) 若返回一个渲染函数:则可以自定义渲染内容。(了解) <template> <div> <原创 2021-08-16 21:33:46 · 277 阅读 · 2 评论