vue-个人杂记

vue项目webpack打包优化体积优化，打包体积减少200kb到4Mb

路由懒加载可以在路由配置里，使用require引入页面或组件实现路由懒加载，每个页面大约可以减少10—50kb的打包体积，示例如下：importVuefrom'vue'importRouterfrom'vue
shalDream·2023-08-29 18:08

Vue-浅拷贝与深拷贝

1、释义浅拷贝：创建一个新对象，这个对象有着原始对象属性值的精确拷贝；如果是基础类型拷贝的就是基础类型的值，如果是引用类型拷贝的就是内存地址；如果其中一个对象改变了这个地址就会影响另一个对象深拷贝：将一个对象从内存中完整的拷贝一份出来，从堆内存中开辟一个新的区域存放新的对象，改变对象不会影响原对象2、示例浅拷贝基本类型基本数据类型是存储在栈内存中vara=1varb=ab=2console.log
打瞌睡的禅师·2023-08-28 19:28

Vue-自定义组件3

好看的网页千篇一律，有趣的代码万里挑一。一到秋天，南京就美成了金陵。现在已经初冬了，南京街头还是深秋景象。这种配色，看起来极度舒适。为平淡的生活，混入一丝仙气。四季的轮转，给熟悉的街景添加了不同的滤镜。换个角度，完全是全新的视觉盛宴。知识的更迭，让思维产生质变。欣赏完美景，回归到工作。保持学习的热情，温故而知新。今天继续Vue自定义组件知识。1.深入理解v-model//定义一个数据加减的组件Vu
云瑶糖糖·2023-08-26 17:02

个人杂记(看了你会喷我的！)

旅行和旅游，有人为了看风景，增长见识，放松心情;有人为了体验生活，感悟生活;有人为了唯美的摄影素材，为了可口的佳肴，为了其深厚的文化底蕴。。。大多数人是带着目的出发的。当然也有人没有目的，没有目的地，单纯想走走，看看。诚然，一场旅行或旅游，可以让人们收获许多。但是倘若期望一场说走就走的，三五天或十天半个月的旅行可以让自己蜕变，变成自己想成为的那样。那就是自欺欺人了。图片发自App个人拙见，真正意义
李白我偶像·2023-08-25 23:39

vue-组件间传参实验-v-on+$emit

1.实验1代码传参测试//注册Vue.component('parent-n',{template:'',methods:{fun3(e){alert(e);}}})Vue.component('child',{template:'v-on1->3',methods:{fun(e){this.$emit("fun2",e);}}})//创建根实例newVue({el:'#app'})2.实验2传参
科学的发展-只不过是读大自然写的代码·2023-08-24 20:43

vue-框架实验-ifarame动态加载

