vue是雙向資料繫結，為啥還需要jquery 呢，因為vue在某些情況下需要操作dom,而vue操作dom又過於麻煩。

①首先在package.json指定需要下載的jquery版本 ,然後npm install,安裝jquery

②安裝好後，在webpack.base.conf.js檔案中進行設定

（1）頭部引入webpack

（2）在module對jquery進行全域性配置

  plugins: [
　　new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        jquery: "jquery",
        "window.jQuery": "jquery"
　　})
  ],
 

③在main.js中引入 jquery就可以使用了

④如果專案使用了 eslint語法檢驗，此時 會提示 找不到 $或者jquery的錯誤。

http://eslint.org/docs/rules/no-undef '$' is not defined

http://eslint.org/docs/rules/no-undef 'jQuery' is not defined

這時候需要做的下一步就是要修改根目錄下.eslintrc.js檔案了，在改檔案的module.exports中，為env新增一個鍵值對 jquery: true 就可以了，也就是：

env: { 
// 原有 
browser: true, 
// 新增 
jquery: true 
} 

最後  再次執行 npm run dev就可以完美使用 jquery了

那如何使用呢：

試著在 mounted 或者 列印 $('選擇器')，如果能正確打印出dom節點，說明是成功的。

那如果是要獲取當前點選的 $(this),怎麼辦呢，和vue的this又有什麼衝突。

假如要獲取 當前節點的 父節點 。。。。祖父節點，用vue是這樣的

① vue獲取 節點

使用原生方法需要一級一級的查詢

②使用jquery獲取節點，直接jquery選擇器一步到位

$(event.currentTarget) 既想當 與 $(this)

附上 原生和 jquery獲取節點的方法

js獲取節點

父： parentNode 獲取已知節點的父節點。

子： childNodes; 得到全部子節點

children 得到全部子節點

firstChild 獲得第一個子節點

lastChild 獲得最後一個子節點

兄弟：previousSibling 獲取已知節點的前一個節點

nextSibling 獲取已知節點下一個節點

jq獲取節點

父： $('#').parent() 獲取上一級的父節點。

$('#items').parents('.parent1')獲取上面哪一級父節點都可以。

$('li:parent')

子： $('#test span') 使用篩選條件

$('#test').find() 使用find()

$('#test').children('') 使用children()函式

兄弟：

jQuery.siblings() 返回兄弟姐妹節點，不分前後

jQuery.prevAll() 返回所有之前的兄弟節點

jQuery.prev() 返回上一個兄弟節點，不是所有的兄弟節點

jQuery.next() 返回下一個兄弟節點，不是所有的兄弟節點

jQuery.nextAll() 返回所有之後的兄弟節點

卓越的雲端計算服務提供商,230萬+使用者正在享受阿里雲"穩定,安全,低成本"的產品服務,金牌服務:免費體驗,專業快速備案,7x24小時售後,伺服器只選阿里雲