vue3
文章平均质量分 61
天天天天天天天天d
这个作者很懒,什么都没留下…
展开
-
vue3学习笔记(15)router路由高级使用 路由守卫
Vue3专栏入口界面一共两个主要按钮Home和About,在about下还有子路由,上排为message下排为news,需要给这8个子路由添加权限模拟。1.1.2 pages/Home.vue1.1.3 pages/Message.vue1.1.4 pages/News.vue1.1.5 App.vue1.1.6 main.js1.2路由编写 router/index.js在这个js中我们配置了路由守卫 router.beforeEach()1.3 vuex权限存储 store原创 2022-07-08 21:45:09 · 584 阅读 · 0 评论 -
vue3学习笔记(14)Vuex
Vue3专栏入口原创 2022-06-03 22:30:27 · 249 阅读 · 0 评论 -
vue3学习笔记(13)插槽slot
Vue3专栏入口一个组件,实现以下三个不同的需求这时就需要在组件总用到插槽标签slot原创 2022-06-02 22:48:30 · 140 阅读 · 0 评论 -
vue3学习笔记(12)全局总线 mitt
Vue3专栏入口npm install mitt -s我习惯创建一个mitt文件夹,里面放一个任意名字的js文件,我这里叫event.js。然后在需要的位置直接导入如App.vue中。About.vue的全部代码如下:原创 2022-06-02 21:23:48 · 670 阅读 · 0 评论 -
vue3学习笔记(11)router路由初级使用
Vue3专栏入口文章目录一、router1.1 app.vue1.2 main.js1.3index.js1.4 About.vue和Home.vue二、结果展示一、router这是我路由的文件结构,多了一个router文件夹用来存放index.js文件编写路由,多了两个vue文件About和Home用来经行演示1.1 app.vue<template> <router-link to="/">Go to home</router-link> <ro原创 2022-05-28 18:24:15 · 581 阅读 · 0 评论 -
vue3学习笔记(10)Teleport 和 Suspense
Vue3专栏入口文章目录一、Teleport(瞬移)基本使用1.1 目录1.2 App.vue 代码1.3 son.vue 代码二、 Suspenses2.1 目录2.2 App.vue 代码2.3 son.vue 代码一、Teleport(瞬移)基本使用实现目标:将子组件放到body下正常来说子组件像红色框内的一样,是在父组件下的,但通过Teleport可以实现将子组件放到body下,如蓝色框内的子组件。1.1 目录1.2 App.vue 代码<template> <原创 2022-04-25 12:23:29 · 1540 阅读 · 0 评论 -
vue3学习笔记(9)provide与inject
Vue3专栏入口文章目录一、直接应用1.1 目录1.2 App.vue代码(provide)1.3 son.vue代码1.4 grandSon.vue代码(inject)一、直接应用实现目标:父组件直接给孙子组件传数据,跳过子组件。需求描述,父组件控制孙子组件的颜色变化。如下图点击父组件中的按钮时,修改孙子组件的颜色。1.1 目录这是src的目录结构1.2 App.vue代码(provide)<template> <div> <h1>父原创 2022-04-25 11:11:08 · 1347 阅读 · 0 评论 -
vue3学习笔记(8)toRefs和ref获取元素
Vue3专栏入口一、toRefs我们正常使用reactive()方法创建复杂的响应式对象后如果想要在Html中使用一定是这样的。例如创建时代码为:const data = reactive({ name:'小天', age:5, web:{ webName:'天天搜题', webAge:6 }})那我们使用时一定是这样:<h3>name:{{data.name}}</h3><h3>age:{{data.age}}</h3>&原创 2022-04-24 23:12:59 · 1253 阅读 · 2 评论 -
vue3学习笔记(7)hook函数
Vue3专栏入口本文按照需求分次级标题一、 实现收集用户鼠标点击位置的hook函数1.1 目录结构2.2 useUserPosition.ts代码还是比较简单的,这样就可以实现代码的复用import { onBeforeUnmount, onMounted, ref } from "vue";export default function () { const x = ref('') const y = ref('') // 鼠标点击操作函数回调 co原创 2022-04-24 17:13:46 · 1214 阅读 · 0 评论 -
vue3学习笔记(6)生命周期
Vue3专栏入口一、 常用的生命周期钩子没什么讲的就是一些概念,后边用到可以把案例写回来,暂时就了解一下哇。# 我们最常用的,在创建组件前执行setup()# 组件开始挂载前执行onBeforeMount()# 组件挂载完执行onMounted()# 组件更新前执行onBeforeUpdate()# 组件更新后执行onUpdated()# 组件卸载前执行onBeforeUnmount()# 组件卸载后执行onUnmounted()# 当A组件切换成B组件时 A组件消失后执行原创 2022-04-24 16:46:24 · 659 阅读 · 0 评论 -
vue3学习笔记(5)计算属性和监视
Vue3专栏入口目录一、计算属性1.1 计算属性同步数据1.1.1实现内容1.1.2 如何实现1.2 计算属性双向同步1.2.1实现内容1.2.2 如何实现二、监视2.1 监听实现同步2.1.1 实现内容2.1.2 如何实现2.2 监听实现双向同步三、 案例完整代码一、计算属性1.1 计算属性同步数据1.1.1实现内容当用户修改1中两个input框数据时2中的input框也跟着同步修改1.1.2 如何实现从vue中导入computed计算属性方法编写计算属性方法传入一个回调函数,如同注释原创 2022-04-24 16:17:26 · 760 阅读 · 0 评论 -
vue3学习笔记(4)组件之间的参数传递(带完整代码)
Vue3专栏入口目录一、 父传子1.1 步骤图解1.2 App.vue完整代码:1.3 child.vue完整代码:二、子传父2.1 步骤图解2.2 App.vue完整代码2.3 child.vue完整代码一、 父传子父传子十分好理解,需要先创建一个子,一个父如图所示。1.1 步骤图解App.vue中步骤如下:导入子组件声明子组件在Html中使用子组件并添加 :msg=“msg”这时由steup返回的msg就会被子组件接收child.vue中步骤如下接收msg展示msg原创 2022-04-23 21:28:11 · 1586 阅读 · 0 评论 -
vue3学习笔记(3)setup、ref和reactive基本使用
Vue3专栏入口目录一、vue基础使用二、setup和ref基本使用三、reactive的基本使用一、vue基础使用将App.vue都删掉按照以下结构编写代码这就是起步模板<template> <div>{{msg}}</div></template><script>// defineComponent函数,目的是定义一个组件,内部可以传入一个配置对象import { defineComponent } from 'vue原创 2022-04-23 20:07:44 · 587 阅读 · 0 评论 -
vue3学习笔记(2)vite创建vue3项目
Vue3专栏入口目录一、Vite构建工具二、目录讲解2.1 public目录2.2 src目录2.2.1 assets目录2.2.2 components目录2.2.3 App.vue2.2.4 main.js2.3 其他文件2.3.1 .gitgnore2.3.2 index.html2.3.3 package-lock.json、package.json、README.md一、Vite构建工具Vue3官方文档Vite 是一个 web 开发构建工具,由于其原生 ES 模块导入方式,可以实现闪电般的原创 2022-04-23 16:31:56 · 799 阅读 · 0 评论 -
vue3学习笔记(1)script引入vue3实现简单应用
目录一、脚本引入简单使用二、双向绑定的基本表现一、脚本引入简单使用script引入<!-- vue3脚本地址为:https://unpkg.com/vue@3.2.31/dist/vue.global.js --><script src="https://unpkg.com/vue@3.2.31/dist/vue.global.js"></script>简单使用实现数据渲染<body> <!-- 添加html结构 -->原创 2022-04-23 12:24:06 · 4216 阅读 · 1 评论