vue3.0
关注
分享
扫一扫
前端酱紫
这个作者很懒，什么都没留下…
展开
-
Ant Design Vue 使用table 设置 Tooltip 提示文字
Ant Design Vue 使用table 设置 Tooltip 提示文字tepmlate部分<Tooltip> <template #title> <div style="width: 120px; color: #ffffff"> 提示内容 </div> </template> <div style="cursor: pointer; width: 100%"> 分数<qu原创 2022-04-14 20:31:07 · 2863 阅读 · 0 评论 -
手写 vue3 Proxy reactive 双向绑定原理
vue3 Proxy 双向绑定原理<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2021-10-09 23:33:24 · 557 阅读 · 0 评论 -
vue 项目 下载图片地址 和图片名称
vue 项目 下载图片地址 和图片名称引入：import { downloadImage } from '@/utils/downloadImg'使用：downloadImage(imgurl, imgname)export const downloadImage = (imgsrc, name) => { // 下载图片地址和图片名 var image = new Image() image.setAttribute('crossOrigin', 'anonymous') ima原创 2021-09-16 10:16:59 · 854 阅读 · 0 评论 -
手写webpack原理
webpack原理使用eval 去执行这个字符串<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0原创 2021-08-12 09:57:34 · 235 阅读 · 0 评论 -
vue3.0 中使用vuex 和 vue-router4
目录结构：|-- studyVue3 |-- .gitignore |-- directoryList.md |-- index.html |-- package.json |-- public | |-- favicon.ico |-- src |-- App.vue |-- index.css |-- main.js |-- assets | |-- logo原创 2021-08-11 16:24:36 · 171 阅读 · 0 评论 -
vue3 router Cannot use ‘in‘ operator to search for ‘path‘ in undefined
创建vue3，安装使用 router后 发现报错：Cannot use ‘in’ operator to search for ‘path’ in undefined代码如下：import { createRouter, createWebHashHistory } from 'vue-router';import Home from '../views/Home.vue';const router = createRouter({ history: createWebHashHist原创 2021-08-11 14:34:55 · 12529 阅读 · 6 评论 -
Vite:下一代构建工具
Vite:下一代构建工具构建工具为了解决模块化的问题为什么需要模块化？1.代码量增大，导致项目难以管理2.项目之间需要配合需要统一的编码方式演变：浏览器端 ES Modulesnodejs CommonJSrollup.js 将很多模块化js打包到一个js里面 减少请求Vite VS vue-cliVite 在开发模式下不需要打包可以直接运行，使用的的是ES6模块化加载规则Vue-cli 开发模式下必须对项目打包才可以运行Vite基于缓存的热更新Vue-CLi 基于Webpac原创 2021-08-06 18:00:01 · 301 阅读 · 0 评论 -
vue3.0 reactive ref shallowReactive shallowRef 深度劫持(深度监视) 浅劫持(浅监视)
vue3.0 reactive ref shallowReactive shallowRef 深度劫持(深度监视) 浅劫持(浅监视)<template> <div>m1:{{ m1 }}</div> <div>m2:{{ m2 }}</div> <div>m3:{{ m3 }}</div> <div>m4:{{ m4 }}</div> <button原创 2021-08-05 11:02:47 · 189 阅读 · 0 评论 -
vue3.0 ref的另一个作用：可以获取页面中的元素
vue3.0 ref的另一个作用：可以获取页面中的元素<template> <h2>ref的另一个作用：可以获取页面中的元素</h2> <input type="text" ref="inputRef" /></template><script lang='ts'>import { onMounted, ref } from "vue"export default { // 需求：当页面加载完毕后，页面中的原创 2021-08-05 10:20:54 · 474 阅读 · 0 评论 -
vue3+ts 自定义hooks操作,在页面上获取x,y轴坐标
vue3+ts 自定义hook操作创建项目：vue create demo选择：Default (Vue 3) ([Vue 3] babel, eslint)要把Typescript选择上选择3.x撸代码：HelloWorld.vue路径：src/components/HelloWorld.vue<template> <div class="hello"> <h2>自定义hook操作</h2> <h原创 2021-08-04 17:42:02 · 1092 阅读 · 0 评论 -
vue3.0+vite2.0+Typescript 0基础搭建新项目，后面有优化方案,现学现会
vue3+vite2.0+typescript 0基础搭建新项目，后面简捷优化方案全局安装一下create-vite-appnpmnpm i -g create-vite-appyarnyarn global add create-vite-app创建项目create-vite-app project_name根据提示安装对应依赖cd project_namenpm installnpm run dev预览项目在浏览器输入http://localhost:3000 即可原创 2021-08-02 10:31:17 · 439 阅读 · 0 评论 -
vue3 警告 报错 The template root requires an element rather than texts.eslint-plugin-vue
vue 3.0 警告 报错 ：The template root requires an element rather than texts.eslint-plugin-vue看着很不爽 咋办？在插件 vetur右键 扩展设置点击设置里面的：扩展找到：vetur插件，把Template 勾选 去掉完美解决 这个警告报错问题...原创 2021-07-28 10:31:44 · 5092 阅读 · 3 评论 -
vue 路由 router routhis.$route.params 获取值 和 get 请求 this.$route.query
###this.$route.params 获取值News.vue ---------------<template> <div id="news"> <div v-for="(item,index) in list" :key="index"> <router-link :to="'/content/'+index">...原创 2020-04-06 12:05:48 · 1932 阅读 · 0 评论 -
vue3.0 关闭 eslint
vue3.0 关闭 eslint和src统计目录下 创建 vue.config.js 文件在vue.config.js里面 把 lintOnSave设置为falsedodule.exports = { // 避免Eslint报错 lintOnSave: false}原创 2020-03-30 17:04:47 · 6697 阅读 · 0 评论