在用npm run build 打包的时候，正常img标签中的src图片路径和css中的图片路径是可以正常识别的，但是在打包js获取的图片路径时，打包后无法找到图片，原因是js动态生成的路径无法被url-loader解析到，如果你去build，会发现图片甚至不会打包输出到dist目录（webpack是按需打包的）。如果你是vue-cli初始化的项目，解决的办法：第一步，把图片放到src同级的static目录（build/build.js文件中有一段代码是把static目录拷贝到dist/st...
1. 前端请求（recommend.js）；import axios from ‘axios‘export function getDiscList() {const url = ‘/api/getDiscList‘const data = Object.assign({}, commonParams, {platform: ‘yqq‘,hostUin: 0,sin: 0,ein: 29,sortId: 5,needNewCode: 0,categoryId: 10000000,rnd: Math.random(),format: ‘json‘})return axios.get(url, {params: data}).then((res) => {return Promise.resolve(res.data)}) } 2. 手动代理请求（...
vue 获取当前屏幕的宽度，图片等比例缩放这个是一个背景图，点击对应的圆圈就会出现一个蒙层上面显示详情，但是只要当前窗口大小变化了，因为我的蒙层大小是固定的px，所以不会变，就不在图片对应的位置了我们要绑定样式style，等后面要根据当前的屏幕来给蒙层动态设置宽高<div class="main"><div class="content"><div class="street"><router-link:to="{name:‘/streetDetails‘,query:{code:‘310151101‘}}":style="style01"cl...
/*** 获取当前日期* @returns {string}* @Example getNowTime(‘-‘)*/getNowTime(str){let nowDate = new Date();let y = nowDate.getFullYear();let m = nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMonth() + 1) : nowDate.getMonth() + 1;let d = nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate.getDate();if(str){return y + str + m + str + d;}else{return y + ‘年‘ + m + ‘月‘ + d + ‘日‘;}},/*...
主要代码是这两坨this.nextTick(function(){alert(‘数据已经更新‘)});this.$nextTick(function(){alert(‘v-for渲染已经完成‘)})随便丢在哪个方法里，都Okay,例如一个POST请求返回的成功函数中,赋值后用该代码,就可以拿到渲染完成事件原文：https://www.cnblogs.com/ncellit/p/10818766.html
let sql = `select consignor_Id from Base_Agent_Rate where agent_Id = ? group by consignor_IdUNION ALLSELECT consignor_Id FROM Base_Agent_RateTwo WHERE agent_Id =? group by consignor_Id`;let agentRate = await this.dbRead.query(sql, [userInfo.consignor_Id, userInfo.consignor_Id]); --- 多条let consignorids = agentRate.map(item => item.consignor_Id);where = {consignor_Id: In(consignorids)} 原...
在 app.vue中的created函数中写如下代码：localstorage和sessionStorage都可以//在页面加载时读取sessionStorage里的状态信息if (sessionStorage.getItem("store") ) {this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))} //在页面刷新时将vuex里的信息保存到sessionStorage里window.addEventListener("beforeunload",()=>{sessionStorage.setItem("store",JSON.string...
Vue获取组件的一些方法this.$refs.xxx给标签绑定ref属性，获取的是当前DOM对象给组件绑定ref属性，获取的是组件实例对象this.$parent获取当前组件的父组件,为一个对象this.$root获取当前组件的根组件,为一个对象this.$children获取当前组件的子组件,为一个数组vue-cli(vue脚手架)的使用1.安装npm install -g @vue/cli //必须先安装了node.js -g表示全局环境 vue -V // 可查看当前vue-cli的版本 2.创建项目Vue CLI >= 3 和旧版使用...
子组件<template><a class="getvalidate":class="{gray: (!stop)}"@click=‘clickHandler‘>{{ stop ? ‘获取验证码‘ : `（${mytimer}）秒后重新获取` }}</a> </template><script> export default {name: ‘getvalidate‘,data () {return {stop : true,mytimer: this.timer,Interval: null,}},methods: {clickHandler (e) {if (this.stop) { // 调用外部绑定的倒计时，并且给它开关this.$emit(‘click‘, this.startTimer);}},up...
vue3用composition api 取代了之前的options api，并且加强了支持typescript，另代码可读性和可改性更强了，用习惯了setup函数真的可以说句，真香。但是不可避免的，需要趟一些雷，比方说element-plus的表单验证功能。由于setup里取消了this获取实例，就突然变得不知所措。以下是我填坑的一些经验。先看element-plus官方文档中的验证写法。methods: {submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) ...
把最近学习vue的一些知识点记录下来，今天记录一下Vue通过vue-resource连接数据库接口渲染列表和添加删除功能首先我们得引入vue的版本文件和vue-resource.js,注意：vue-resource的引入要在vue版本文件之后然后把列表页面写好，然后在methods里写一个获取列表数据的方法： getAllList() { //获取所有的品牌列表this.$http.get(‘api/getprodlist‘).then(result => {var result = result.bodyif (result.status === 0) {this.lis...
Vue获取dom对象在js和jq中我们都能获取dom对象例如// 获取id=1的div标签 <div id=d1>dom对象</div>// js语法 let ele = document.getElementById(‘d1‘) // jq语法 let ele = $(‘#d1‘)那么在vue中也有实现该功能的语法，使用方法，在vue组件中，给目标标签添加上ref属性，然后在vue组件实例中调用方法去获取dom对象：<body> <div id=‘app‘>// 给目标标签添加上ref属性并赋值<div ref=‘mydiv‘></div>// 给按钮绑定点击事件触...
1、ref获取Dom<!--ref除了引用元素之外，还可以引用组件以及组件方法、数据--><h1 ref="h1">哈哈</h1>引用：this.$refs.h1.innerText2、案例<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!--cdn镜像快速导入Vue包--><script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script> </head> <body> <!--ref除了引用元素之外，还可以引用组件以及组件方法、数据--> <div id="app"><inpu...
Vue,品牌列表案例（仅添加,删除，搜索，全局过滤器，私有过滤器，日期填充，自定义按键修饰符，全局自定义指令文本框获取焦点，bind函数拿到传递的颜色值，自定义私有指令和指令函数的简写） p34 p35 1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title></title> 6<script src="../js/vue.js"></script> 7<link rel="stylesheet" type="text/css" href="../css/bootstrap.css"/> 8</head> 9<body> 10<di...
原生的下拉框用vue获取值双向绑定简直不要太好用，Duang的一下就行了<div id="datePrice"><select v-model="selected" id="dataSel" class="dataSel" v-on:change="change"><option v-for="item in dateList" v-bind:value="item.date" v-text="item.date"></option></select></div>js:var VMdate=new Vue({el:‘#datePrice‘,data:{selected:‘请选择日期‘,serviceType:0,dateList:[ {‘date‘:‘2016-11‘ }, {‘date‘:‘2016-...