在vue项目中使用jquery
1、首选通过npm安装jquery
npm install jquery --save
2、在build/webpack.base.conf文件当中引入jquery(需要注意的是vue2和vue3配置可能有些差别,这里用的是vue2.X)
module.exports = {
...
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'jquery': path.resolve(__dirname, '../node_modules/jquery/src/jquery')
}
},
...
}
其实第2步可以不做的,也可以使用。区别也就在于全局和部分文件引用的区别(这个不是很懂,反正不配置也可以使用)
3、使用
在需要的组件中使用
//引入jquery 使用就可以用$
import $ from 'jquery'
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
mounted:function(){
//使用jquery
let test = $('#test').text()
console.log(test)
},
methods:{
}
}
实战vue项目中如果想使用jquery,可以试一下,会少些好多代码
举个例子:
//不使用jquery获取某个标签
var dom = document.getElementById('test')
使用jquery
var dom = $('#test')
是不是很方便,当然不止这些,更多的是jquery中封装了很多api就可以在vue中使用了。
okkkkk
每天学一招,欢迎大家交流探讨。
更多推荐
如何在vue中使用jquery?
发布评论