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實例開始的

例：

var vm = new Vue({
      el:'#app',  //實例化對象
      data:{
　　         wordCardStyles:[]  //要存放的數據  
      },
      methods:{
               //存放實例方法 
     }
 })

三、vue和jquery之間互相調用

例如現在用jq寫了一個方法，從后台獲取數據，並且把獲取到的數據要賦值給vue對象里的子對象

function getStyleSheetInfo(){
    $.ajax({
        type: 'post',
        dataType: 'json',
        url: serverUrl + 'api/styleSheet/findStyleSheetPage',
        data: {
            pageNumber:1,
            pageSize:99,
            styleType:'582941287137673216'
        },
        success: function (result) {
            if (result.code == '0000') {
                vm.wordCardStyles = result.data.list //這里的vm就是代表上面的實例，wordCardStyles是vm實例里面的一個對象，然后把請求結果賦值給這里對象
            }
        }
    })
}

那么vm實例里面如何調用外部的jq方法呢？

直接把方法寫在vm的方法里調用即可

var vm = new Vue({
      el:'#app',  //實例化對象
      data:{
　　         wordCardStyles:[]  //要存放的數據  
      },
      methods:{
               //存放實例方法 
             changeModel(event){
                console.log(event)
                 getMainTabelData() //外部的jq方法
            },
     }
 })