Vue项目中使用jquery的简单方法

前言

在vue项目中,需要实现某些特定的功能时,使用mvvm模式不易实现。因此引入jquery包来完成需求

jquery中的触发事件可以自己定义在mounted中,如果需要使用vue中data的数据,直接使用this.msg是无法使用的,需要另外定义const _this = this,

存储this.之后便可以在事件中使用_this.msg数据了。

需求:在品牌处可以输入,并且会有模糊搜索的下拉框,也可下拉选择,在输入完毕后检验值是否在下拉框中存在,聚焦时蓝色边框,change时如果不存在则红框显示,存在的话就绿框提示,(就是带输入建议的输入框)

问题: 使用element-ui中的el-autocomplete组件,开始通过失焦事件来验证,但是如果选择了下拉框某个值时(选中后会将下拉框的值赋给上面的输入框),失焦事件触发会在赋值之前,因此拿失焦时输入框的值来进行判断时错误的,在先改变输入框的值后再去选择下拉框,change事件有同样的bug,没办法只能自己引入jquery来完成

点击输入框后,通过placeholder判断是否是品牌下的的输入框,因为每个输入框都有这个类,如果是的话则增加一个类名,如果第一次点击的位置和第二次鼠标点击的位置都是品牌下的输入框,则执行相应的逻辑判断,

在逻辑执行完后就删除其他处同样的类名inputList

const _this = this
$('body').delegate('.el-input__inner', 'focus', function(e) { // 因为是动态生成的,所以选择这种方式来监听事件
   if (e.target.placeholder === '请输入品牌') { // 当聚焦在品牌输入框时触发
    $(this).addClass('inputList') // 加上一个类名inputList
    if ($('.inputList').length === 2) { // 判断下一次点击的位置,当从第一个输入框改值后下一个聚焦位置还是品牌下的输入框时
     if (!$('.inputList').not(this).val()) {
      $('.inputList').not(this).css('border', '1px solid #67c23a')
     } else {
      let num = 0
      for (let j = 0; j < _this.goodsBrands.length; j++) {
       if ($('.inputList').not(this).val() === _this.goodsBrands[j].value) {
        num += 1
        break
       }
      }
      if (num === 0) {
       _this.$message.error('输入的品牌不在品牌列表中')
       $('.inputList').not(this).css('border', '1px solid #F56C6C')
      } else {
       $('.inputList').not(this).css('border', '1px solid #67c23a')
      }
     }
    }

    $('.el-input__inner').not(this).removeClass('inputList') // 逻辑执行完之后删除当前聚焦位置以外的inputList类,这样就保持.inputList长度最多为2
   }
  })

此处是为了模拟出输入框的change事件,因为在聚焦时会添加inputList这个类名。所以这里可以判断是否是自己想要的位置,如果是的话给一个标志位getindex,当点击到品牌下的输入框时,如果第二次的点击位置不是品牌其他位置的输入框,则进行逻辑判断

$(document).click(function(e) { // focus触发时也会触发这个事件,并且触发在focus事件之后
   if (e.target.classList[1] === 'inputList') { // 判断是否点击在对应位置
    _this.getIndex = 1 // 用于标志在聚焦事件触发后的下一次点击是否同样会触发聚焦,如果是则把第二次点击当成第一次重新判断,等到下一次点击再来判断
   } else {
    if (_this.getIndex === 1) {
     if (!$('.inputList').eq(0).val()) {
      $('.inputList').eq(0).css('border', '1px solid #67c23a')
     } else {
      let num = 0
      for (let j = 0; j < _this.goodsBrands.length; j++) {
       if ($('.inputList').eq(0).val() === _this.goodsBrands[j].value) {
        num += 1
        break
       }
      }
      if (num === 0) {
       _this.$message.error('输入的品牌不在品牌列表中')
       $('.inputList').eq(0).css('border', '1px solid #F56C6C')
      } else {
       $('.inputList').eq(0).css('border', '1px solid #67c23a')
      }
     }
     $('.el-input__inner').removeClass('inputList')
     _this.getIndex = 0 // 每次第二次点击了其他位置时,getIndex重新计数
    }
   }
  })

小白一枚,如果有其他更好的方法,欢迎各位同行指教,多多交流

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对我们的支持。

(0)