1.vue实验1.1import1.2push应用举例import(path+componentName+'.js').then((component)=>{this.dynamicComps.push({name:componentName});});2.工程代码2.1index.htmlvue-框架实验2.2main.jswindow.parentApp=newVue({data(){retu
科学的发展-只不过是读大自然写的代码·2023-08-24 20:13

vue-$mount实验

$mount('#html的id');1.代码vue-$mount实验{{viewData}}varvm=newVue({data:{viewData:"测试数据"}});vm.
科学的发展-只不过是读大自然写的代码·2023-08-24 20:13

vue-过滤器

1代码Vue测试实例-菜鸟教程(runoob.com){{message|capitalize}}newVue({el:'#app',data:{message:'runoob'},filters:{capitalize:function(value){if(!value)return''value=value.toString()returnvalue.charAt(0).toUpperCase
科学的发展-只不过是读大自然写的代码·2023-08-24 20:12

vue-记忆-Prop 验证

Vue.component('my-component',{props:{//基础的类型检查(`null`和`undefined`会通过任何类型验证)propA:Number,//多个可能的类型propB:[String,Number],//必填的字符串propC:{type:String,required:true},//带有默认值的数字propD:{type:Number,default:10
科学的发展-只不过是读大自然写的代码·2023-08-24 20:12

vue-自定义事件

1.代码Vue-自定义事件{{total}}Vue.component('button-counter',{template:'{{counter}}',data:function(){return{counter
科学的发展-只不过是读大自然写的代码·2023-08-24 20:12

Vue-监听属性/双向数据绑定

1.代码Vue-监听属性/双向数据绑定计数器:{{counter}}点我varvm=newVue({el:'#app',data:{counter:1}});vm.
科学的发展-只不过是读大自然写的代码·2023-08-24 20:12

vue-最简单的实践-数据实验

代码简单实例{{site}}varvm=newVue({el:'#vue_det',data:{site:"简单实验"}})</bod运行效果
科学的发展-只不过是读大自然写的代码·2023-08-24 20:42

从后端看Vue-读《Vue.js技术内幕》

众所周知，作为一名后端懂些Vue.js，是加分项。Vue.js有诸多优点。Vue.js不必为复杂的webpack配置而担心，可以从CDN上下载并使用模板来构建组件。而且在开发中，Vue.js还通过对模板进行静态分析，缓解了React调和算法的某些方面，以实现优化，加快运行时。所以特别适合非职业前端开发，但涉及前端的工作，需要熟悉一个主流前端框架的全栈工程师。作为一名Golang后端，平时只要写好接
·2023-08-21 23:55

Vue-动态生成输入框并校验

一、需求要展示后端接收的卡号列表并可以做卡号内容修改，同时完成输入框的动态增加与删减实现卡号的增删。对动态生成的输入框要进行动态输入校验。二、使用步骤1.表单部分（el-form、el-input）代码如下（示例）：                                           其中的:prop="'cardList.'+index+'.cardNo'"就是动态校验的关键，接
Liang_FeiFan·2023-08-21 21:16

VUE-侦听器实现验证用户名是否被注册过

1通过v-model实现数据绑定2需要提供验证信息3需要侦听器监听输入信息的变化4通过v-model.lazy监听事件代码如下用户名：{{tip}}varvm=newVue({el:'#app',data:{uname:'',tip:''},methods:{checkName:function(uname){//调用接口但是可以使用定时任务的方式模拟接口调用varthat=this;setTim
雷加祥·2023-08-21 20:09

VUE-路由的嵌套

笔记router-link是vue中提供的标签默认会被渲染为a标签to属性默认会被渲染为href属性to属性的值默认会被渲染为#开头的hash地址router-view为路由填充位，渲染指定路由对应的组件先引入vue.js，再引入vue-router.jsUserRegister定义父路由组件//定义路由组件（register为要展示的父组件即要被嵌套的组件）varUser={template:'
雷加祥·2023-08-21 20:09

vue-组件库-storybook：理解storybook、实践

一、理解storybookStorybook是一个开源的工具，可以帮助前端开发者更好地构建、测试和展示组件。具体来说，Storybook可以做以下几件事情：1、为每个组件提供一个独立的页面，可以快速展示或调试组件。2、管理多个组件，按需展示和测试，帮助开发者更好地理解和组织组件库。3、可以用各种状态（例如不同的props和事件触发）的快照测试组件，保证在不同状态下组件的正确性。4、提供一些插件（如
snow@li·2023-08-20 10:16

vue-工程项目结构

基于vue.js的前端开发环境，用于前后端分离后的单页应用开发，可以在开发时使用ESNext、scss等最新语言特性。项目包含：基础库:vue.js、vue-router、vuex、whatwg-fetch编译/打包工具：webpack、babel、node-sass单元测试工具：karma、mocha、sinon-chai本地服务器：express目录结构├──README.md项目介绍├──i
智江鹏·2023-08-19 18:43

GuLi商城-前端基础Vue-指令v-if、v-show、v-else、v-else-if

Document点我呀if=看到我....show=看到我    letapp=newVue({el:"#app",data:{show:true}})Document点我呀{{random}}=0.75">看到我啦？！ >= 0.75=0.5">看到我啦？！ >= 0.5=0.2">看到我啦？！ >= 0.2看到我啦？！ < 0.2            letapp=n
ZHOU_VIP·2023-08-19 14:07

GuLi商城-前端基础Vue-组件化基础

Document我被点击了{{count}}次//1、全局声明注册一个组件Vue.component("counter",{template:`我被点击了{{count}}次`,data(){return{count:1}}});//2、局部声明一个组件constbuttonCounter={template:`我被点击了{{count}}次~~~`,data(){return{count:1}}
ZHOU_VIP·2023-08-19 07:03

GuLi商城-前端基础Vue-生命周期和钩子函数

下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。VUE的生命周期指的是组件在创建、运行和销毁过程中所经历的一系列事件，通过这些事件可以让开发者在不同阶段进行相应的逻辑处理。VUE组件的生命周期分为8个阶段：beforeCreate：组件实例刚被创建，但是数据还未初始化。在这个阶段，无法访问到data和methods等组件属性。create
ZHOU_VIP·2023-08-19 07:03

GuLi商城-前端基础Vue-过滤器

Document{{user.id}}==>{{user.name}}==>{{user.gender==1?"男":"女"}}==>{{user.gender|genderFilter}}==>{{user.gender|gFilter}}Vue.filter("gFilter",function(val){if(val==1){return"男~~~";}else{return"女~~~";}
ZHOU_VIP·2023-08-19 07:03

GuLi商城-前端基础Vue-使用Vue脚手架进行模块化开发

自己亲自实践：mac安装webpackwebpack简介Webpack是一个非常流行的前端构建工具，它可以将多个模块（包括CSS、JavaScript、图片等）打包成一个或多个静态资源文件（bundle），以便用于部署到生产环境。Webpack支持自定义配置，可以实现各种复杂的前端项目构建需求。Webpack主要功能包括：模块加载、代码拆分、文件处理、自动刷新、性能优化等等。在使用Vue.js或R
ZHOU_VIP·2023-08-19 07:33

Vue-一些常用的工具类

本文介绍一些常用的工具类1.验证码如下图，一般的后台管理系统都会在登录的时候设计一个验证码，这个验证码是前端生成的，点击canvas可以切换验证码。二维码的类型是数字或者字母自己可以根据需要设置，1.验证码的js如下图，首先引入验证码的jsverifyCode的代码如下，自己根据需要修改长宽（_init方法中的宽和高），验证码的类型，颜色，干扰线等。functionGVerify(options)
·2023-08-17 00:15

webpack 配置 Vue 多页应用 —— 从入门到放弃

使用webpack配置单页应用的教程很多，直接使用官方的vue-
·2023-08-16 23:59

VUE-获取当前父元素，子元素，兄弟元素

点击methods:{clickfun(e){//e.target是你当前点击的元素//e.currentTarget是你绑定事件的元素#获得点击元素的前一个元素e.currentTarget.previousElementSibling.innerHTML#获得点击元素的第一个子元素e.currentTarget.firstElementChild#获得点击元素的下一个元素e.currentTa
山野林间·2023-08-16 07:17

Vue-打印组件页面

场景:需要将页面的局部信息打印出来，只在前端实现，不要占用后端的资源。经过百度经验，决定使用print-js和html2canvas组件。1.下载包npminstallprint-js--savenpminstall--savehtml2canvas2.组件内引用importprintJSfrom'print-js'import'print-js/dist/print.css'importhtml
stubborn丶lili·2023-08-15 17:15

vue-组件可拖拽案例

涉及到的知识事件方法dragstart，dragenter，dragend事件对象e的属性值获取e.target;//拖拽对象e.clientX;//获取鼠标相对于浏览器的坐标x的位置e.clientY;//获取鼠标相对于浏览器的坐标H的位置e.pageX;//获取鼠标相对于整个文档的坐标xe.pageY;//获取鼠标相对于整个文档的坐标h$refs对dom对象属性的设置和获取//获取letw=t
禾苗种树·2023-08-15 06:08

VUE-基础八-路由

路由安装与配置npm安装依赖npminstallvue-router@4新建文件夹router然后在文件夹中新增index.js路由的配置文件import{createRouter,createWebHashHistory}from'vue-router'//1.定义路由组件.//也可以从其他文件导入importHomefrom"../view/Home";importAboutfrom"../v
苦心明·2023-08-14 16:01

VUE-基础八-生命周期

Vue3.0生命周期图片示例按顺序依次是:组件创建调用beforeCreate实例创建时调用created实例创建完成调用beforeMount模板编译之前自动调用mounted模板编译完成调用组件更新调用:beforeUpdate模板更新之前调用updated模板更新完成调用组件销毁调用beforeUnmount实例销毁之前调用unmounted实例销毁完成调用组件缓存调用只有用keep-ali
苦心明·2023-08-14 16:00

VUE-发送短信验证码，60秒后点击重发

{{getCodeText}}{{warningCodeText}}exportdefault{data(){return{Timer:null,form:{code:''},getCodeisWaiting:'',getCodeText:'获取验证码',getCodeisWaiting:false,//禁止多次点击warningCodeText:''//报错信息}},methods:{getCo
你这个锤子·2023-08-13 23:20

vue-动态组件

vue动态组件用于实现在指定位置上，动态加载不同的组件，核心代码如下data(){return{componentTag:'',}},componentTag为动态加载的不同组件名称，即它可以是组件或者常规的html元素(但这些元素将被视为组件，这意味着所有的attribute都会作为DOMattribute被绑定。对于像value这样的property，若想让其如预期般工作，你需要使用.prop
禾苗种树·2023-08-13 10:47

vue-生命周期

生命周期对应四个进程----创建、挂载。更新、销毁image.png{{message}}varapp=newVue({el:'#app',data:{message:"xuxiaoisboy"},beforeCreate:function(){console.group('beforeCreate创建前状态===============》');console.log("%c%s","color:
dpeng1203·2023-08-13 07:03

Vue 自定义事件绑定与解绑

具体详情参考之前的博文：Vue-父子组件传值。vue-07-父子组件传值_vuehandler(n){}_白桃味稠鱼烧的博客-CSDN博客因为vue的数据是单向流动的
白桃味稠鱼烧·2023-08-11 17:46

vue-配置代理解决跨域

我们需要向一台服务器上上传图片，接口是"http://xxxx.xxx.xx/file/upload_img",直接向这台服务器请求上传图片将会产生跨域问题，我们这里有两种解决方式1.让后台帮忙配置,一下是node实现//允许跨域app.all('*',function(req,res,next){//res.header("Access-Control-Allow-Origin",req.hea
悠哈121·2023-08-10 11:08

Vue - 实现垂直菜单分类栏目 开箱即用

Vue-实现垂直菜单分类栏目开箱即用今天发现需要做一个专栏分类的功能，要求光标悬浮到一级专栏时展示二级专栏，当光标移出时隐藏二级专栏。
JavaGPT·2023-08-09 11:05

Vue-自定义icon实现

在项目中引入了element-ui之后，发现其内置的icon有限，无法满足项目的需求，因此需自定义icon来实现需求。在vue项目的components下新建SvgIcon目录，在SvgIcon目录下新建index.vue插入代码：import{defineProps,computed}from'vue'constprops=defineProps({icon:{type:String,requi
七七r·2023-08-09 07:19

VUE-裁剪图片

1，安装插件vue-croppernpminstallvue-cropper--save2，页面中引用插件import{VueCropper}from"vue-cropper";exportdefault{components:{VueCropper}}3，点击原图片，弹出修改头像弹窗4，点击提交修改头像弹窗整体代码如下：选择提交importstorefrom"@/store";import{Vu
你这个锤子·2023-08-09 05:59

vue-制作自动滚动效果

第一步：下载可以查看官方地址chenxuan0000npmivue-seamless-scroll-save第二步：引用importvueSeamlessScrollfrom"vue-seamless-scroll";//注册components:{vueSeamlessScroll,},第三步：使用//需要滚动的部分放在这里computed:{classOption(){return{step:
qq_2524963996·2023-08-08 22:10

vue-拦截器

第一步起步|Axios中文文档|Axios中文网安装npminstallaxios第二步所有的请求都叫http协议第三步导入后即可使用里面的方法任何一个东西都可以导出只有一个的时候只需要用default默认导出exportdefaultnewHttp(config);截图上写的错的第四步第五步第六步第七步loading第八步第九步第十步第十一步
赵同学&·2023-08-08 06:18

【转载】使用vue-cli（vue脚手架）快速搭建项目

相关答疑帖：https://github.com/vuejs/vue-
我是冯朗·2023-08-08 06:14

vue- 创建wms-web项目

vue发展历程安装vite第一步创建wms-web项目第二步打开文件夹并安装所有开发环境的依赖都可以放静态资源public>vite.svg不会重新编译成其他名字assets>vue.svg会重新编译成一个随机的名称重新编译启动第三步spa单页渲染第四步安装路由第五步加入路由需要结合标签或者，两者相同做页面的导航，选中标签时，下面也会跟随改变卸载的时候触发钩子函数里面写的都是表达式，因为它是一个方
赵同学&·2023-08-08 06:12

Vue-组件二次封装

本次对el-input进行简单封装进行演示封装很简单，就给激活样式的边框(主要是功能)本次封装主要使用到vue自带的几个对象$attrs：获取绑定在组件上的所有属性$listeners:获取绑定在组件上的所有函数方法$slots：获取应用在组件内的所有插槽1、属性传递element的input组件有很多属性，想要实现在封装好后的组件上使用el-input组件的属性，会直接传递到el-input组件
大米☋·2023-08-07 19:59

VUE-解决无法监听数组、对象的变化

一、vue监听数组的变化：1、vue能够监听数组变化的场景【1】通过赋值的形式改变正在被监听的数组；【2】通过splice(index,num,val)的形式改变正在被监听的数组；【3】通过数组的push的形式改变正在被监听的数组；2、vue无法监听的数组变化的场景【1】通过数组索引改变数组元素的值；【2】改变数组的长度；3、VUE解决无法监听数组变化的方法【1】this.$set(arr,ind
zyk_520·2023-08-07 10:16

Vue-系统登录进入首页后禁用浏览器返回键

解决方法mounted(){history.pushState(null,null,document.URL)window.addEventListener('popstate',this.goBack,false)},destroyed(){//清除popstate事件否则会影响到其他页面window.removeEventListener('popstate',this.goBack,fals
阿雷前进中...·2023-08-05 21:03

vue- form动态表单验证规则-表单验证

前言以element官网的form表单的-动态增减表单项为例讲解表单验证规则动态的功能就是v-model配合push+v-for便利来实现的我们需要熟知2个知识点prop表单验证需要跟v-model绑定的值是一样的，如果是一个数组便利的表单，那就需要绑定这个数组每一项v-model值。思路讲解代码实例             删除       提交   新增域名   重置   exportdefa
-風过无痕·2023-08-05 10:22

01_初识Vue-尚硅谷Vue笔记

想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；root容器中的代码被称为【Vue模板】;Vue实例与容器是一一对应的；真实开发中只有一个Vue实例，并且会配合着组件一起使用；{{xxx}}中的xxx要写成js表达式，且xxx可以自动读取到data中的所有属性；一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新。Documenthello，{{name}}，在{{
我要学前端！·2023-08-03 10:05

Vue-前端工程化

前后端开发模式早期开发是前后端混合开发即前后端代码写在一个工程中前端写完给后端，后端发现问题反映给前端，后端就需要懂全栈YAPI（接口在线管理平台）一个接口管理和编辑平台现在已经没有在维护了还有mock服务就是根据你编写的来生成一个网址，然后你访问的话会进行对应数据的返回如图前端工程化很多小白理解的前端工程就是这样资源没有同一管理js内部，代码复用性不高环境准备vue项目提供了一个脚手架可以快速生
小袁拒绝摆烂·2023-08-02 15:43

vue-$router.push、$router. replace、$router.go（极简）

页面跳转：1:this.$router.push({path:’./orderList’,query:{id:2,name:’xiaoming’})//可传参数路径直接这样写不用写其他的文件名会向history栈添加个记录点击回退可返回上一个页面取this.$router.query.id2:this.$router.replace({path:’./orderList’,query:{id:2,
木鱼儿猴子·2023-07-31 05:54

Vue-基础

指令重要指令v-forv-ifv-else-ifv-elsev-bindv-onv-model一般指令v-showv-textv-html不重要的指令v-oncev-cloakv-pre生命周期生命周期中包含了四个过程创建挂载更新销毁beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestroydestroyed配置计算属
uhv_fc0e·2023-07-30 14:20
上一页 2 3 4 5 6 7 8 9 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他