1.在vuejs中是否還需要jquery
? ? ? ? 如果你作為前端有一段時間的話一定會很熟悉jquery砌函，作為前端的開發(fā)神器我們無法想象沒有jquery將會寫多少繁瑣的原生js豆赏。在angularjs,react,vue當(dāng)?shù)赖哪甏锩粱ィ蛟S你不在需要jquery了。
? ? ? ? 當(dāng)你剛開始使用vue的時候，你很有可能想“如果我用jquery的做的話這將非常簡單”，或許這是因為剛接觸vue的你還沒有了解他假栓。
1.操作DOM
使用jQuery可以編寫var myElement = $（'＃my-element'）。 我承認(rèn)霍掺，這真的很酷匾荆，它可以處理你想要處理的CSS選擇器。
您可以使用document.getElementById（'my-element'）訪問此元素杆烁，但這不適合Vue的虛擬DOM機(jī)制棋凳，因為此元素可以隨時重新呈現(xiàn)。
幸運(yùn)的是连躏，Vue提供了訪問某個DOM元素的API剩岳。 您的HTML將如下所示：
<template>
<div>
...
<p ref = "myElement">This is the content of my element</p>
...
</div>
</template>
<script>
export default {
? ? ? ? mounted(){
? ? ? ? ? ? ? ? ? console.log(this.$refs.myElement)
? ? ? ? ?}
}
</script>輸出： <p>This is the content of my element</p>
如果將 ref 掛到組件上，回顯示出組件的屬性和事件等信息
2.更加有效的函數(shù)
我知道$.each()函數(shù)能夠很方便的遍歷一個數(shù)組...但現(xiàn)在有ES2015和很多更有效的庫入热，如lodash拍棕。
我們使用如下的數(shù)組：
var myArray = ['we', 'love', 'javascript']
將數(shù)組中的值變成大寫
//jquery
$.each(myArray , function(value, index)){
? ? myArray[index] = value.toUppercase();
}
// ES2015
myArray.forEach((value, index) =>
? ? myArray[index] = value.toUppercase()
)
//ES2015 (map)
? ? myArray = myArray.map(value => value.toUppercase())
// lodash
var _ = require('lodash');
myArray = _.map(myArray, function(value){
? ? return value.toUppercase();
})
2.如何在vuejs 中引入jquery
Vue 的官方是不建議直接操作 DOM 的，Vue 的用途在于視圖和數(shù)據(jù)的綁定勺良。如果通過JQuery 直接操作 DOM 的話绰播，勢必會造成視圖數(shù)據(jù)和模型數(shù)據(jù)的不匹配，這樣 Vue 就失去它存在的意義了尚困。
JQuery 和 VueJS 合理使用并不會造成沖突蠢箩，因為他們的側(cè)重點(diǎn)不同，VueJS 側(cè)重數(shù)據(jù)綁定和視圖組件事甜，JQuery 側(cè)重異步請求和動畫效果谬泌。如果使用JQuery + VueJS 開發(fā)，一定要在 Vue 渲染完所有的 HTML組件之后再通過 JQuery 處理逻谦，而使用 JQuery 時應(yīng)避免直接操作 DOM掌实，但是應(yīng)用動畫是允許的。
JQuery 與 VueJS 相互配合可以非常高效的完成異步任務(wù)邦马，首先通過 JQuery 發(fā)出 Ajax 請求贱鼻，接受到服務(wù)端傳遞的 JSON 數(shù)據(jù)后，再通過 Vue 將數(shù)據(jù)綁定到組件上滋将，最后由 JQuery 進(jìn)行動畫處理邻悬，整個過程就如行云流水般自然。
說句題外話随闽，Vue 的目的不是取代 JQuery父丰，它是為了解決前后端分離而出現(xiàn)的。如果沒有數(shù)據(jù)變化橱脸，只是單純的樣式變化础米，則沒有必要去大費(fèi)周章進(jìn)行視圖模型的綁定分苇，并且還不利于 SEO 優(yōu)化。
1.webpack全局引入jquery
1. 下載jquery
npm install jquery --save-dev
2. 在項目的webpack.base.conf.js里做如下配置
加入
var webpack = require("webpack");
在module.exports的最后加入
plugins: [
? new webpack.optimize.CommonsChunkPlugin('common.js'),
? newwebpack.ProvidePlugin({
? ? jQuery:"jquery",
? ? $:"jquery"
? })
]
3. 執(zhí)行 npm run dev
4.在入口文件main.js中引入
import $ from 'jquery'
然后就可以正常使用jquery了屁桑。
3.如何在vuejs 中引入bootstrap
bootstrap 中包含以下三個部分
其中bootstrap是依賴于jquery的医寿，所以想要使用bootstrap的完整功能特別是動態(tài)的效果一定要先安裝jquery
1.在bootstrap官網(wǎng)下載bootstrap文件，并放入相應(yīng)的目錄（根據(jù)自己的實際需求來蘑斧，我放入src/assets/bootstrap）
2.修改webpack.base.conf.js,添加如下配置
3.在main.js中引入
import 'bootstrap/js/bootstrap.min.js'
import 'bootstrap/css/bootstrap.min.css'
然后就可以正常使用bootstrap了靖秩。
