当前位置:首页 > 技术文章 > web前端 > Vue.js

  • 如何使用Vue3+ts开发ProTable
    如何使用Vue3+ts开发ProTable
    前台实现实现效果技术栈vue3+typescript+element-plus使用方法import{ref}from'vue'importProTablefrom'./components/ProTable/index.vue'import{ColumnProps,RequestUrl}from'./components/ProTable/types'import{projectConfig,proj
    Vue.js . web前端 1769 2023-05-12 21:10:12
  • Vue3中的computed,watch,watchEffect如何使用
    Vue3中的computed,watch,watchEffect如何使用
    一、computed姓:名:全名:{{person.fullname}}全名:import{reactive,computed}from'vue'exportdefault{name:'HelloWorld',setup(){letperson=reactive({firstName:"张",lastName:"三"})//computed简写形式,没考虑修改/*person.fullname
    Vue.js . web前端 1603 2023-05-12 20:04:10
  • Vue3 Element Plus el-form表单组件怎么使用
    Vue3 Element Plus el-form表单组件怎么使用
    在ElementPlus中,el-form是一个表单组件,用于创建表单以便用户填写和提交数据。它提供了许多内置的验证规则和验证方法,使表单验证更加容易。使用el-form组件,您可以将表单控件组织在一起,并对表单进行验证,以确保提交的数据符合预期的格式和要求。该组件具有以下特性:支持内置的验证规则和自定义验证函数。可以通过设置model属性将表单数据绑定到表单组件上。支持表单验证前和验证后的回调函数。提供了一些常见的表单控件,如输入框、下拉框、单选框、复选框等。在功能和用法上,el-form组件
    Vue.js . web前端 4720 2023-05-12 20:04:04
  • vue3动态组件如何使用
    vue3动态组件如何使用
    问题:为什么vue3需要对引入的组件使用markRow?vue2importAfrom'./A';exportdefault{name:'Home',data(){return{}},components:{A},}vue3{{item.name}}importAfrom'../components/A.vue'importBfrom'../components/B.vue&#
    Vue.js . web前端 1002 2023-05-12 18:49:06
  • vue3中ref和reactive怎么使用
    vue3中ref和reactive怎么使用
    1.前言vue3新增了ref,reactive两个api用于响应式数据,Ref系列毫无疑问是使用频率最高的api之一,响应式意味着数据变动,页面局部自动更新。数据类型有基本数据类型(string,number,boolean,undfined,null,symbol),引用数据类型(object,array,set,map等)。如何精准检测跟踪js中所有的数据类型变动,并且能够达到vnode的对比后真实dom的渲染?vue中是如何做到的呢?简单实例如下:import{reactive,ref}f
    Vue.js . web前端 1531 2023-05-12 18:46:06
  • Vue3怎么使用setup语法糖拒绝写return
    Vue3怎么使用setup语法糖拒绝写return
    Vue3.2setup语法糖是在单文件组件(SFC)中使用组合式API的编译时语法糖解决Vue3.0中setup需要繁琐将声明的变量、函数以及import引入的内容通过return向外暴露,才能在使用的问题1.在使用中无需return声明的变量、函数以及import引入的内容,即可在使用语法糖//import引入的内容import{getToday}from'./utils'//变量constmsg='Hello!'//函数func
    Vue.js . web前端 1085 2023-05-12 18:34:23
  • vue3如何数据监听watch/watchEffect
    vue3如何数据监听watch/watchEffect
    我们都知道监听器的作用是在每次响应式状态发生变化时触发,在组合式API中,我们可以使用watch()函数和watchEffect()函数,当你更改了响应式状态,它可能会同时触发Vue组件更新和侦听器回调。默认情况下,用户创建的侦听器回调,都会在Vue组件更新之前被调用。这意味着你在侦听器回调中访问的DOM将是被Vue更新之前的状态。那么,我们来看一下,怎么才能好好的使用他们呢?他们之间又有什么区别呢?watch()函数watch需要侦听特定的数据源,比如侦听一个ref,watch的第一个参数可以
    Vue.js . web前端 1490 2023-05-12 18:31:06
  • vue3中7种路由守卫如何使用
    vue3中7种路由守卫如何使用
    路由守卫有哪几种?路由守卫(导航守卫)分为三种:全局守卫(3个)、路由独享守卫(1个)、组件的守卫(3个)路由守卫的三个参数to:要跳转到的目标路由from:从当前哪个路由进行跳转next:不做任何阻拦,直接通行注意:必须要确保next函数在任何给定的导航守卫中都被调用过一次。它可以出现多次,但是只能在所有的逻辑路径都不重叠的情况下,否则会报错。案例:router.beforeEach((to,from,next)=>{if(to.name!=='Login&#39
    Vue.js . web前端 4618 2023-05-12 18:13:14
  • vue3怎么使用defineAsyncComponent与component标签实现动态渲染组件
    vue3怎么使用defineAsyncComponent与component标签实现动态渲染组件
    一、基础的动态引入组件:简单的动态引入的意思是,前端知道要引入哪些组件,将多个组件引入到父组件中,但不渲染它,满足一定条件后,才去在某个位置渲染指定的组件。import{reactive,ref,shallowReactive,onActivated,defineAsyncComponent,}from'vue';constcustomModal=defineAsyncComponent(()=>import('./modal/CustomM
    Vue.js . web前端 3328 2023-05-12 17:55:21
  • Vue3中的ref和reactive怎么使用
    Vue3中的ref和reactive怎么使用
    一、是什么ref和reactive是Vue3中用来实现数据响应式的API一般情况下,ref定义基本数据类型,reactive定义引用数据类型二、先聊reactivereactive定义引用数据类型(以对象和数组举例),它能够将复杂数据类型的内部属性或者数据项声明为响应式数据,所以reactive的响应式是深层次的,其底层是通过ES6的Proxy来实现数据响应式,相对于Vue2的Object.defineProperty,具有能监听增删操作,能监听对象属性的变化等优点使用reactive定义对象数
    Vue.js . web前端 1314 2023-05-12 17:34:12
  • VUE3怎么使用JSON编辑器
    VUE3怎么使用JSON编辑器
    1、先看看效果图,可以自行选择展示效果2、这是我在vue3项目中使用的JSON编辑器,首先引入第三方插件npminstalljson-editor-vue3yarnaddjson-editor-vue33、引入到项目中//导入模块importJsonEditorVuefrom'json-editor-vue3'//注册组件components:{JsonEditorVue},4、一般后端返回的是会将JSON转为String形式我们传给后端也是通过这种形式,就可以通
    Vue.js . web前端 3375 2023-05-12 17:34:06
  • Vue3中的响应式机制是什么
    Vue3中的响应式机制是什么
    什么是响应式响应式一直都是Vue的特色功能之一;与之相比,JavaScript里面的变量,是没有响应式这个概念的;你在学习JavaScript的时候首先被灌输的概念,就是代码是自上而下执行的;我们看下面的代码,代码在执行后,打印输出的两次double的结果也都是2;即使我们修改了代码中count的值后,double的值也不会有任何改变letcount=1letdouble=count*2count=2double的值是根据count的值乘以二计算而得到的,如果现在我们想让doube能够跟着cou
    Vue.js . web前端 1207 2023-05-12 17:07:06
  • vue3中怎么实现定义全局变量
    vue3中怎么实现定义全局变量
    vue3定义全局变量在vue2中,我们知道vue2.x是使用Vue.prototype.$xxxx=xxx来定义全局变量,然后通过this.$xxx来获取全局变量。但是在vue3中,这种方法显然不行了。因为vue3中在setup里面我们是无法获取到this的,因此按照官方文档我们使用下面方法来定义全局变量:首先在main.js里写一个我们要定义的全局变量,比如一个系统id吧app.config.globalProperties.$systemId="10"现在在页面里需要使用
    Vue.js . web前端 10193 2023-05-12 16:40:14
  • vue3怎么封装input组件和统一表单数据
    vue3怎么封装input组件和统一表单数据
    准备工作用vuecreateexample创建项目,参数大概如下:用原生input原生的input,主要是value和change,数据在change的时候需要同步。App.tsx如下:import{ref}from'vue';exportdefault{setup(){//username就是数据constusername=ref('张三');//输入框变化的时候,同步数据constonInput=;return()=>({
    Vue.js . web前端 2383 2023-05-12 15:58:26
  • vue3原始值响应方案及响应丢失问题怎么解决
    vue3原始值响应方案及响应丢失问题怎么解决
    一、ref的引入ref就是解决proxy无法直接代理原始值的问题。我们先来看ref的使用:constname=ref('小黑子')ref是怎么实现的呢?其实就是用对象“包裹”原始值。我们再来看一下ref的实现:functionref(val){//使用对象包裹原始值constwrapper={value:val}//利用reactive将对象变成响应式数据returnreactive(wrapper)}ref的实现就是这么简单。ref对原始值响应主要就做了这两件事
    Vue.js . web前端 4244 2023-05-12 15:52:06

PHP讨论组

组员:3305人话题:1500

PHP一种被广泛应用的开放源代码的多用途脚本语言,和其他技术相比,php本身开源免费; 可以将程序嵌入于HTML中去执行, 执行效率比完全生成htmL标记的CGI要高许多,它运行在服务器端,消耗的系统资源相当少,具有跨平台强、效率高的特性,而且php支持几乎所有流行的数据库以及操作系统,最重要的是

学习途径

工具推荐

jQuery企业留言表单联系代码

jQuery企业留言表单联系代码是一款简洁实用的企业留言表单和联系我们介绍页面代码。
表单按钮
2024-02-29

HTML5 MP3音乐盒播放特效

HTML5 MP3音乐盒播放特效是一款基于html5+css3制作可爱的音乐盒表情,点击开关按钮mp3音乐播放器。
播放器特效
2024-02-29

HTML5炫酷粒子动画导航菜单特效

HTML5炫酷粒子动画导航菜单特效是一款导航菜单采用鼠标悬停变色的特效。
菜单导航
2024-02-29

jQuery可视化表单拖拽编辑代码

jQuery可视化表单拖拽编辑代码是一款基于jQuery和bootstrap框架制作可视化表单。
表单按钮
2024-02-29

OpenCart 中文免费版

opencart中文版是在英文版基础上修改衍生而来,严格遵循OC的mvc架构,根据国内用户习惯进行了大量的修改工作(未修改内核)。
电商源码
2025-11-22

多多校园网络店铺

v3.3增加是否允许用户注册选项,重些登陆验证代码,取消SessionTimeout设置,改成前后台登陆验证设置,重写短消息单元,所有短信功能在个页面完成,更改相关短信连接和图片设置,美化相关小图片,修正若干个小问题,全新界面正装上市丰富用户字段,重命名相关文件,以方便使用管理,适合开发规范,重写修改密码,修改资料,店铺标志上传,店铺公告,店铺连接代码,店铺资料修改,商品发布、修改、删除功能,二手发布,管理,修改功能代码,兼职发布,管理,修改功能代码,进一步美化界面加入在第二种线客户系统,让你更方便的设
电商源码
2025-11-22

H5自适应企业网站源码1.0.1

H5自适应企业网站源码是一套非常优秀的asp自适应企业网站源码,这套源码有很多优秀的功能,也是很多企业网站所不具备的。H5自适应企业网站源码使用asp+access搭建,运行环境要求windows+IIS。网站前台是动态页面,不过网址URL已经做了伪静态处理,URL的格式都是.html结尾,对搜索引擎也比较友好。H5自适应企业网站源码的一个亮点功能就是会员等级制度及权限划分功能,普通会员栏目发布的产品,只有注册会员才能查看,没有注册的访客在查看普通会员栏目是会要求访客注册后查看;高级会员栏目发布的产品则
企业站源码
2025-11-22

ShopWind多用户商城系统

ShopWind是一款基于Yii2.0框架深度重构的B2B2C、O2O行业的电商系统软件,您可以轻松创建和发布属于自己品牌的专业的电商平台,进行全方位的品牌宣传和产品推广。ShopWind v3.x标准版开始走向开源,打造一款完全开源的电商系统,可以免费用于商业运营或者二次开发,免于商业版权的烦恼。v3.x商业版包含PC、手机H5、微商城、APP客户端(Andorid+iOS)、微信小程序、今日头条小程序等多端,其中PC端为开源免费项目,移动端为增值项目。ShopWind提供专业、快速、安全的底层软件设
电商源码
2025-11-22

INS风格感恩节模板设计下载

INS风格感恩节模板设计适用于感恩节INS模板设计 本作品提供INS风格感恩节模板设计的图片会员免费下载,格式为PSD,文件大小为30.4M; 请使用软件Photoshop进行编辑,作品中文字及图均可以通过软件修改和编辑;
psd素材
2025-11-22

浪漫地中海小镇旅行矢量图片

浪漫地中海小镇旅行矢量图片适用于地中海旅行等相关视觉场景设计的AI格式素材。
矢量素材
2025-11-21

手绘返校季开学季矢量素材

手绘返校季开学季矢量素材适用于开学季等相关视觉场景设计的AI格式素材。
矢量素材
2025-11-21

万圣节南瓜堆合集矢量素材

万圣节南瓜堆合集矢量素材适用于等相关视觉场景设计由AI生成的Ai格式素材。
矢量素材
2025-11-21

驾照考试驾校HTML5网站模板

驾照考试驾校HTML5网站模板是一款适合提供驾驶培训和组织驾照考试服务机构宣传网站模板下载。提示:本模板调用到谷歌字体库,可能会出现页面打开比较缓慢。
前端模板
2025-06-10

驾照培训服务机构宣传网站模板

驾照培训服务机构宣传网站模板是一款适合提供一般驾驶和计划培训的驾校宣传网站模板下载。提示:本模板调用到谷歌字体库,可能会出现页面打开比较缓慢。
前端模板
2025-01-07

新鲜有机肉类宣传网站模板

新鲜有机肉类宣传网站模板是一款适合提供各种新鲜有机肉类食材宣传网站模板下载。提示:本模板调用到谷歌字体库,可能会出现页面打开比较缓慢。
前端模板
2025-01-06

HTML5房地产公司宣传网站模板

HTML5房地产公司宣传网站模板是一款适合从事房地产服务行业宣传网站模板下载。提示:本模板调用到谷歌字体库,可能会出现页面打开比较缓慢。
前端模板
2025-01-06
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号