Vue
Vue实战教程
hero_th
当打之年,感恩一切!
展开
-
vue3设置vscode的代码片段模板
【代码】vue3设置vscode的代码片段模板。原创 2023-02-11 21:37:24 · 256 阅读 · 0 评论 -
vite 打包页面空白
根据vite 官网的打包配置教程这里需要着重强调一点 问题/ 跟 ./这两个东西 完全不是用一个路径Solution将 vite 里面的配置文件是 vite.config.js在配置里写上 base: './' 即可解决。原创 2021-10-04 22:38:03 · 8425 阅读 · 6 评论 -
element-plus Radio 单选框点击失效 无法切换问题
原因就是el-form 表单中绑定的ref 跟v-model 相同。删除掉绑定的ref 就ok了。现在el-radio-group 可以正常切换了原创 2021-10-02 21:16:02 · 2415 阅读 · 0 评论 -
Property “pageNumber“ was accessed during render but is not defined on instance.
今天在用element-plus 开发的时候,遇到控制台的一个警告。虽然页面正常显示,但是作为一名严格要求自己的开发人员来说,尽量能解决的问题,还是解决一下吧。Solution问题就出在这两个变量,他俩报错了。然后这两个变量我是定义在reactive 里面重点来了,重点来了!!!!需要加上对象的名字,然后才能正常使用对象中的属性值!!!如果觉得对你有帮助,请给博主点个赞叭!...原创 2021-10-02 14:06:19 · 5934 阅读 · 0 评论 -
vue3 中 ref 和reactive 的区别
reactive<template> <div @click="handleFun">{{state.data}}</div></template><script setup>import {reactive} from 'vue';const state = reactive({ data : 1})const handleFun = ()=>{ state.data = 2}</script>原创 2021-10-02 13:54:17 · 1228 阅读 · 0 评论 -
vue3 使用element-plus 表单校验
vue3 没有this!vue3 没有this!vue3 没有this!template<el-form label-position="top" ref="loginformRef" label-width="100px" :model="loginform" hide-required-asterisk> <el-form-item prop='username' label="username" :rules="[ { .原创 2021-09-28 21:28:38 · 5953 阅读 · 3 评论 -
vite+vue3 整合vue-router4和vuex4
vue-router 41.installationyarn add vue-router@4 -Snpm i vue-router@4 -S2.src/router/index.js// router/index.js文件 import { createRouter, createWebHashHistory } from 'vue-router' // !!!注意:.vue不能省略,否则会报错,项目不能运行,如下错误 /* index.js:3 GET http://lo原创 2021-09-27 14:44:30 · 910 阅读 · 0 评论 -
Vite 配置项目别名-最新版
先来看一下官方文档的说明看完之后,我也不知道怎么回事。说了和没说一样。vite.config.jsimport { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import path from 'path' //引入path// https://vitejs.dev/config/export default defineConfig({ resolve:{ alias:{ "@"原创 2021-09-27 13:17:36 · 541 阅读 · 0 评论 -
vue 异步更新队列 Vue.nextTick(callback)
Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发,只会被推入到队列中一次。例如,当你设置 vm.someData = ‘new value’,该组件不会立即重新渲染。当刷新队列时,组件会在下一个事件循环“tick”中更新。为了在数据变化之后等待 Vue 完成更新 DOM,可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用。.原创 2021-09-25 11:02:16 · 259 阅读 · 0 评论 -
axios get请求添加去缓存
axios 中的get 请求浏览器会产生缓存浏览器对于 GET 请求会将请求结果缓存起来,而 POST 不会。其中更具体的细节是:Chrome 和 Firefox 会检测 GET 请求的如果是静态资源才会缓存,如果是数据则不会缓存。IE 浏览器则会将 GET 请求全部缓存,不会检测请求的是什么。这样的场景很多,例如我们添加或修改数据成功后,立马调用列表查询接口,因查询接口是get请求,产生了缓存,响应数据还是之前数据,并没有新增或修改后的数据,给人感觉像是添加或修改失败,这显然是不合理的,那么原创 2021-09-23 09:30:01 · 1273 阅读 · 0 评论 -
vue element ui 样式修改无效
最近在使用vue 搭配element ui进行开发的时候,遇到el-dialog 样式修改无效的问题。搁置了我好长时间。Solution One将样式写在全局中,如App.js<style scoped>/* 本地样式 */.aritle-page{ //你的命名空间 .el-tag { //element-ui 元素 margin-right: 0px; }}</style>Solution Two使用深度作用选择器如果你.原创 2021-09-16 19:48:06 · 775 阅读 · 0 评论 -
vue中 点击二维码刷新图片(src不变)
template<img @click="changeVerifyUrl" :src="verifyCodeUrl" alt="" style="height:32px;cursor:pointer;">script思路:在url后面拼接上一个问号,然后再加上Math.random()就OK了data(){ return { verifyCodeUrl:'http://xxx/common/verifyCode', }},methods:{ changeVerifyUr原创 2021-06-18 21:27:41 · 1455 阅读 · 3 评论 -
uniapp/vue 组件之间的传值
父组件向子组件传值1.父组件(传递)<template> <div> <child :title="title"></child> </div></template><script>export default{ data(){ return { title:"hello child!" } }}</script>2.子组件(接受)<template>原创 2021-05-20 21:47:04 · 457 阅读 · 1 评论 -
ivew ui 中使用Menu组件时导航菜单 active-name 无法动态激活问题
博主在网上查阅了多数资料后,无果而返。有什么说动态绑定active-name 的,还有什么用官网的updateActiveName 手动更新的,都不行!!!最后还是在B站跟着黑马的那个element ui 电商管理系统写的,成功!!1.给Menu 中的active-name 动态绑定路由2…给点击导航菜单绑定的点击事件中,将获取的路径储存到sessionStorage里面,然后给动态的路由重新赋值methods: { selectMenu(name){原创 2021-04-25 14:39:26 · 676 阅读 · 0 评论 -
Vue 中使用element ui 自定义邮箱和手机号的效验规则
验证邮箱的规则var checkEmail = (rule, value, cb) => { //验证邮箱的正则表达式 const regEmail = /^([a-zA-Z0-9_-])+@([a-ZA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/ if(regEmail.test(value)) { //合法的邮箱 return cb() } cb(new Error('请输入合法的邮箱'))}//然后在formrules中添加效验属性email: [原创 2021-04-06 16:00:42 · 783 阅读 · 0 评论 -
Vue 作用域插槽
作用域插槽<div> <template slot-scope="props"> <!-- 使用其渲染方式 --> <h1>{{ props.value }}</h1> </template></div><div> <template slot-scope="scope"> <!-- 使用其渲染方式 -->原创 2021-04-06 15:04:40 · 76 阅读 · 0 评论 -
Vue中无法更改element ui组件样式问题
在项目中引入element中的calendar组件,原生的组件内容格子太大,非常不美观右键点击检查,找到日历格子的那个div,发现高度为85px,显然太高了。直接在当前Vue组件样式中修改是无效的,因为在当前代码页面中根本没有这个div(无效)在main.js中引入全局样式表(global.css),然后加入代码,修改为你想要的高度即可修改成功...原创 2021-04-05 10:25:39 · 922 阅读 · 0 评论 -
Vue router路由懒加载
正常的Vue router//导入文件import Foo from './Foo.vue'//注册挂载const router = new VueRouter({ routes: [{ path: '/foo', component: Foo }]})这种情况下,当访问较大的网站时,点击跳转别的页面,网页加载会比较慢路由懒加载//路由懒加载const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.原创 2021-04-05 09:31:21 · 163 阅读 · 0 评论 -
在Vue项目中添加vue router
1.首先安装vue routernpm install vue-router -S2.在src目录下创建router文件夹,在其下面创建index.js文件,添加以下代码import Vue from 'vue';import VueRouter from 'vue-router';Vue.use(VueRouter)const routes = [ { path: '', component: '/login' }, ]const router = new VueRout原创 2021-03-30 22:21:53 · 2022 阅读 · 0 评论 -
Vue项目部署到服务器上路由无法访问的问题
打开router 文件夹下面的index.js文件将路由模式由’history’改成’hash’重新渲染项目 就OK了原创 2021-03-27 22:31:35 · 2827 阅读 · 2 评论 -
axios 拦截器的基础使用
axios 请求拦截const instance = axios.create({ baseURL:'', timeout:5000,})instance.interceptors.request.use(config => { console.log(config); //1. 比如config中的一些信息不符合服务器的要求 //2比如每次发送网络请求时,都希望在界面中显示一个请求的图标 //3.某些网络请求(比如登录(token)),必须携带一些特殊的信息 return原创 2021-01-07 16:17:05 · 251 阅读 · 0 评论 -
Vuex actions 异步操作基础
actions(异步操作)state: { info:{ name:'xxx', age:xxx }},mutations:{ updateinfo(state) { setTimeout(() => { state.info.name="xxx" },1000) }},actions:{ aupdateinfo(context) { // context相当于$s原创 2021-01-07 10:32:35 · 1000 阅读 · 0 评论 -
Vuex getters 基础使用
getters简单平方算法<h2> {{$store.getters.powerCounter}}</h2>const store = new Vuex.Store({ state: { counter:1000, }, getters:{ powerCounter(state){ return state.counter*state.counter; } }})数组管原创 2021-01-07 10:31:35 · 90 阅读 · 0 评论 -
Vuex mutations的详细解读
mutations(同步函数)mutations简单应用mutations的传参<script> methods:{ addCount(count) { this.$store.commit('incrementCount',count) }, addStudent(){ const stu={id:xxx,name:'xxx',age:xxx} this.原创 2021-01-07 10:18:01 · 316 阅读 · 0 评论 -
使用Vue cli 来快速开发并打包封装项目教程
安装Vue CLI使用npm在全局下安装vue cli输入以下指令即可:npm install -g @vue/cli等待几分钟后,然后接着输入以下指令,来检查cli 的版本vue --version快速开发(笔者以下用的编辑器是vs code,其他编辑器类似)1.随便在桌面上新建一个文件夹,并命名(test)。将他拖到vs code中打开。2.鼠标移动到test文件夹上,右边点击新建文件夹,并命名(demo)。3.鼠标移动到demo文件夹处,鼠标右键点击,再点击在终端打开。原创 2020-12-21 14:08:03 · 880 阅读 · 3 评论 -
Vue 过渡&动画
过渡动画淡入淡出<style> .fade-enter-active,.fade-leave-active { transition: opacity .5s; } .fade-enter,.fade-leave-to { opacity: 0; }</style>//属性name的值与上面的css样式属性中的名字一一对应<transition name="fade"> //将需要过渡的元素包裹起来 <原创 2020-12-21 10:41:52 · 295 阅读 · 3 评论 -
Vue基础及一些常用指令
Vue基础第一个Vue程序<div id="app"> {{massage}} //显示为Hello Vue!</div>var app = new Vue({ el:'#app', data:{ message:'Hello Vue!' }})el:挂载点1.el选中的元素的内部与data中对象匹配的属性名都会被渲染<div id="app"> {{massage}} //显示为Hello Vue! &原创 2020-12-20 16:18:32 · 193 阅读 · 0 评论 -
Vue中,v-show与v-if的区别
v-show根据表达式的真假,切换元素的显示与隐藏<div id="app"> <img src="地址" v-show="true"> <img src="地址" v-show="isShow"> <img src="地址" v-show="age>=18"></div>var app = new Vue({ el:"#app", data:{ isShow:false,原创 2020-12-20 11:04:55 · 686 阅读 · 1 评论