Vue项目
独孤九溅
百年菜鸟
展开
-
Vue3 动态添加路由刷新后出现404解决方案
vue3 动态添加路由,刷新页面后出现404的完美解决方案原创 2024-06-05 10:30:24 · 535 阅读 · 0 评论 -
手动实现v-model功能(数据双向绑定)
手动实现数据双向绑定原创 2023-02-14 10:37:21 · 399 阅读 · 0 评论 -
vue + ElementUi 使用多语言(包含element-ui切换多语言)
1.安装vue-i18n(切记:vue2x的版本,一定要安装8.9.0以下的版本)npm install vue-i18n@8.9.0 --save2.在src中,新建lang文件--src + lang + index.js + en_us.js + zh_cn.js3.index.jsimport Vue from 'vue'import Element from 'element-ui'import VueI18n from 'vue-i18n'import loca原创 2022-04-06 18:50:19 · 2896 阅读 · 2 评论 -
记录Vant中 scrollToField的使用
我们在使用vant-ui的form表单时,期望校验错误时能及时滚动到第一个错误的位置,这样便可提升用户体验,在v2.8.3版本后,Vant-ui提供了这样一个API:scrollToField,如下代码<template> //1. 需要在在van-form上添加ref属性,方便后面调用 //2. 每个组件,比如 van-field需要添加name属性,必须要英文 <van-form ref="form" @submit="onSubmit" @onFailed="onFail原创 2022-03-28 18:58:09 · 3676 阅读 · 5 评论 -
关于Element Popconfirm 气泡确认框问题
最近在用到elementUi(版本2.13.2)中的Popconfirm气泡确认框,在官方文点击确认按钮的回调事件中使用onConfirm事件,但是一直未执行到此方法经过查阅源码,得知如下:后来改用 <el-popconfirm title="确定移除吗?" @confirm='confirm()'> <el-button slot="reference" >移除</el-button原创 2021-09-30 14:34:44 · 1684 阅读 · 1 评论 -
Vue 3.0安装
vue3.0 beta 已经出来了,很多小伙伴已经迫不及待的想去体验下,接下来我们就先安装吧;1.vue3.0的脚手架vue-cli 需要node.js 8.9以上的版本,小伙伴可自行查看自己的node版本;node -v我的使用的是v12.16.22.安装vue-cli;cnpm install @vue-cli -g3.检查下当前的vue的脚手架版本vue --version我这边的是vue/cli 4.5.84.初始化vue3.0项目vue create vue 03然后原创 2020-10-31 10:12:23 · 1837 阅读 · 0 评论 -
Vue 实现骨架屏(skeleton)
Vue实现骨架屏的步骤:1.安装骨架屏插件:npm install vue-skeleton-webpack-plugin2.由于骨架屏插件依赖服务端渲染,再安装vue-server-renderernpm install vue-server-renderer3.在src>components新建skeleton目录,里面创建index.vue跟entry.skeleton....原创 2020-03-26 10:59:37 · 9887 阅读 · 3 评论 -
解决ElementUi树结构默认选中的事件(最完美的解决方案)
最近做一个后台管理系统,使用了ElementUi的el-tree组件,并且带有选中效果的,当对数据进行修改操作时,需要将原有的选中数据渲染到树结构中,data以及default-checked-keys的数据都是从后台获取的数据,所以在进行修改操作时,并没有按照预期的能把选中的效果体现出来,后来一想才发现,原来渲染el-tree前,就得拿到default-checked-keys的选中数据,否则默...原创 2020-03-19 14:36:16 · 13200 阅读 · 6 评论 -
Vue如何最简单的实现tab功能
我们在开发中,尤其是在移动端,像tab这种需求肯定是经常遇到,那么怎么简单的实现这么一个功能呢?很多童鞋肯定会说着很简单,当点击的或者所在的页面图片换成点击效果的图片,然后每个部分复制一份,这样是可以实现,但是很麻烦。下面我介绍一种简单的实现一种更简单的方法<template> <ul class="nav"> <li v-for="(item,...原创 2019-08-20 23:27:53 · 570 阅读 · 0 评论 -
vue 从webpack 3X升级到 webpack 4.X全过程
当前项目我是采用的webpack3.6 应用的是vue-cli安装的项目,由于webpack4官方尚未出脚手架,所以我们升级到webpack4的话需要手动升级。我是按照如下步骤去升级的。备注:我用的npm的版本是6.4.1;你们可以在终端执行npm -v 查看当前npm版本。1.首先升级webpack(先卸载之前的webpack)npm uninstall webpack卸载完完后 再...原创 2019-08-10 14:04:50 · 3111 阅读 · 3 评论 -
vue封装的组件如何在调用时绑定click事件
我们在开发中会封装许多的通用的组件,那么如何封装好一个组件时,在调用的时候绑定click事件呢?1.child组件<template> <div class="child" @click="$emit'childClick',123) /> //说明:第一个参数:childClick ,是事件名,在调用的时候需要用到,第二个参数123,是你在调用的时候传...原创 2019-08-13 21:29:25 · 3909 阅读 · 2 评论 -
Vue组件通信
vue组件的关系分为3种:1.父子组件2.兄弟组件3.嵌套多层的组件A父子组件父组件:用:age的方式把age传给子组件,用v-on的方式租接收子组件传来的参数<template> <div class="father"> <Child :age='age' v-on:addAge='addAge'/> <...原创 2019-06-26 21:59:09 · 177 阅读 · 0 评论 -
webpack4搭建vue项目(完整版本)
最近研究了下webpack4,顺便用webpack 4搭建了一个vue项目,搭建过程如下:1.安装node,然后使用npm init (初始化项目);npm init2.npm i webpack vue vue-loader,同级创建src(建app.vue及index.js文件)、config(建webpack.config.base.js、webpack.config.dev.js、...原创 2019-06-14 20:16:56 · 8156 阅读 · 2 评论 -
vue使用v-model封装组件
我们使用Vue开发项目,如何使用v-model来封装组件呢?调用组件:如果改进之处,请各位大神指正,谢谢!原创 2019-05-26 16:46:10 · 4875 阅读 · 0 评论