vue jquery混用

1、在项目中使用jquery

第一步安装jquery依赖包

使用npm install jquery --save

第二步在程序中配置jquery

打开webpack.base.conf.js
在文件头部添加: var webpack = require(‘webpack‘) 引入webpack:

‘use strict‘
const path = require(‘path‘)
const utils = require(‘./utils‘)
const config = require(‘../config‘)
const vueLoaderConfig = require(‘./vue-loader.conf‘)
var webpack = require(‘webpack‘)

在module.exports中增加jquery路径的解析:
‘jquery‘: path.resolve(__dirname,‘../node_modules/jquery/src/jquery‘)

 1 module.exports = {
 2   context: path.resolve(__dirname, ‘../‘),
 3
 4  .....省略代码.....
 5
 6   resolve: {
 7     extensions: [‘.js‘, ‘.vue‘, ‘.json‘],
 8     alias: {
 9       ‘vue$‘: ‘vue/dist/vue.esm.js‘,
10       ‘@‘: resolve(‘src‘),
11       ‘jquery‘: path.resolve(__dirname,‘../node_modules/jquery/src/jquery‘)
12
13     }
14   },

完成这两步后在组件中就可以使用jquery了

 1 <template>
 2     <div style="background-color:red">
 3         <p id="msg">hello world</p>
 4         <button @click="showClick">
 5             点击
 6         </button>
 7     </div>
 8 </template>
 9 <script>
10 import $ from ‘jquery‘
11 export default {
12   methods: {
13     showClick () {
14       alert($(‘#msg‘).text())
15     }
16   }
17 }
18 </script>

原文地址:https://www.cnblogs.com/judyh/p/9979514.html

时间: 2024-10-10 21:11:29

vue jquery混用的相关文章

vue+jQuery+bootstrap整合

前端技术栈整合 1.  vue-cli的安装 gitbash指令: npm install -g @vue/[email protected]版本号 注:npm view vue-cli versions --json 查看可用vue版本 2. 利用vue-cli创建项目 gitbash指令:vue init webpack 项目名 3. 安装jQuery gitbash指令:npm install [email protected]  --save 4. 安装bootstrap gitbash

js与jquery混用问题

以前混着用觉得没问题,今天遇到了倒腾半天,搜索一下果然不能随便混 只有jquery对象才能使用jquery定义的方法 普通的dom对象一般可以通过$()转换成jquery对象. 由于jquery对象本身是一个集合.所以如果jquery对象要转换为dom对象则必须取出其中的某一项,一般可通过索引取出. 如:$("#msg")[0],$("div").eq(1)[0],$("div").get()[1],$("td")[5]这些都

angular 与jQuery混用 大坑一

由于angular是在真实dom加载之后,运行,所以jQuery操作dom时,要先于angular添加的元素(如,ng-repeat),所以常常会出现,元素错位,解决办法:添加一个透明的站位元素:

Vue+jquery上拉加载

<ul> <li class="new-list" v-for="item in proarr"> <a :href="'/index.php/new/news?id='+item.id" class="new-item"> <div class="new-title ell">{{item.title}}</div> <div class=

jQuery到Vue的迁移之路

背景 在前段时间做了L10的某个超复杂超多坑的三端专题之后,组里的小伙伴们一致认为是时候想办法统一一下组里的开发模式了.因为用nie那一套jQuery/zepto(下文jQuery默认包括zepto)的话,十个人就有十种习惯,不管是代码组织也好,页面结构也好,逻辑处理也好-- 其实如果像一般的专题,开发周期短,生命周期短的,用传统的方式开发也还好,不需要后期维护,不需要多人协作.但是,如果项目稍微复杂一点,问题就来了,一碰到需要多人协作的项目,不同的人都有不同的组织代码的习惯,维护起来效率相当低

vue react 与原生 js jquery 渲染时间简单对比

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

vue 和 jquery混合使用

有时候只要想到要用的 vue.js 的时候就会惯性的想起用vue-cli手脚架搭建一个项目,但是有时候的业务场景并不适合用vue-cli手脚架,这个时候使用vue+jquery混合使用,把他们的优点结合起来使用会大大提升开发效率. 那么vue+jquery应该如何使用呢? 一.首先引入vue文件(cdn或者下载到本地都行),参考vue官方连接 https://cn.vuejs.org/v2/guide/installation.html 二.创建一个vue实例,因为每个vue应用都是通过创建一个

Vue学习 第2天 又看了个教程,加深理解

http://study.163.com/course/courseMain.htm?courseId=1003606075 五点多就醒了,睡不着,干脆再看篇教程 慕课网的有个好处,Html5播放可设置1.75甚至2倍速度,精力集中些,虽然加速了,但能听懂,省不少时间 网易云课堂的只能按 -> 去快进,有时漏了关键点又得倒回来看,不方便 Vue确实是个好框架,比想像中容易上手多了,看了3个教程后,再翻翻官网的文档,已经算入门了.虽然从新项目中完整弄一套出来还心里没底,但看别人项目的代码应该是没问

《JQuery实战》第4-9章

第四章 事件 命令 定义 参数 返回 bind(eventType,data,listener) 在包装集的所有元素上建立函数,作为指定事件类型的事件处理程序 eventType是事件类型的名称:data(可选)是调用者提供的数据:listener是函数 包装集 one(eventType,data,listener) 在包装集的所有元素上建立函数,作为指定事件类型的事件处理程序.一旦执行,事件处理程序就被自动删除 eventType是事件类型的名称:data(可选)是调用者提供的数据:list