相关推荐

  • 详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css

    写在前面: 本文是vue-手摸手教你使用vue-cli脚手架-详细步骤图文解析之后,又一篇关于vue-cli脚手架配置相关的文章,因为有些文章步骤不够清晰,当时我引入JQuery.bootstrap的时候颇费了一番功夫,所以本文的步骤会尽量详细一点. 引入bootstrap 1. 下载所需要的bootstrap文件. 将要使用的bootstrap文件放入src目录下的assets文件夹中. 2. 在入口文件src/main.js中引入bootstrap import './assets/boot

  • Vue中正确使用jQuery的方法

    题主Vue小白,入门demo时想在其中使用jQuery(当然可能是不推荐的做法哈,毕竟俩儿的风格不一样,但万一你就需要呢 _^ ^_),结果遇到问题,最终倒腾解决. 编译报错:$ is undefined or no-undef '$' is not defined 假设你已经使用vue-cli搭建好了开发的脚手架,接下来,看下面. 1.NPM 安装 jQuery,项目根目录下运行以下代码 npm install jquery --save 2.webpack配置 在项目根目录下的build目录

  • 在vue项目中使用Jquery-contextmenu插件的步骤讲解

    使用步骤: 1.安装: npm i jquery-contextmenu --save-dev 2.在main.js文件中引包 import Jquery_contextmenu from 'jquery-contextmenu' Vue.use(Jquery_contextmenu) import 'jquery-contextmenu/dist/jquery.contextMenu.css' 注意: 在引入样式时可以点击进去jquery-contextmenu的安装目录中查找对应的css文件

  • vue单页应用中如何使用jquery的方法示例

    前言 本文给大家介绍的是关于在vue单页应用中使用jquery的相关内容,主要记录一个今天用到的vue-cli建立的应用中引入jquery的方式.下面话不多说,来一起看看详细的介绍吧. 方法如下: 1.首选通过npm安装jquery npm install jquery --save 2.在build/webpack.base.conf文件当中引入jquery module.exports = { ... resolve: { extensions: ['.js', '.vue', '.json

  • Vue CLI3.0中使用jQuery和Bootstrap的方法

    Vue 中使用 jQuery 和 Bootstrap 不是特别符合 Vue 原生的写法,但是有时候又要用,所以放上我的引入设置,供大家参考. 在 Vue CLI2.0 中引入 jQuery 和 Bootstrap 需要设置很多配置项,网上有很多方法法,这里不重复写了.直接上 Vue CLI3.0 配置步骤. 第一步:安装 jQuery. Bootstrap.popper.js依赖. 其中popper.js 用于在 Bootstrap 中显示弹窗.提示.下拉菜单,所以需要引入. npm insta

  • 使用vue与jquery实时监听用户输入状态的操作代码

    实现效果:input未输入值,按钮禁用 jquery操作代码: html <input type="text" name="" placeholder="请输入用户名" id="userName" > <button class="disabled" id="login">登录</button> css .disabled { pointer-even

  • 如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)

    Bootstrap是网上最流行的前端开发框架. 除了用它,我不知道还有其他更快的方法去构建一个响应式的网站. 但是自从我向网页添加动态功能的工具变成vue.js后.适应bootstrap变得困难起来.因为这带来了一些技术包袱.没错.我说的就是jquery. 这并不是在抨击jquery,我只是意识到,当你已经在项目里使用一些像Vue的框架后,再引入jQuery就会出现一些显著的缺点: 增加开销.jQuery将会使你的网页增加30KB. 在使用诸如webpack一类的打包工具时,jquery也会很难

  • 详解使用Vue.Js结合Jquery Ajax加载数据的两种方式

    整理文档,搜刮出一个使用Vue.Js结合Jquery Ajax加载数据的两种方式的代码,稍微整理精简一下做下分享. 废话不多说,直接上代码 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <script src="js/jquery.js"

  • jquery在vue脚手架中的使用方式示例

    本文介绍了jquery在vue脚手架中的使用方式示例,分享给大家,具体如下: 1:在各个vue文件中使用 <script> import '../assets/js/jquery-1.10.2.min.js' export default { data() { return { }, watch: { }, created: function() { }, methods: { list() { this.$router.push({ path: 'list' }); }, }, } $(do

  • Vue项目中使用jquery的简单方法

    前言 在vue项目中,需要实现某些特定的功能时,使用mvvm模式不易实现.因此引入jquery包来完成需求 jquery中的触发事件可以自己定义在mounted中,如果需要使用vue中data的数据,直接使用this.msg是无法使用的,需要另外定义const _this = this, 存储this.之后便可以在事件中使用_this.msg数据了. 需求:在品牌处可以输入,并且会有模糊搜索的下拉框,也可下拉选择,在输入完毕后检验值是否在下拉框中存在,聚焦时蓝色边框,change时如果不存在则红

  • 在vue项目中使用sass的配置方法

    1.创建一个基于 webpack 模板的新项目 $ vue init webpack myvue 2.在当前目录下,安装依赖 $ cd myvue $ npm install 3.安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev node-sass 4.在build文件夹下的webpack.base.conf.js的rules里面添加配置 { test: /

  • vue项目中使用骨架屏的方法

    现在的应用开发,基本上都是前后端分离的,前端主流框架有SPA.MPA等,那么解决页面渲染.白屏时间成为首要关注的点 webpack可以按需加载,减小首屏需要加载代码的体积: 使用CDN技术.静态代码等缓存技术,可以减小加载渲染的时长 问题:但是首页依然存在加载.渲染等待时长的问题.那么如何从视觉效果上减小首屏白屏的时间呢? 骨架屏:举个例子:其实就是在模版文件中id=app容器下面写想要展示的效果,在new Vue(option)之后,该id下的内容就被替换了( 这时候,可能Vue编译生成的内容

  • 在vue项目中引入highcharts图表的方法(详解)

    npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个chart.vue组件 <template> <div class="x-bar"> <div :id="id" :option="option"></div> </div> </templa

  • vue项目中使用百度地图的方法

    1.在百度地图申请密钥: http://lbsyun.baidu.com/  将 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密钥" ></script> 中的 密钥替换成你申请的,在 vue项目的index.html引用. 2. 在build 文件下下的 webpack.base.conf.js贴入代码 externals: {

  • 在vue项目中使用md5加密的方法

    npm安装: npm install --save js-md5 1.在需要使用的项目文件中引入: import md5 from 'js-md5'; 使用: md5('hello world')  // 5eb63bbbe01eeed093cb22bb8f5acdc3 2.或者在main.js文件中将md5转换成vue原型: import md5 from 'js-md5'; Vue.prototype.$md5 = md5; 使用: this.$md5('hello world') // 5

  • 在vue项目中正确使用iconfont的方法

    1.打开 iconFont官网 选择自己喜欢的图标,并且添加购物车 2.点击购物车,添加至项目 3.下载至本地 4.把我们下载好的文件iconfont.css和iconfont.ttf放到项目assets文件夹下(可创建一个css文件或iconfont文件) 5.在main.js中引入iconfont.css样式 import './assets/iconfont/iconfont.css' 6.在在vue文件中引用<i class="iconfont icon-zitigui-xianx

  • 教你在vue项目中使用svg图标的方法

    svg图标优点 svg与iconfont之类的字体图标在网页中的使用差别不大,可以修改大小,颜色等而且不失真. 安装svg-sprite-loader npm install --save-dev svg-sprite-loader 文件夹目录 (xxx.svg 注意:这里的 xxx 不要使用中文) - assets -- icon --- svg --- index.js 配置依赖 // Vue2.x 在 webpack.base.conf.js 中配置如下: // 注意svg图标的路径 sr

  • 在vue项目中安装使用Mint-UI的方法

    一.Mint UI 是 由饿了么前端团队推出的 一个基于 Vue.js 的移动端组件库,具有以下特性: 使用文档: http://mint-ui.github.io/#!/zh-cn Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率. 真正意义上的按需加载组件.可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大. 考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的

  • 如何在vue项目中嵌入jsp页面的方法(2种)

    今日一个项目中一块功能模块是其他系统使用jsp已经开发好的页面,想着直接将其嵌入到当前的vue项目中节约开发成本:但是发现并非想象的那么简单 创建一个server.vue组件加载jsp页面 1 .第一种(使用 v-html进行jsp 渲染) server.vue <template> <div class="docker-server"> <div v-html="pageContent"></div> </di

随机推荐