vue笔记
KeroroLX
这个作者很懒,什么都没留下…
展开
-
v3+ts 中定义全局方法
types文件夹下新建 global.d.ts。在util.js定义方法。扩展类型,否则打包报错。2)script 中使用。原创 2023-02-15 14:31:51 · 379 阅读 · 0 评论 -
loaderContext.getResolve is not a function
原因:系统安装的node版本与项目的node-sass sass-loader 版本不对应的原因引起的。这是官网的node与node-sass的对应本人环境安装的node是12 的版本,然后sass-loader对应的是7.1.0所以下载:npm i [email protected] [email protected] --save-dev最后运行成功。...原创 2020-07-16 16:01:15 · 524 阅读 · 0 评论 -
实现点击input软键盘出现搜索按钮
需求:点击搜索框的时候,弹出的软键盘上出现“搜索”按钮例:<form action="javascript:return" > <input @keyup.13="点击搜索触发方法" type="search" v-model="key" placeholder="搜索您想要的商品"/></form>实现过程可能出现的问题:1 input[type=search]不出现搜索按钮原因可能有:1.1 没有用form表单包1.2 form 没有带ac原创 2020-06-05 15:01:23 · 1311 阅读 · 0 评论 -
node与node-sass版本导致的运行报错:Module build failed: Error: ENOENT: no such file or directory, scandir...
原因:node-sass与你系统装的node版本不匹配,重新下载node-sass就好。npm rebuild node-sass然后重新运行就好了。实际上报错里面也有提示的:原创 2020-06-03 10:20:30 · 3363 阅读 · 0 评论 -
微信小程序内嵌H5缓存的问题
问题:H5时常更新代码,但是由于微信小程序web-view的缓存机制,导致一些用户能读到最新的代码,有些用户不能解决思路:1 如果H5项目访问方式是 xxx/xxx.html的方式的话,加随机数就好了,原理同图片加随机一样2 如果H5项目访问方式是 xxxx/#/a 的方式的话,#后面加随机是没有用的,这种可以使用版本号处理,加了版本号的路径大概如下:xxxx/version_1/#/a到这里很多人会问,那我是要每次都见一个新的路径吗?其实不是,这里的版本号一般是让运维处理,即 模糊匹配原创 2020-05-09 17:50:29 · 2768 阅读 · 1 评论 -
vue使用vue-clipboard2
准备npm i vue-clipboard2引入main.jsimport VueClipboard from 'vue-clipboard2'VueClipboard.config.autoSetContainer = trueVue.use(VueClipboard)点击div复制相应内容<template> <div v-clipboard:cop...原创 2020-04-09 22:07:33 · 855 阅读 · 0 评论 -
vue-awesome-swiper基础使用
vue-awesome-swiper 自定义索引样式 <div class="carousel_1"> <h3>正常的点索引</h3> <swiper :options="swiperOption_1"> <swiperSlide> <a href="ja...原创 2019-11-18 14:29:31 · 389 阅读 · 0 评论 -
keep-alive使用注意事项
1 deactivated的执行问题现象:keep-alive的列表页 跳转到 不需keep-alive的菜单页时,selectGoodsList.vue deactivated(){ console.log("list-deactivated"); },menu_page.vuemounted(){ console.log("menu-...原创 2019-10-12 10:31:45 · 220 阅读 · 0 评论 -
项目优化及vue项目优化减少宽带的占用
常用优化:1 文件压缩项目上线记得做文件压缩。文件压缩主要是 html js css 的压缩2 静态资源的CDN引用静态资源预先放到不占带宽的服务上,开发以及生产时,静态资源指向CDN的方法,这样访问页面时,静态资源快,而且不占带宽。为了处理缓存的问题,后面记得加随机数;但是上面的这种方式会造成不管图片有没有更新,每次刷新都会重新请求静态资源,因此在可行的情况下,...原创 2019-07-12 10:28:18 · 268 阅读 · 0 评论 -
搭建vue项目及基本配置(vue+webpack+axios)
前期准备全局安装 node vue-cli初始化项目使用vue的脚手架直接在本地初始化项目方法:命令行:vue init <template-name> <project-name>template-name选项为模板名称,vue-cli官方为我们提供了5种模板。webpack-一个全面的webpack+vue-loader的模板,功能包括热加载,linti...原创 2019-05-08 15:44:01 · 1485 阅读 · 0 评论 -
vux的cell怎么添加点击事件
vux中的cell绑定click,点击发现触发不了例: <group> <cell title="联系客服" is-link> <img slot="icon" src="../../assets/images/account/lianxikefu.png"> </cell> ...原创 2019-04-16 16:55:50 · 2753 阅读 · 2 评论 -
封装vue组件的那些事
自定义组件state动态赋值给父组件state例:一个输入框组件,需要组件的state能一直同步给父组件的state自定义组件 commodityNameInput:<template> <input class="com_commodityNameInput" type="text" v-model="endValue" placeholder="商品名称">...原创 2019-08-09 10:30:53 · 145 阅读 · 0 评论 -
https链接在浏览器或微信中打开,https变http的问题
问题:在浏览器或微信中,访问https://gate.demo.cn/web_wx/demo_test,结果页面地址变http://gate.demo.cn/web_wx/demo_test这个问题有很多现象:1 微信中访问,https变http导致,支付的时候失败,说未注册2 导致不同协议两个页面之间本地数据共享失败解决:地址后面再加一斜杠,如下https://ga...原创 2019-04-12 10:41:50 · 8522 阅读 · 3 评论 -
vue: command not found
$ vue -Vbash: vue: command not found意思大概就是没有vue这个命令。这种情况在系统设置中配置一下环境变量就好了然后关闭之前的命令窗口,重新打开,vue命令就有效了...原创 2019-05-07 17:24:26 · 3482 阅读 · 0 评论 -
vue中,微信支付报"当前页面的URL未注册"
这个问题比较多样,我这里的问题现象是这样的:在微信后台配置的地址是:https://web.ujinbi.com/bps_xjyx/【这里注意,微信支付配置的地址要’/'结尾】这里展示一下几个重要页面地址:首页:https://web.ujinbi.com/bps_xjyx/#/youxaun商品详情:https://web.ujinbi.com/bps_xjyx/#/good_de...原创 2019-05-20 16:55:19 · 4738 阅读 · 6 评论 -
vue使用vux(配置vux常见问题)
准备:首先,通过脚手架先初始一个项目test然后运行没问题。配置:下载 npm i vux使用一个按钮这个组件,为了方便在vue中的使用,将其配置为公共的组件使用:在mian.js 中:import {XButton } from 'vux'Vue.component('x-button',XButton );在home.vue中使用x-XButton;(使用方式文档中...原创 2019-06-17 10:23:14 · 1300 阅读 · 0 评论 -
vue react 禁止代码规范检查
在配置文件webpack.base.config找到 eslint 字段,将配置注释,重新运行原创 2019-07-09 10:18:14 · 987 阅读 · 0 评论 -
react 与vue开发中常见的不同(持续整理中...)
引入图片和背景react:import logo from './logo.svg';...<img src={logo} className="App-logo" alt="logo" />vue:<img :src="logo" className="App-logo" alt="logo" /><div v-bind:style="{ 'back...原创 2019-08-21 15:38:19 · 387 阅读 · 0 评论 -
vue配置本地代理解决跨域问题并配置不同环境改变target
我的vue搭建用的脚手架。首先,在config下新建一个文件proxyConfig.jsmodule.exports = { proxy: { '/api': { target:'http://www.jinbi.com', // 需要跨域的接口ip(域名)http://xxx changeOrigin:true,//是否跨域 pathR...原创 2018-12-18 10:33:37 · 3859 阅读 · 1 评论 -
vue单页面,打开新页面时怎么让页面自动滚到顶部?
在app.vue中,update的生命周期中加: updated() { window.scroll(0, 0); },原创 2019-03-13 17:41:57 · 2789 阅读 · 0 评论 -
使用vux时,有时遇见 Invalid prop: custom validator check failed for prop "type".错误
<x-number title="数量" v-model.trim="orderDetail.quantity"></x-number>... export default { ... data: function () { return { orderDetail:{ ...原创 2018-12-24 15:55:13 · 5261 阅读 · 0 评论 -
vue相关运行打包遇见的常见错误
运行:npm run dev 出现下面错This is probably not a problem with npm. There is likely additional logging output above.Error: listen EADDRNOTAVAIL 111.166.1.29:8081 at Object._errnoException (util...原创 2018-12-29 14:16:09 · 1601 阅读 · 0 评论 -
mpvue使用vue初始化项目失败:vue-cli · Failed to download repo mpvue/mpvue-quickstart: connect ETIMEDOUT 207.97
按照mpvue文档,初始项目时失败:$ vue init mpvue/mpvue-quickstart my-project vue-cli · Failed to download repo mpvue/mpvue-quickstart: connect ETIMEDOUT 207.97.227.239:443 原因是上面的:‘207.97.227.239:443’连接失败;...原创 2018-12-29 10:58:49 · 3188 阅读 · 3 评论 -
js点击 收起 查看全部
<ul id='listUl' class='clearfix'> <li v-for='item in listOption.listData'> <div class="commentMsg meddleFontSize"> <p class="Pellipsis2 webkitOrient...原创 2018-12-27 16:55:26 · 1771 阅读 · 0 评论 -
vue报警告:Duplicate keys detected: '0'. This may cause an update error.
我遇见这个问题原因是两个v-for元素处在同一个父元素下,分开就好了;问题写法:<div> <div v-for='item in list11'>11</div><div v-for='item in list22'>22</div></div>改:<div> &...原创 2018-12-07 17:21:08 · 4955 阅读 · 1 评论 -
This is probably not a problem with npm. There is likely additional logging output above.
Vue运行的时候报错:npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! [email protected] dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`npm ERR! Exit status 1npm ERR!npm ER...原创 2018-11-20 17:48:50 · 2535 阅读 · 1 评论 -
mpvue用promise封装小程序请求(同样使用于vue的项目)
import qs from 'qs'let api = { //域名配置 webUrl: "默认ip", post:function(vueObj,options){//post请求 wx.showLoading({ title: '加载中' // 数据请求前loading }) var ipName=''; !options.ne...原创 2019-01-03 11:29:35 · 791 阅读 · 0 评论 -
关于路由参数不断的切换导致返回历史无法一次返回到"上一个路由"的问题
1 比如第一种需求,个人中心进入订单页,由于我需要带参数到订单页时处理不同的状态,所以我这里用路由带参数,返回时我应该直接返回个人中心,而不是按照浏览器的历史一直后台,解决:watch:{ '$route':function(){ history.pushState(null,null,'/#/account'); },},解决方法就是订单列表中每次路由的改变我们都要将...原创 2019-03-21 16:18:07 · 586 阅读 · 0 评论 -
vue 随记
在父组件created中调用子组件的方法,然后一直报找不到方法。 问题,这里的调用应该在渲染后,所以可在mounted中调用。列表渲染背景图v-bind:style="{ 'background-image': 'url(' + item.giftImg + ')'}"父子组件互相通信:https://blog.csdn.net/github_38928905...原创 2019-03-20 18:42:37 · 269 阅读 · 0 评论 -
vue中,怎样控制app.vue中的请求结束后子路由里面才请求?
通过v-if控制抽象路由:<transition> <router-view v-if="isRouter"/></transition>...data:function () { return{ isRouter:false }},....created(){ 【app中的逻辑请求,成功结束后,改变is...原创 2019-03-07 16:36:37 · 2503 阅读 · 1 评论 -
vue路由参数发生变化,但是页面不刷新的问题(vue监听路由参数变化重新渲染页面)
例:地址1:"https://xxx/#/autoPage?channelCode=xuezhiyuan_jc111"地址2:"https://xxx/#/autoPage?channelCode=xuezhiyuan_jc222"问题现象:当从第一个调到第二个地址时,页面内容不进行刷新,依然停留在地址1的内容,但是地址栏会变化为地址二。解决方式:vue 的key htt...原创 2019-03-14 14:35:56 · 9549 阅读 · 3 评论 -
vue时间戳过滤filters(vue过滤filters的使用)
<ul class="list"> <li class="clearfix listItem" v-for="(item,index) in listData" :key="index"> <div class="fl"> <p class="title meddleFontSize">...原创 2019-02-02 10:26:57 · 2443 阅读 · 0 评论 -
elememtUI 的switch组件默认不起效
... <el-form-item label="是否显示:" prop="IsShow"> <el-switch v-model="editForm.IsShow" active-color="#13ce66" active-value="1"原创 2019-01-14 15:18:21 · 4493 阅读 · 13 评论 -
vue打包出来有很多map文件使得包很大,怎么去掉?
config/index.js找到 "productionSourceMap",将值改为false就好原创 2019-01-08 18:33:57 · 3368 阅读 · 3 评论 -
vue常用的父子组件通信,非父子组件通信
需求1 【在父组件中触发子组件的方法改变子组件中的值,取子组件的值: ---$refs】//父: <router-view ref='listCom'></router-view> methods: { fatherFn:function(){ this.$refs.listCom.sonFn('q...原创 2018-09-29 15:11:05 · 314 阅读 · 0 评论