ICode9

精准搜索请尝试: 精确搜索
  • vue3基础入门2022-08-29 19:02:58

    vue3基础入门 官方网站:https://v3.vuejs.org/ 中文文档: https://staging-cn.vuejs.org/guide/introduction.html 1、简介 1.1、vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。 Vue 只关注视图层, 采用自底向上增量开发的设计。 Vue 的目标是通过尽

  • vue3+vuex 的 getters 的 使用2022-08-29 17:33:32

      import { createStore } from 'vuex' export default createStore({ state: { nameVuex:'yjx', levelVuex:100, avtarURLVuex:'http', counterVuex:100, friends:[ {id:111,name:'why0',age:20},

  • 前端开发常用工具2022-08-29 16:01:47

    记录自己经常用到的工具,换电脑时使用----------不定时更新   一:电脑相关 1.windows系统,安装nvm node包管理工具,可以切换多个node版本,以适应vue2,vue3,react等开发需求,安装前先卸载电脑里的nodejs版本,在安装nvm。 2.nrm,切换npm下载源  安装方法 npm i nrm -g     二:vscode相

  • echarts-散点图-vue3-内阴影2022-08-29 09:30:49

        以上为效果图但是有一个问题是,一开始需要定义位置和颜色数组,当数据量过多的时候会重叠而且要提前声明很多数据 后面我决定用关系图来做了,先放上散点图代码供参考 function initReport(sdata) { const myChart0 = echarts.init(main0.value); const offsetData = [

  • vue3 基础-条件渲染 v-if 和 v-show2022-08-28 13:32:29

    本篇讲 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 配置别名@报错2022-08-28 12:35:22

    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

  • Vite+vue3发布后使用的静态图片无法显示Failed to construct ‘URL‘: Invalid URL2022-08-27 18:03:35

    1.使用官方引用静态资源处理,需要把图片放在public里面 getImageUrl(name) { return new URL(`./img/${name}.png`, import.meta.url).href }   2.本地运行项目中可以显示图片,但是发布后报Failed to construct ‘URL’: Invalid URL错误,是因为把 esbuild 构建目标设置为 es202

  • 使用vue3对数据进行分页展示2022-08-26 11:00:24

    要获取用户的滚动位置,可以在末尾添加一列空白节点。每当出现空白时意味着滑倒网页最底部,则进行渲染数据。可以使用getBoundingClientRect来判断是否在页面底部。 getBoundingClientRect用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置。     vue3示例代码如下: <s

  • vue3 基础-生命周期函数2022-08-25 23:30:56

    在 vue 中, 生命周期函数可理解为 "在某个时刻, 会自动执行的函数". 先直观感受一下图示. 一共就八个: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"

  • vue3 学习笔记2022-08-25 18:00:28

    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

  • vue3+ts使用bus事件总线2022-08-24 08:30:11

    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[&

  • 基于Vue3的Leaflet基础2022-08-24 00:30:10

    1. 概述 Leaflet 是一个开源、轻量并且对移动端友好的交互式地图 JavaScript 库,大小仅仅只有 39 KB, 拥有绝大部分开发者所需要的所有地图特性 Leaflet 的官网为:Leaflet - a JavaScript library for interactive maps (leafletjs.com) Leaflet 的中文站点为:Leaflet - 一个交互式地

  • Vue3插槽2022-08-23 18:33:13

    一、前言 插槽其实就是子组件提供给父组件的占位符。子组件定义好插槽后,父组件可以替换插槽内容。 子组件不提供插槽时,父组件填充失效 父组件无填充时,会使用插槽默认内容 二、语法 定义插槽: <slot></slot> 使用插槽 <template v-slot></template> v-slot可简写为# <template #d

  • 使用monorepo发布vue3组件库2022-08-23 13:01:50

    安装pnpm npm install pnpm -g 初始化package.json pnpm init 新建配置文件 .npmrc 在根目录下新建.npmrc文件,并写入如下内容 shamefully-hoist = true ::: tip 注意 如果某些工具仅在根目录的node_modules时才有效,可以将其设置为true来提升那些不在根目录的node_modules,就是

  • vue3新内置组件teleport传送门2022-08-23 12:32:01

    使用到的原因: 在使用固定定位弹出弹出框的时候,突然遇到位置不正确,而且在有index高级别的情况下依旧位置出错 表现如下: 出现原因: 我的代码出现的tf元素,导致定位祖先元素发生改变: 传送门使用: 结果: 浏览器结构: 标签被转移:

  • Vue3中插槽(slot)用法汇总2022-08-23 10:32:27

    theme: fancy Vue中的插槽相信使用过Vue的小伙伴或多或少的都用过,但是你是否了解它全部用法呢?本篇文章就为大家带来Vue3中插槽的全部用法来帮助大家查漏补缺。 什么是插槽 简单来说就是子组件中的提供给父组件使用的一个坑位,用<slot></slot> 表示,父组件可以在这个坑位中填充任何

  • vue3 学习-初识体验-常见指令v-for和v-model2022-08-22 23:30:51

    继续通过小案例来体验一些常用的指令, 以经典的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项目打包后并在本地运行2022-08-22 22:32:04

    vue3项目打包 默认情况下npm run build后会将文件打包到dist目录下,其中dist/index.html是首页 从上面我们可以知道资源都是以/进行访问,我们使用vscode的live server插件后打开发现资源出现问题,访问地址为:http://127.0.0.1:5500/demo/dist/index.html 资源从/加载的话会将协议://

  • 子传父 vue3新特性2022-08-22 14:31:53

    父组件 : <template> <div class="app"> <h2>当前计数: {{ counter }}</h2> <!-- 1.自定义add-counter, 并且监听内部的add事件 --> <add-counter @add="addBtnClick"></add-counter> </div> </temp

  • vue3项目-小兔鲜儿笔记-01-项目初始化2022-08-22 09:35:46

    1.pinia基础 store/modules/user.ts import { defineStore } from 'pinia' // 用户模块 const useUserStore = defineStore('user', { state: () => { return { // 用户信息 profile: {} as UserProfile } }, actions: { // 修改用户

  • vue3黄色警告信息太多 关闭警告提示2022-08-21 13:00:16

    在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.

  • vite+vue3+ts项目搭建2022-08-20 14:33:03

    # **大反派项目说明** ## **一、项目搭建与配置引入** 用到的库:vue3 ts vite less pinia vue-router axios element-plus ### **1.创建项目**     yarn create vite 运行完成以后 输入项目名称和使用框架就创建好了 ### **2.添加各种依赖** 创建项目是就引入了vue3 ts vi

  • Vue3,基于Vue3的一个自开发组件库,提供给大家参考学习使用2022-08-19 14:30:22

    简单介绍: 这个组件库是个人为了学习而开发的,借鉴了element ui和bootstrap两个前端框架开发的。底层代码是基于vue3.x的。 其中组件包括: 1、系统内置 内置样式 内置动画 2、组件文档 消息弹出 模态框 警告框Alert 面包屑 按钮 开关 分页工具 加载框架 块级选择 下拉框 进度条 表

  • vue3的setUp语法2022-08-17 17:33:25

    <!--vue setupApi 语法演示--><template> <view class="content"> <image class="logo" src="/static/logo.png"></image> <view class="text-area"> <view class="title">{{da

  • vue3引入axios2022-08-16 15:32:05

      1.下载axios npm install axios --save   2.在scr目录下自定义一个 reques t文件夹     3.在刚刚建的文件夹中创建一个引入axios的api.js文件   4.api.js里引入 import axios from 'axios'   5.设置默认前缀以及请求时间传参类型拦截器等等..... import axio

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有