【项目遇到的小问题（关于vue-cli中js点击事件不起作用和iconfont图片下载页面css样式乱的解答）】的更多相关文章

项目遇到的小问题（关于vue-cli中js点击事件不起作用和iconfont图片下载页面css样式乱的解答）

 第一个:关于vue-cli中js点击事件不起作用 在vue的methods方法queryBtnFun()中拼接html和click操作事件的时候,发现点击事件一起未起作用: 后来发现是DOM执行顺序的原因: 因为methods里的代码是编译后在浏览器里运行的 第二个:iconfont图片下载页面css样式乱的 在项目刚搭建的时候,我在iconfont上建立了一个图标项目库,把常用的几个图标添加下载到项目中,后来到项目中期的时候,有几个图标要新加入, 在iconfont添加上,下载下面,使用的时…

记录Vue和Jquery混合开发中关于点击事件的一个bug

最近比较急的接手了公司的微信服务号项目,采用的技术栈主要是jq和vue.在项目中之前碰见过jq写的$().on('click',function(){})点击事件不起作用,只能写在vue实例中的methods中,然后用@click去监测. 一直困惑的是这个BUG在不同的页面中有时有,有时没有,而且出现的情况很少.今天工作闲了一点,于是乎专心去琢磨这个问题. 网上百度到的解决方案是这样的,如下图: 于是乎自己试了一下确实可以.代码如下图: 但是回过头来看项目就很奇怪,说的写在JQ的dom加载完成函…

Vue Cli 中使用 Karma / Chrome 执行样式相关单元测试

在 GearCase 开源项目 中,我使用了 Vue Cli 的默认测试框架.因此和样式相关的东西,都无法进行测试.因为它并不类似于无头浏览器,而是存在于虚拟内存之中. 现状 在如下 button.spec.js 单元测试用例当中,关于 icon 默认的 order 的测试用例无法进行测试,因为它涉及到了样式.前面已经提到由于它处于虚拟内存之中.因此只要进行单元测试,就会出现以下报错. // 样式相关的测试用例 it('icon 默认的 order 是 1', () => { const wra…

vue cli中的env详解

前言 相信使用过 vueCli 开发项目的小伙伴有点郁闷,正常开发时会有三个接口环境(开发,测试,正式),但是 vueCli 只提供了两种 development,production(不包含 test-单测)模式.其实这是小伙伴们没有理解 vueCli 文档所导致的. vueCli 命令中 --mode 对应的 .env.[mode],而不是 NODE_ENV ::: tip 注意 除了 VUE_APP_ 变量之外. 还有两个特殊的变量: NODE_ENV: 是 development.pro…

vue cli 中关于vue.config.js中chainWebpack的配置

Vue CLI  的官方文档上写:调整webpack配置最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象. Vue CLI 内部的 webpack 配置是通过 webpack-chain (链式操作)维护的.这个库提供了一个 webpack 原始配置的上层抽象,使其可以定义具名的 loader 规则和具名插件,并有机会在后期进入这些规则并对它们的选项进行修改. 它允许我们更细粒度的控制其内部配置.接下来有一个在 vue.config.js 中的 c…

vue router-link 上添加点击事件

在vue学习中遇到给router-link 标签添加事件@click .@mouseover等无效的情况 我想要做的是鼠标移上去出现删除标签,移除标签消失的效果 原代码: <router-link v-for="(item, index) in pageMenuList" :to="{ path: item.listLink }" @mouseover="overTag" @mouseout="outTag">{{…

vue引入echarts、找不到的图表引入方法、图表中的点击事件

1.在vue-cli项目中添加webpack配置,本文引入的最新版本.在 3.1.1 版本之前 ECharts 在 npm 上的 package 是非官方维护的,从 3.1.1 开始由官方 EFE 维护 npm 上 ECharts 和 zrender 的 package.   使用npm添加package.json文件中的配置并下载相关npm包依赖 npm install echarts --save 然后在项目文件的入口js文件main.js中添加 import echarts from "e…

在vue中的点击事件怎么获取当前点击的元素

首先 vue的点击事件 是用 @click = “clickfun()” 属性 在html中绑定的,在点击的函数中 添加$event 参数就可以比如<button @click = “clickfun($event)”>点击</button> methods: { clickfun(e) { // e.target 是你当前点击的元素 // e.currentTarget 是你绑定事件的元素 } },…

2-3 Vue实例中的数据，事件和方法

上节课模板是写在Vue的实例里面的,现在我们可以把它恢复出来.写在挂载点的内部,看起来会舒服一点.Vue的数据项,可以配置任意的数据名字. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue入门</title> <!--这个库要放在head部分去引入,这样做会避免页面出现抖屏的一个情况-->…

Vue-axios 在vue cli中封装

common/post.js import axios from 'axios' // 引入axios import qs from 'qs' // 引入qs axios.defaults.baseURL = '/apis' //请求地址的域名(此处使用了代理所以直接填/apis // 拦截响应response,进行错误处理 axios.interceptors.response.use(function (response) { // 成功处理 // code处理 response.code…