vue3基础入门 官方网站:https://v3.vuejs.org/ 中文文档: https://staging-cn.vuejs.org/guide/introduction.html 1、简介 1.1、vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。 Vue 只关注视图层, 采用自底向上增量开发的设计。 Vue 的目标是通过尽
import { createStore } from 'vuex' export default createStore({ state: { nameVuex:'yjx', levelVuex:100, avtarURLVuex:'http', counterVuex:100, friends:[ {id:111,name:'why0',age:20},
记录自己经常用到的工具,换电脑时使用----------不定时更新 一:电脑相关 1.windows系统,安装nvm node包管理工具,可以切换多个node版本,以适应vue2,vue3,react等开发需求,安装前先卸载电脑里的nodejs版本,在安装nvm。 2.nrm,切换npm下载源 安装方法 npm i nrm -g 二:vscode相
以上为效果图但是有一个问题是,一开始需要定义位置和颜色数组,当数据量过多的时候会重叠而且要提前声明很多数据 后面我决定用关系图来做了,先放上散点图代码供参考 function initReport(sdata) { const myChart0 = echarts.init(main0.value); const offsetData = [
本篇讲 vue 中对 dom 元素节点进行 "显示和隐藏" 的实现方式指令, 即 v-if 和 v-show. 其实一句话就能说明白, v-if 的底层是从 dom 树中增删节点; 而 v-show 的底层是 "display = none" 和 "display = block". v-if <!DOCTYPE html> <html lang="en"> <head> <tit
Vue3+vite+js 配置别名@报错 vue3项目中配置vite.config.js时使用path模块报错,一直警告找不大到path模块 原因:path模块是node.js内置的功能,但是node.js本身并不支持ts解决方案:安装@types/node npm install @types/node -D import { defineConfig } from 'vite' import uni fro
1.使用官方引用静态资源处理,需要把图片放在public里面 getImageUrl(name) { return new URL(`./img/${name}.png`, import.meta.url).href } 2.本地运行项目中可以显示图片,但是发布后报Failed to construct ‘URL’: Invalid URL错误,是因为把 esbuild 构建目标设置为 es202
要获取用户的滚动位置,可以在末尾添加一列空白节点。每当出现空白时意味着滑倒网页最底部,则进行渲染数据。可以使用getBoundingClientRect来判断是否在页面底部。 getBoundingClientRect用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置。 vue3示例代码如下: <s
在 vue 中, 生命周期函数可理解为 "在某个时刻, 会自动执行的函数". 先直观感受一下图示. 一共就八个: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"
watch let sum = ref('0'); let person = reactive({ sex:‘女’, age:18, }) watch(sum,(oldVal,newVal) =>{ console.log(oldVal,newVal); }) /** 监视reactive 所定义的一个响应式数据的全部属生 1.注意:此处无法正确获取oldVal 2.注意:强制开启了深度监视(deep配置无效) {deep:fa
1、在vue2中我是这样使用的 //创建一个vueBus.jsimport Bus from 'vue';let install = function (Vue) { Vue.prototype.$bus = new Bus()} export default { install}; //在main.js中引入import vueBus from '@/utils/vueBus';Vue.use(vueBus);//可根据this.$bus._events[&
1. 概述 Leaflet 是一个开源、轻量并且对移动端友好的交互式地图 JavaScript 库,大小仅仅只有 39 KB, 拥有绝大部分开发者所需要的所有地图特性 Leaflet 的官网为:Leaflet - a JavaScript library for interactive maps (leafletjs.com) Leaflet 的中文站点为:Leaflet - 一个交互式地
一、前言 插槽其实就是子组件提供给父组件的占位符。子组件定义好插槽后,父组件可以替换插槽内容。 子组件不提供插槽时,父组件填充失效 父组件无填充时,会使用插槽默认内容 二、语法 定义插槽: <slot></slot> 使用插槽 <template v-slot></template> v-slot可简写为# <template #d
安装pnpm npm install pnpm -g 初始化package.json pnpm init 新建配置文件 .npmrc 在根目录下新建.npmrc文件,并写入如下内容 shamefully-hoist = true ::: tip 注意 如果某些工具仅在根目录的node_modules时才有效,可以将其设置为true来提升那些不在根目录的node_modules,就是
使用到的原因: 在使用固定定位弹出弹出框的时候,突然遇到位置不正确,而且在有index高级别的情况下依旧位置出错 表现如下: 出现原因: 我的代码出现的tf元素,导致定位祖先元素发生改变: 传送门使用: 结果: 浏览器结构: 标签被转移:
theme: fancy Vue中的插槽相信使用过Vue的小伙伴或多或少的都用过,但是你是否了解它全部用法呢?本篇文章就为大家带来Vue3中插槽的全部用法来帮助大家查漏补缺。 什么是插槽 简单来说就是子组件中的提供给父组件使用的一个坑位,用<slot></slot> 表示,父组件可以在这个坑位中填充任何
继续通过小案例来体验一些常用的指令, 以经典的todolist进行展示. 首先呢通过 v-for 指令进行dom循环. v-for 通常是在循环dom的编写的同时遍历数据进行填充. <!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <script src="https://unpkg.com/vue@3">&l
vue3项目打包 默认情况下npm run build后会将文件打包到dist目录下,其中dist/index.html是首页 从上面我们可以知道资源都是以/进行访问,我们使用vscode的live server插件后打开发现资源出现问题,访问地址为:http://127.0.0.1:5500/demo/dist/index.html 资源从/加载的话会将协议://
父组件 : <template> <div class="app"> <h2>当前计数: {{ counter }}</h2> <!-- 1.自定义add-counter, 并且监听内部的add事件 --> <add-counter @add="addBtnClick"></add-counter> </div> </temp
1.pinia基础 store/modules/user.ts import { defineStore } from 'pinia' // 用户模块 const useUserStore = defineStore('user', { state: () => { return { // 用户信息 profile: {} as UserProfile } }, actions: { // 修改用户
在main.js中加上 app.config.warnHandler = () => null; const app = createApp(App) for (const [key, component] of Object.entries(ElementPlusIconsVue)) { app.component(key, component) } app.use(store) app.use(router) app.use(ElementPlus) app.config.
# **大反派项目说明** ## **一、项目搭建与配置引入** 用到的库:vue3 ts vite less pinia vue-router axios element-plus ### **1.创建项目** yarn create vite 运行完成以后 输入项目名称和使用框架就创建好了 ### **2.添加各种依赖** 创建项目是就引入了vue3 ts vi
简单介绍: 这个组件库是个人为了学习而开发的,借鉴了element ui和bootstrap两个前端框架开发的。底层代码是基于vue3.x的。 其中组件包括: 1、系统内置 内置样式 内置动画 2、组件文档 消息弹出 模态框 警告框Alert 面包屑 按钮 开关 分页工具 加载框架 块级选择 下拉框 进度条 表
<!--vue setupApi 语法演示--><template> <view class="content"> <image class="logo" src="/static/logo.png"></image> <view class="text-area"> <view class="title">{{da
1.下载axios npm install axios --save 2.在scr目录下自定义一个 reques t文件夹 3.在刚刚建的文件夹中创建一个引入axios的api.js文件 4.api.js里引入 import axios from 'axios' 5.设置默认前缀以及请求时间传参类型拦截器等等..... import axio