本文演示代码是基于 Vue3 setup 语法。在入门阶段,我们需要掌握是「是什么」、「怎么用」、「有什么注意」,基本就差不多了。1. reactive API 如何使用?reactive方法用来创建响应式对象,它接收一个对象/数组参数,返回对象响应式副本,当该对象属性值发生变化,会自动更新使用该对象地方。下面以分别以对象和数组作为参数演示:import { reactive } from
theme: fancy一. Ref 用法这是 ref 最基本用法,返回来count是一个响应式代理值const count = ref(0)二. 实现1. ref 函数我们调用ref函数,传进来一个 val 值,调用 createRef 函数,我们来看下该函数实现源码路径:packages/reactivity/src/ref.ts function ref(value?: unkno
转载 9月前
78阅读
本文主要内容如下:介绍vue-resource特点介绍vue-resource基本使用方法基于this.$http增删查改示例基于this.$resource增删查改示例基于inteceptor实现请求等待时loading画面基于inteceptor实现请求错误时提示画面 本文11个示例源码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星! Git
转载 7月前
38阅读
新版Vue中最重要一些特性有:性能得到了显著提升;Composition API;一个组件可以支持多个根元素;Tree shaking,当一些功能不用时候就不会打包到最终代码里;新组件:Fragment、Teleport、Suspense;其中性能提升主要体现在:更新比vue2有1.3~2倍提升、SSR有2~3提升。做一个验证创建一个vue2项目和一个vue3项目, 分别加载有1
转载 9月前
14阅读
最近想要做一些vue插件练一下手,于是现在需要解决问题有两个。一个是怎么写vue插件,一个是写完后怎么上传npm。一、如何写一个vue插件首先在进行插件创作时候,先建立一个普通vue项目进行编写。vue create vue-button-z然后创建plugins文件夹,和plugins下lib文件夹,在lib文件夹下写你插件代码1.插件代码编写这是button.vue 文件示例,就
Vue-cli 3安装及使用vue-cli安装vue-cli创建项目自定义脚手架vue-cli3.0添加插件方法全局变量使用vue-cli3.0独立运行.vue文件vue项目管理器vue-cli3.0配置基础路径 vue-cli安装使用下面的命令安装vue-cli3npm install -g @vue/cli # OR yarn global add @vue/cli安装完成,检查vue
转载 2024-10-13 15:44:56
34阅读
文章目录使用感受响应式Vue3对比Vue2变化reactive 源码实现使用感受proxy引入Proxy、Reflect完善边界情况 使用感受响应式在源码开始前,我们来尝试写个demo,使用一下 Reactive & effect<!DOCTYPE html> <html lang="en"> <head> <meta charset=
问题昨天上班还运行得好好,今天启动就报错了,无法进入系统。环境描述vue2+webpack,比较旧框架。还引入了外部以Cesium为基础封装三维引擎。 入口除了main.jsapp,还定义了现在遇到报错xx变量。尝试删除node_modules和package-lock.json,重新npm install,无效;再次重启电脑,无效;清除浏览器缓存,清除cookies,无效;找报错代码
转载 10月前
182阅读
近日在项目完成时需要需要做到内容跟随屏幕可视窗口大小进行适配,然后想到用rem来实现适配问题 1.首先安装一个px转rem插件npm install postcss-pxtorem --save2.新建一个rem.js文件// 设置 rem 函数 function setRem() { const pageWidth = window.innerWidth; //为了ie也能拿到
转载 2024-05-15 15:01:43
812阅读
黑马面面(vuePC端项目)主要就是后台管理系统01-项目创建:01-1、就跟之前一样,安装脚手架(前面也有写也都做过,这里粗略写一下)        a.参考地址:https://cli.vuejs.org/zh/guide/installation.html      &nb
vue实例 选项对象 实例属性与方法1 创建vue实例:vue实例创建:一般通过new关键字方式来创建,构造函数参数列表需要传入一个选项对象var vm = new Vue(paramObj);1.1 vue实例选项对象创建一个vue实例时,需要传入一个选项对象,这个对象里面有如下几个常见属性el是根实例特有属性,代表根元素提供一个页面上DOM对象作为Vue实例挂载目标.可以是选择
一、reactivereactive 用于为对象添加响应式状态。接收一个js对象作为参数,返回一个具有响应式状态副本。获取数据值时候直接获取,不需要加.value 参数只能传入对象类型import { reactive } from 'vue' // 响应式状态 const state = reactive({ count: 0 }) // 打印count值 console.log(
1.vue自定义插件作用插件通常是用来为Vue添加全局功能。插件范围没有严格限制。——一般有下面几种:添加全局方法或者 property。如:vue-custom-element添加全局资源:指令/过滤器/过渡等。如 vue-touch通过全局混入来添加一些组件选项。如 vue-router添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上实现。一个库,提供自己 AP
   目录项目开始时: 如何选择rem设配项目 (六步骤)一:安装二:根据设计稿修改配置  三:在main引入四:cssrem插件cssrem插件配置 五:页面使用六:卸载依赖,复制 flexible.js配置最小最大宽高  下面写入地图china.vue city.vuehome.vueprovi
   有关于移动端适配布局一直以来都是众说纷纭,对应解决方案也是有很多种。在《使用Flexible实现手淘H5页面的终端适配》提出了Flexible布局方案,随着viewport单位越来越受到众多浏览器支持,因此在《再聊移动端页面的适配》一文中提出了vw来做移动端适配问题。到目前为止不管是哪一种方案,都还存在一定缺陷。言外之意,还没有哪一个方案是完美的。事实上真的不完美?其
Vue生态系统中有一个名为Vite新构建工具,它开发服务器比Vue CLI快10-100倍。这是否意味着Vue CLI已经过时了?在本文中,我将比较这两种构建工具,并说明它们优缺点,以便你可以决定哪一种适合你下一个项目。Vue CLI概述大多数Vue开发人员都知道,Vue CLI是使用标准构建工具和最佳实践配置快速建立基于Vue项目的不可或缺工具。其主要功能包括:工程脚手架带热模块重载
一、v-show与v-if共同点我们都知道在 vue 中 v-show 与 v-if 作用效果是相同(不含v-else),都能控制元素在页面是否显示在用法上也是相同<Model v-show="isShow" /> <Model v-if="isShow" />当表达式为true时候,都会占据页面的位置当表达式都为false时,都不会占据页面位置二、v-show与
作者:月夕 演示代码使用 Vue3 + ts + Vite 编写,但是也会列出适用于 Vue2 优化技巧,如果某个优化只适用于 Vue3 或者 Vue2,我会在标题中标出来。一、代码优化v-for 中使用 key使用 v-for 更新已渲染元素列表时,默认用就地复用策略;列表数据修改时候,他会根据 key 值去判断某个值是否修改,如果修改,则
转载 2月前
438阅读
一.配置vue中文件夹别名。1.创建一个vue.config.js文件。 2.配置vue.config.js中参数module.exports = { publicPath: '/', // 启动页地址 outputDir: 'dist', // 打包目录 lintOnSave: true, // 在保存时校验格式 productionSourceMap: f
作者:前端小黑前言 本文目标是通过下文介绍适配方案,使用vue或react开发移动端及H5时候,不需要再关心移动设备大小,只需要按照固定设计稿px值布局,提升开发效率。下文给出了本人分别使用create-react-app搭建react(create-react-app)项目和使用vue-cli 2.x 搭建vue项目中 亲测可用 配置方案。px2rem或postcss-px2re
  • 1
  • 2
  • 3
  • 4
  • 5