vue3.0知识
关注
分享
扫一扫
文章平均质量分 51
vue3.0的基础知识
viceen
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
route和router路由的写法——currentRoute、useRouter、useRoute、getCurrentInstance-proxy获取组件实例的用法
【代码】route和router路由的写法——currentRoute、useRouter、useRoute、getCurrentInstance-proxy获取组件实例的用法。原创 2024-05-15 16:41:18 · 844 阅读 · 0 评论 -
vue3中，form表单校验之特殊字符校验、手机号、身份证号、百分制数字 & route和router的写法 & setup的两种用法 & rules中校验之blur和change
【代码】vue3中，form表单校验之特殊字符校验、手机号、身份证号、百分制数字 & route和router的写法 & setup的两种用法 & rules中校验之blur和change。原创 2023-08-28 20:04:35 · 4525 阅读 · 0 评论 -
vue3中，校验方法之身份证号脱敏、校验数字长度、特殊字符校验
【代码】vue3中，校验方法之身份证号脱敏、校验数字长度、特殊字符校验。原创 2023-08-28 20:02:52 · 1278 阅读 · 0 评论 -
vue3中，方法之对象深拷贝、判断对象的数据类型
【代码】vue3中，方法之对象深拷贝、判断对象的数据类型。原创 2023-08-28 20:02:12 · 1641 阅读 · 0 评论 -
vue3中，父子组件props传函数写法-传动态接口 & 特殊字符校验 & 封装公共input组件
【代码】vue3中，父子组件props传函数写法-传动态接口 & 特殊字符校验 & 封装公共input组件。原创 2023-08-27 16:33:56 · 2919 阅读 · 0 评论 -
vue3中，全局自定义指令——DirectiveBinding & v-throttle节流-保存和提交按钮时间间隔内点击多次只执行一次
el-button v-throttle = " 3000 " type = " primary " @click = " save " > 保存 < el-button v-throttle = " 3000 " type = " primary " @click = " save " > 保存原创 2023-08-27 16:17:21 · 1528 阅读 · 0 评论 -
vue3项目初始化配置流程(含注释)
然后由 Babel 把 ECMAScript 转换为低版本 JavaScript，例如 ECMAScript 5，以及自动检测 polyfill、转换 JSX 等功能。意思是你不能科学上网，建议你使用过淘宝源，这时候需要选择Y，也就是使用淘宝源进行创建。TypeScript 本身就有编译功能，默认会把 JavaScript 代码转换为 ECMAScript 3 版本兼容的代码。当选择以后，TypeScript 本身只会把代码转为 ESNext，也就是最新版的 ECMAScript 规范。原创 2023-08-27 16:26:08 · 1340 阅读 · 0 评论 -
vue3项目初始化
vue3项目初始化1、在终端输入npm install -g @vue/cli2、创建一个文件夹vueDemo，打开所在终端vue create vue3-demo3、在生成的vue3-demo文件中，打开终端，启动项目npm run serve4、打开项目localhost:8080显示效果：ost:8080显示效果：...原创 2022-03-03 20:42:35 · 1746 阅读 · 0 评论 -
vue3+ts中，使用lodash工具中cloneDeep方法实现深拷贝 & 数组-深拷贝、去重、提取相同元素、切分、去除假值、查找、过滤、key的值数组、最值
vue3+ts中，使用lodash工具中cloneDeep方法实现深拷贝 & 数组-深拷贝、去重、提取相同元素、切分、去除假值、查找、过滤、key的值数组、最值lodashjs官网（js工具库）——https://www.lodashjs.com/underscorejs官网（js工具库）——https://underscorejs.net/Lodash 和 Underscore 是非常优秀的当代JavaScript的工具集合框架。一开始Lodash只是Underscore.js的一个for原创 2022-03-02 15:49:56 · 8600 阅读 · 1 评论 -
区别——数据更新-Vue2中this.nextTick和 & dom更新—— vue2中的this.$nextTick 和 vue3中nextTick
区别——数据更新-Vue2中this.nextTick和 & dom更新—— vue2中的this.$nextTick 和 vue3中nextTickthis.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。1、官网释义1.1、nextTick-数据更新vue3.0中，链接-https://v3.cn.vuejs.org/原创 2021-12-05 01:57:21 · 835 阅读 · 0 评论 -
单页面——vue3中computed计算属性和watch监听的写法
单页面——vue3中computed计算属性和watch监听的写法效果实例<template><div class="container"> <p>{{count}}</p> <p>{{double}}</p> <p>{{num}}</p> <button class="btn btn-primary" @click="add" type="subm原创 2021-12-05 01:51:14 · 453 阅读 · 0 评论 -
vue3封装时间计算-日期倒计时组件——还有XX天 & 第XX天
vue3封装时间计算-日期倒计时组件——还有XX天 & 第XX天 & 年月日时分秒星期几方法的封装 & setup语法糖完整用法之reactive, ref, onMounted,computed效果1-还有几天2-第几天需求依照服务端返回的日期与当前日期进行对比1、返回日期大于当前日期为 “还有XX天”2、返回日期小于当前日期为 “第XX天”代码1、倒计时组件封装1.1、时间原则计算组件src/components/header/countDo原创 2021-12-05 01:40:39 · 3574 阅读 · 0 评论 -
vue3封装公共组件——模块标题-包括点击事件、背景图片、插槽、下方内容区
封装公共组件——模块标题-包括点击事件、背景图片、插槽、下方内容区1、效果2、封装的代码src/components/header/titleHeader.vue<script lang="ts" setup>import icon from '@/assets/yfdd-bs/right/title/titleyuansu.png'const props = defineProps({ src: { type: String, required: true,原创 2021-12-05 01:37:50 · 1880 阅读 · 0 评论 -
vue3.0单页面
vue3.0单页面index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-sc原创 2021-09-29 10:40:35 · 913 阅读 · 0 评论 -
vue3中，ref、reactive、toRef、toRefs的区别
vue3中，ref、reactive、toRef、toRefs的区别相对于Vue2来说，Vue3最大的突破就是 Composition API 。与现有的 Option API 截然不同。他的好处可以总结为两点更集中的逻辑关注点更方便的函数逻辑复用机制1、ref、reactive 可触发页面改变区别ref可用于任何类型的数据创建响应式，reactive只用于创建引用类型数据的响应式。注意ref对引用类型变量创建响应式，其根本是当你给ref传入引用类型，则调用reactive方法为其创建原创 2021-09-28 16:10:44 · 2807 阅读 · 2 评论 -
vue3.0页面模板-watch-事件监听——vue2.0-深度监听 & vue3.0中-只能有一个watch
vue3.0页面模板-watch-事件监听——vue2.0-深度监听 & vue3.0中-只能有一个watchwatch的作用可以监控一个值的变换，并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态。vue2.0之深度监听 data:{ a:1, b:{ c:1 } }, watch:{ a(val, oldVal){//普通的watch监听 console.log("a: "+val,原创 2021-09-28 10:46:35 · 1021 阅读 · 0 评论 -
vue的跳转方式——window.open & router-link标签 & this.$router.push跳转 & this.$router.replace跳转 & this.$route
vue的跳转方式——window.open & router-link标签 & this.KaTeX parse error: Expected 'EOF', got '&' at position 15: router.push跳转 &̲ this.router.replace跳转 & this.$route1、普通跳转（跳转的是路由）const {href} = this.$router.resolve({ name: "newDate",//这里原创 2021-09-27 10:28:31 · 5694 阅读 · 0 评论 -
Vue3.0之使用context和父子组件传值
Vue3.0之使用context和父子组件传值在 Vue3.0 中，setup 中可以有两个参数 第一个参数就是 props 第二个参数就是 contextcontext 解释context.parent === this.parentcontext.root===thiscontext.emit===this.parentcontext.root === thiscontext.emit === this.parentcontext.root===thiscontext.emit===this原创 2021-09-24 19:51:35 · 3230 阅读 · 0 评论 -
Vue3 getters打印结果是Proxy对象，怎么获取其中的值 & json.stringify()与json.parse()的区别和使用
Vue3 getters打印结果是Proxy对象，怎么获取其中的值 & json.stringify()与json.parse()的区别和使用1、Proxy对象的处理现象代码 // 被勾选的show (val) { console.log(val) // 打印结果是一个Proxy对象 console.log(JSON.parse(JSON.stringify(val))) // 序列化后可以取值}序列化后即可取值：JSON.parse(JSON.stringi原创 2021-09-24 19:50:33 · 7148 阅读 · 0 评论 -
vue3.0页面模板-示例
vue3.0页面模板-示例index.vue<template> <!-- vue3.0模板 --> <div v-if="isLook"></div></template><script lang="ts">import { defineComponent, getCurrentInstance, onMounted, reactive, ref, toRefs,原创 2021-09-24 09:32:26 · 3233 阅读 · 0 评论 -
Vue3.0的初始化
Vue3.0的初始化官方文档（ 中文版 ）：https://vue3js.cn/docs/zh/1、创建一个Vue3.0的项目1、npm init vite-app vue3.02、cd vue3.03、npm install4、npm run dev此时，项目已经创建成功！！！！2、体验一下Vue3.0的新变化1、setup()——beforeCreate 、created 之前执行。setup() 函数是 vue3 中，专门为组件提供的新属性。它为我们使用 vue3 的 Com原创 2021-09-06 16:44:14 · 8819 阅读 · 2 评论