zl程序教程

Vue3

  • Vue3 递归组件 全选或者全不选 重命名组件(不修改文件名称)

    Vue3 递归组件 全选或者全不选 重命名组件(不修改文件名称)

    新建Tree.ts  export interface Tree { name: string, children?: Tree[], checked: boolean } 这是递归的结构。 新建 Tree.vue 这个是递归组件 <template> <div v-for=

    日期 2023-09-28 09:17:03     
  • vue3 添加路由vue-router

    vue3 添加路由vue-router

    第一 yarn add vue-router -S 第二 新建router.js 内容如下 import {createRouter, createWebHashHistory} from "vue-router"; const routes = [{ path: "/", componen

    日期 2023-09-28 09:17:03     
  • 端午总结Vue3中computed和watch的使用

    端午总结Vue3中computed和watch的使用

    1使用计算属性 computed 实现按钮是否禁用我们在有些业务场景的时候 需要将按钮禁用。这个时候 我们需要使用(disabled)属性来实现。disabled的值是true表示禁用。false表示可以使用。由于disabled的值是动态变化的。此时我们就可以使用计算属性computed 这个方法。只要值发生变化 他就会重新去计算。在vue3中 如果需要使用computed需要引入。 temp

    日期 2023-09-28 09:17:03     
  • Vue—Vue的项目结构,怎样用Vue3进行开发,如何起步Vue3

    Vue—Vue的项目结构,怎样用Vue3进行开发,如何起步Vue3

    目录 IDE的准备下载VSCode插件安装打开工作区文件夹 Vue3项目结构结构分析 Vue3起步(创建一个新页面)创建页面组件配置路由在根组件中添加导航

    日期 2023-09-28 09:17:03     
  • vue3 api 自动导入

    vue3 api 自动导入

    1. vue3 自动导入 原理 : 预加载前,该插件自动 按需导入 了,在本vue文件中使用 api 和 组件而 编写代码 的时候,就无需 import 了注意并不

    日期 2023-09-28 09:17:03     
  • vue3 搬砖要必备那些?

    vue3 搬砖要必备那些?

    Ⅰ. vue3 简介 vue3 代号 onepiece 【海贼王】 2022年2月7日 成为默认版本 , 2023年底 vue2将彻底淘汰 。 Ⅱ. 优化内容 更新渲染 快了 1 ~ 2 倍

    日期 2023-09-28 09:17:03     
  • vue3逻辑分离和页面快速展示数据

    vue3逻辑分离和页面快速展示数据

    逻辑分层 我们在使用vue3开发项目的时候, 如何进行【区域分层】呢???? 举一个简单的小粒子 一个区域有【查询逻辑、修改后的保存逻辑、新增逻辑、删除逻辑】 这个页面可能还有其他的区域。A区域、B区域,C区域...【有很多逻辑】 这个时候我们可以将一个区域的逻辑分离出去 将各个区域业务分开 export default { setup () { let {queryDo,addD

    日期 2023-09-28 09:17:03     
  • vue3:组件注册

    vue3:组件注册

    全局注册 import { createApp } from 'vue' const app = createApp({}) app.component( // 注册的名字 'M

    日期 2023-09-28 09:17:03     
  • vue3 生命周期 读取dom元素 / 父组件与子组件的生命周期表变化

    vue3 生命周期 读取dom元素 / 父组件与子组件的生命周期表变化

      <template> <p> 我是App.vue组件 </p> <HelloWorld msg="Hello Vue 3 + Vite"/> </template> <script setup lang="ts">

    日期 2023-09-28 09:17:03     
  • 【经典面试题】vue2、vue3、uni-app用法上有什么区别

    【经典面试题】vue2、vue3、uni-app用法上有什么区别

    目录 一、uni-app 和 Vue2 的区别 1、组件/标签的变化 2、新增手机端常用的新组件 3、Js 4、uniapp自带路由和请求方式  二、vue2与vue3的区别 一、uni-app 和 Vue2 的区别 1、组件/标签的变化 以前是html标签,现在是小程序标签。 div 改成 viewspan、f

    日期 2023-09-28 09:17:03     
  • 熬夜总结vue3中setUp函数的2个参数详解

    熬夜总结vue3中setUp函数的2个参数详解

    1.setUp函数的第1个参数propssetup(props,context){}第一个参数props:props是一个对象 包含父组件传递给子组件的所有数据。在子组件中使用props进行接收。包含配置声明并传入的所有的属性的对象也就是说:如果你想通过props的方式输出父组件传递给子组件的值。你需要使用props进行接收配置。即props:{......}如果你未通过Props进行接受配置

    日期 2023-09-28 09:17:03     
  • Vue3中toRefs的使用之页面上快速展示内容

    Vue3中toRefs的使用之页面上快速展示内容

    /script 虽然上面可以使用数据的响应式。但是有时属性值很多 可能有达到几十个值。这样在视图上一个个属性点(.) 会很麻烦可不可以不通过点也能够正常的去渲染和自动更新视图呢 这个时候 机智的小伙伴们可能就想到到解构那么我们来尝试一下。2.使用解构 template div h2 toRef的使用 /h2 p 姓名 {{name }} /p p 年龄:{{ age }}

    日期 2023-09-28 09:17:03     
  • Vue3路由push跳转(解决Vue2this.$router.push失效)

    Vue3路由push跳转(解决Vue2this.$router.push失效)

    Vue3.x出来有一阵子了,今天用它的时候发现Vue2中的this.$router.push竟然不能用了!!!!!,真是服了,还得花点时间瞅瞅咋回事,所以.....还是总结下吧 目录 1.Vue3.x路由跳转 2.

    日期 2023-09-28 09:17:03     
  • 我对vue3的理解

    我对vue3的理解

    我对 reactive源码的理解 reactive 只能够代理对象 首先它判断传递过来的值是否是对象,如果是才会进行代理。变成响应式的。 Proxy 并没有重写对象的属性,只做代理,在取值的时候回调用get,设置值的时候回调用set方法 在get的时候使用了 Reflect.get(target,key)方法 在set的时候使用了 Reflect.set(target,key,value)方法

    日期 2023-09-28 09:17:03     
  • Vue3基础(23)___vue3非父子组件之间的通信

    Vue3基础(23)___vue3非父子组件之间的通信

    父子传值可以看这个: Vue3基础(十san)___父子组件通信___props、emit___provide、inject 非父子传值: 写一个事件集合对象,并写模拟触发函数

    日期 2023-09-28 09:17:03     
  • vue3--学习技术胖笔记----第二波 生命周期和钩子函数

    vue3--学习技术胖笔记----第二波 生命周期和钩子函数

    https://www.bilibili.com/video/BV1L5411j7vj?p=7&spm_id_from=pageDriver&vd_source=caabcbd2a759a67e2a3de8acbaaf08ea   <template> <div> <a href="https://vitejs.dev" tar

    日期 2023-09-28 09:17:03     
  • 升级 vue3 常见问题总汇

    升级 vue3 常见问题总汇

    Ⅰ、前言 虽然 vue3 是没有删除 vue2 的 选项式 API , 但是我们升级vue3 还是需要修改很多问题的下面来看看我们升级常见的一些问题 👇 文章目录 Ⅰ、前言Ⅱ、

    日期 2023-09-28 09:17:03     
  • 端午总结Vue3中computed和watch与watchEffect的使用

    端午总结Vue3中computed和watch与watchEffect的使用

    1使用计算属性 computed 实现按钮是否禁用 我们在有些业务场景的时候,需要将按钮禁用。 这个时候,我们需要使用(disabled)属性来实现。 disabled的值是true表示禁用。false表示可以使用。 由于disabled的值是动态变化的。 此时我们就可以使用计算属性computed 这个方法。 只要值发生变化 他就会重新去计算。 在vue3中,如果需要使用computed需要引

    日期 2023-09-28 09:17:03     
  • vue3:Proxy如何实现响应式?

    vue3:Proxy如何实现响应式?

    深度监听,性能更好可监听 新增/删除 属性可j监听数组变化 总结 Proxy 虽然规避了 Object.defineProperty 的问题,但是无法兼容所有浏览器,无法 pol

    日期 2023-09-28 09:17:03     
  • vue3--学习技术胖笔记----第五波 瞬间移动组件 Teleport

    vue3--学习技术胖笔记----第五波 瞬间移动组件 Teleport

    Model.vue (独立出来的组件) 在不增加<teleport to="#modal">时,他会和引用的组件所在展示模块下 <template> <teleport to="#modal"> <div id="center"> <H2>JSPang.com</H2> </div> </telep

    日期 2023-09-28 09:17:03     
  • vue3:watch与watchEffect的区别

    vue3:watch与watchEffect的区别

    watch ref const x = ref(0) const y = ref(0) // 单个 ref watch(x, (newX) => { console.log(`x

    日期 2023-09-28 09:17:03     
  • 带你简单解读 Vue3

    带你简单解读 Vue3

    Vue.js 3.0 "One Piece" 已正式发布,此框架新的主要版本提供了更好的性能、更小的捆绑包体积、更好的 TypeScript 集成、用于处理大规模用例的新 API,并为框架未来的长期迭代奠定了坚实的基础。 Vue 3.0 的发布标志着此框架整体上已处于可用状态。尽管框架的某些子项目可能仍需要进一步的开发才能达到稳定状态(特别是 Devtools 中的路由和 Vuex 集成)

    日期 2023-09-28 09:17:03     
  • 尤大亲自评测 Vue3 和 Svelte(19个组件后Vue更好!)

    尤大亲自评测 Vue3 和 Svelte(19个组件后Vue更好!)

    近日尤大亲自创建了一个仓库用来对 Svelte 和 Vue3 组件进行了评测。这其实对我来说非常的感兴趣 因为我最近在业务项目中采用了 Svelte 进行了开发。那么到底结果到底是如何呢 (期待的眼神 以为尤大要写 Svelte 代码来进行评测了。Vue 大家都很熟悉了 如果你不知道 Svelte 是啥 可以看后起之秀前端框架 Svelte 从入门到原理。大体介绍一下 Svelte 是一个  N

    日期 2023-09-28 09:17:03     
  • Vue和React对比学习之组件传值(Vue2 12种、Vue3 9种、React 7种)

    Vue和React对比学习之组件传值(Vue2 12种、Vue3 9种、React 7种)

    简介 Vue和React是目前前端最火的两个框架。不管是面试还是工作可以说是前端开发者们都必须掌握的。 今天我们通过对比的方式来学习Vue和React的组件传值这一部分。 本文首先讲述Vue2、Vue3、React的组件传值方式,然后具体介绍了每种传值的应用场景以及具体的使用。最后对比总结了Vue和React在组件传值这部分的相同点和不

    日期 2023-09-28 09:17:03     
  • vue3 vite 配置@

    vue3 vite 配置@

    yarn add path import { resolve } from 'path' resolve: { alias: { '@': resolve(__dirname, 'src'), }, extensi

    日期 2023-09-28 09:17:03     
  • 31.Vue3:Props组件交互

    31.Vue3:Props组件交互

    MyComponent.vue <template> <h3>单文件组件</h3> <p>{{title}}</p> <p>{{context}}</p> <ul> <li v-for="i

    日期 2023-09-28 09:17:03     
  • vue3 添加路由vue-router

    vue3 添加路由vue-router

    第一 yarn add vue-router -S 第二 新建router.js 内容如下 import {createRouter, createWebHashHistory} from "vue-router"; const routes = [{ path: "/", componen

    日期 2023-09-28 09:17:03     
  • 27.Vue3:列表渲染

    27.Vue3:列表渲染

    <template> <div class="hello"> <ul> <!-- 条件渲染方法:v-for类似循环,把数据存入到一个对象中 --> <li v-for="item in newsList">{{it

    日期 2023-09-28 09:17:03     
  • vue3 项目添加vuex 进行组件中传递数据

    vue3 项目添加vuex 进行组件中传递数据

    添加依赖 yarn add vuex -S 新建 store/index.js文件 import {createStore} from "vuex" export default createStore({ state: { isCollapse: true, }, mutations

    日期 2023-09-28 09:17:03     
  • Vue—什么是Vue,怎样配置和搭建Vue3项目

    Vue—什么是Vue,怎样配置和搭建Vue3项目

    目录 什么是VueNode.jsWebpackVue.jsVue-CLIVue-RouterVueXAxiosElement UIVue的整体架构设计 搭建Vue3项目安装Node.js安装

    日期 2023-09-28 09:17:03     
  • Vue3基础(三)__isRef___isReactve

    Vue3基础(三)__isRef___isReactve

    isRef isRef方法通过vue解构出来 import { isRef } from "vue"; 主要是为了判断自己生成的响应数据是否是通过isRef 方法生成的 <template&g

    日期 2023-09-28 09:17:03     
  • vue3.x版本新建项目相关知识和注意事项

    vue3.x版本新建项目相关知识和注意事项

    前言你前提应该懂下面基础知识:下载node.js 下好后自带npm 命令 终端查看命令 npm -v 即可看到安装版本安装淘宝镜像:npm install -g cnpm --registry=https://registry.npm.taobao.org npm init 在项目中引导创建一个package.json文件   常用 npm init -y 直接自动生成 n

    日期 2023-09-28 09:17:03     
  • 熬夜总结vue3中setUp函数的2个参数详解

    熬夜总结vue3中setUp函数的2个参数详解

    1.setUp函数的第1个参数props setup(props,context){} 第一个参数props: props是一个对象,包含父组件传递给子组件的所有数据。 在子组件中使用props进行接收。 包含配置声明并传入的所有的属性的对象 也就是说:如果你想通过props的方式输出父组件传递给子组件的值。 你需要使用props进行接收配置。即props:{......} 如果你未通过Pro

    日期 2023-09-28 09:17:03     
  • vue3 与 vue2 的区别,vue3 新特性,为什么要使用vue3

    vue3 与 vue2 的区别,vue3 新特性,为什么要使用vue3

    vue3与vue2的区别 可以参考这个网站vuejs/rfcs,About:RFCs for substantial changes / feature additions to Vue core vue3新特性 性能提升 打包大小减少 初次渲染快,更新快 内存使用减少 Composition API: ref , reactive computed , watch 新的生命周期函数

    日期 2023-09-28 09:17:03     
  • Vue3中使用toRefs对数据进行解构

    Vue3中使用toRefs对数据进行解构

    1 使用reactive 实现数据的响应式 <template> <div> <h2>toRef的使用</h2> <p> 姓名:{{state.name }} </p> <p>年龄:{{ state.age }} </p> <button @click="ch

    日期 2023-09-28 09:17:03     
  • Vue3学习(三)集成less

    Vue3学习(三)集成less

    nom i less less-loader --save-dev 暂无其他配置

    日期 2023-09-28 09:17:03     
  • 36.Vue3:Axios网络请求封装

    36.Vue3:Axios网络请求封装

    第一步 在src目录下创建文件夹utils,并创建文件request.js,用来存储网络请求对象axios // 在src目录下创建文件夹utils,并创建文件request.js,用来存储网络请求对象axios import axios from "axios"; import

    日期 2023-09-28 09:17:03     
  • vue3 组合式API 逻辑拆分,再也不怕同事说我代码烂了

    vue3 组合式API 逻辑拆分,再也不怕同事说我代码烂了

    Ⅰ、前言 vue2 我们对于复杂的逻辑会采用 mixin 去拆分;当然,这也会引起很多问题,比如命名冲突,难以维护 ,复用性差的缺点;那么

    日期 2023-09-28 09:17:03     
  • Vue2迁移Vue3,如何迁移?

    Vue2迁移Vue3,如何迁移?

      vue2 对比 Vue3 有很多新特性增加,也有很多功能属于破坏性更新。 列举值得关注的新特性 第一个肯定是组合式API setup 以及 setup语法糖模式 新增的内置组件 TelePort 以及 Suspense 响应式原理的变化从 Object.defineProperty 换成了 proxy 对ts支持比较友好 自

    日期 2023-09-28 09:17:03     
  • Vue3基础(二)___reactive

    Vue3基础(二)___reactive

    在Vue3中创建响应数据有两种方式一种是ref,另一种就是reactive reactive 首先在该组件引入 import { ref, reactive } from "vue";

    日期 2023-09-28 09:17:03     
  • 适合编程初学者的开源博客系统(Vue3+Vant版)

    适合编程初学者的开源博客系统(Vue3+Vant版)

    目标 为编程初学者打造入门学习项目,使用各种主流编程语言来实现。让想学编程的,一个都不落下。 上述基本涵盖了当前编程开发所有主流语言。 左侧为前端版本:安卓、iOS、鸿蒙、Fl

    日期 2023-09-28 09:17:03     
  • Vue3基础(四)___Vue-Router

    Vue3基础(四)___Vue-Router

    今天就不先着急学习语法了,先搞了一下vue3.0的路由 Vue-Router 首先,我们npm一下 npm i vue-router@4 import { createRoute

    日期 2023-09-28 09:17:03     
  • Vue3 组件。基本组件,全局组件引用,组件批量引用

    Vue3 组件。基本组件,全局组件引用,组件批量引用

    基本组件 <template> <div class="card"> <header> <div>标题</div> <div>副标题</div> </header> <secti

    日期 2023-09-28 09:17:03     
  • 认真总结Vue3中ref与reactive区别和isRef与isReactive 类型判断

    认真总结Vue3中ref与reactive区别和isRef与isReactive 类型判断

    1.什么是ref?1.ref和reactive-样也是用来实现响应式数据的方法由于reactive必须传递一个对象 所以导致在企业开发中如果我们只想让某个变量实现响应式的时候会非常麻烦所以Vue3就给我们提供了ref方法 实现对简单值的监听2.ref本质:ref底层的本质其实还是reactive系统会自动根据我们给ref传入的值将它转换成ref(xx) - reactive({value:xx}

    日期 2023-09-28 09:17:03     
  • 前端笔记(6) Vue3 dialog弹窗 父子组件之间传值及方法调用

    前端笔记(6) Vue3 dialog弹窗 父子组件之间传值及方法调用

    dialog弹窗 父子组件之间传值及方法调用 一、前言二、模板ref1 访问模板ref 三、父给子传值1 子组件使用prop声明接收的参数2 父组件使用v-model传递值 四、父调子的方法1 子组

    日期 2023-09-28 09:17:03     
  • Vue3中readonly 和 shallowReadonly和toRaw

    Vue3中readonly 和 shallowReadonly和toRaw

    1.readonly 深度只读 被readonly包裹的数据只能够读取。 是一个深度只读,不能够修改。 我们看一下面的代码。 我们想修改值,但是修改后视图无响应。 并且控制台警告目标为只读 readonly深度只读的应用场景: 比如我们登录后用户信息不会发生改变了。 <template> <div> <div> <div>

    日期 2023-09-28 09:17:03     
  • vue3 vite直接创建项目 添加 element-ui 按需引入和全部引入

    vue3 vite直接创建项目 添加 element-ui 按需引入和全部引入

     创建home 工程 yarn create vite home --template vue cd home yarn yarn dev yran dev就可以看到一个网址 点进去就可以看到效果了 添加element-ui yarn add element-plus  全局引入 (不推荐) 之前的ma

    日期 2023-09-28 09:17:03     
  • vue3项目引入高德地图详细方法教程

    vue3项目引入高德地图详细方法教程

    项目需求需要引入地图,对于目前最新的Vue3.0,无论是百度/高德/腾讯地图目前还没有适配,只有Vue 2.x版本的: 目前只有谷歌地图的Vue3.0适配: 但是没有适配并不代表不能使用,下面就来教大家如何使用。 1.在高德开发平台申请你的key高德开发平台 2.在public/index.html引入高德的cdn <script

    日期 2023-09-28 09:17:03     
  • Vue3中shallowReactive和shallowRef对数据进行非深度监听

    Vue3中shallowReactive和shallowRef对数据进行非深度监听

    1.Vue3 中 ref 和 reactive 都是深度监听 默认情况下, 无论是通过 ref 还是 reactive 都是深度监听。 深度监听存在的问题: 如果数据量比较大,非常消耗性能。 有些时候我们并不需要对数据进行深度监听。 这个时候就没有必要使用ref和reactive 2.说明 ref 对数据进行深度监听 <template> <div> <

    日期 2023-09-28 09:17:03     
  • 尚硅谷Vue3(天禹老师主讲)的笔记

    尚硅谷Vue3(天禹老师主讲)的笔记

    这是尚硅谷Vue3(天禹老师主讲)的笔记,放在这里只是为了方便自己查看 文章目录 Vue3快速上手1.Vue3简介2.Vue3带来了什么1.性能的提升2.源

    日期 2023-09-28 09:17:03