本文代码github地址
前言：最近有小伙伴问我，是不是用vue脚手架生成的项目就不能jquery了呢？显然，答案是否定的，必须能用。但是个人建议最好不要用了，用人家vue提供的不好嘛。
一、用vue-cli生成项目
1. vue init webpack-simple vue-jq
2. cd vue-jq
3. cnpm install
4. 使用git bash（只是为了方便）
5. package.json 中修改端口 --port 8088
6. npm run dev
二、构建项目结构，引入相关文件
目录结构如下：
|--assets
|--js
|--fn.js
|--jquery-1.7.2.min.js
|--css
|--animate.css
|--1.css
说明：fn.js为一个函数，里面返回了一个生成随机数的函数
export default {
rnd:function(m,n){
return parseInt(Math.random()*(m-n)+n)
},
b:5
};
1.css文件就设置了一个body的背景色
body{
background:#399;
}
三、配置相关文件
1. 在入口文件main.js引入所需的库
import './assets/css/animate.css';
import './assets/css/1.css';
import './assets/js/jquery-1.7.2.min.js';
2. 开始配置jquery库
1). npm install jquery --save-dev
2). 在webpack.base.conf.js中添加 配置
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery',
jQuery: 'jquery'
}),
],
3). 在App.vue中引入模块
import $ from 'jquery'
import fn from './assets/js/fn.js';
3. 开始配置animate.css库
1). npm install style-loader --save-dev
2). 在webpack.base.conf.js中添加 配置
{
test: /\.css$/,
loader: 'style-loader!css-loader' //顺序定死的，必须这么写，知道吗？
},
4. 添加事件修改dom
说明：
1. 点击“按钮”，利用jquery将class名为box的元素背景设为粉色
2. 点击“走你”，利用vue提供的方法获取元素并结合animate.css来实现动画效果，注意：这里调用了fn.js文件中生成随机数的函数。
ps：vue中获取元素，首先在该元素上加ref="xxx"，然后在js中用this.$refs.xxx 来获取该元素进行后续操作
<template>
<div id="app">
<button type="button" name="button" @click="change">按钮</button>
<button type="button" name="button" @click="move">走你</button>
<h2>{{ msg }}</h2>
<div class="box">
<span>我是一个普通的div</span>
</div>
<transition enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
<div class="animated box" ref="div1" v-show="show">
我能动起来
</div>
</transition>
</div>
</template>
<script>
import $ from 'jquery';//引入jq
import fn from './assets/js/fn.js';//引入外部的fn.js文件
export default {
name: 'app',
data () {
return {
msg: 'Welcome to vue',
show: true
}
},
methods: {
change(){
this.msg = 'div背景色变红了'
$('.box').css('background-color','pink');
},
move(){
this.show = !this.show;//用来配合动画（animate）使用
this.$refs.div1.style.backgroundColor = 'lawngreen';
//利用外部的fn.js中的rnd函数生成一个随机数
let item = $('.box:first span').html() + '；<br/>生成的随机数是：'+ fn.rnd(1,100);
$('.box:first span').html(item);
}
}
}
</script>
效果如下：
