vue和jQuery混合着用

àì夳堔傛蜴生んèń 2021-07-04 23:24 354阅读 0赞

**效果功能描述：**  
1，一堆数据，渲染成列表；  
2，每个子项有一个操作；  
3，点每个子项的操作显示一个弹窗;  
4, 弹窗有一个提交按钮，提交修改后的数据；  
5，列表中对应的子项需实时变化；

## 页面 ##

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8"/>
        <title>vue和jQuery混合着用</title>
        <style type="text/css"> #box { width: 200px; height: 200px; background: red; } </style>
    
    </head>
    <body>
    <div id="app">
        <div class="item" v-for="(item,index) in items">
            <p>
                <a>{
       {item.id}}</a>
                <a>{
       {item.name}}</a>
                <button @click='showBox(item.id, item.name)'>显示</button>
            </p>
        </div>
    
        <div id="box" :data-id="id" style="display: none;">
            <p></p>
            <button @click='submitMes(id)'>提交</button>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript"> $(function() { var vm = new Vue({ el: '#app', data: { id: "", name: "", items: [ { id: 1, name: "张一" }, { id: 2, name: "李二" }, { id: 3, name: "王三" } ] }, methods: { showBox(id, name) { this.id = id; this.name = name + "-new"; $("#box").find("p").text(this.name); $("#box").attr("data-id", id); $("#box").show(); }, submitMes(id) { //vm.$emit("", text); //console.log(id); this.items.forEach(function(val, index, arr) { if (val.id == id) { val.name = vm.name; } }); $("#box").hide(); } } }); }); </script>
    </body>
    </html>

## 如图 ##

![在这里插入图片描述][20190918131032307.png]  
![在这里插入图片描述][20190918131044548.png]

--------------------

## 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方法
                },
         }
     })

--------------------

## 使用`Vue.Js`结合`Jquery Ajax`加载数据的两种方式 ##

html代码

<!DOCTYPE html>
    
    <html lang="en">
    
    <head>
    
      <meta charset="UTF-8">
    
      <title>demo</title>
    
      <script src="js/jquery.js"></script>
    
      <script src="js/vue.js"></script>
    
    </head>
    
    <body>
    
      <p id="app">
    
        {
       {message }}<br>
    
        <button v-on:click="showData">测试jquery加载数据</button>
    
        <table border="1">
    
          <tr v-for="data in datas">
    
            <td>{
       {data.Name}}</td>
    
            <td>{
       {data.Url}}</td>
    
            <td>{
       {data.Country}}</td>
    
          </tr>
    
        </table>
    
      </p>
      
      <script src="js/app.js"></script>
    
    </body>
    
    </html>

js代码

/** * Created by sen on 2016/10/31. */
    
    //定义Vue组件
    
    var vum=new Vue({ 
    
      el: "#app",
    
      data: { 
    
        message: "",
    
        datas: "",
    
     
    
      },
    
      methods:{ 
    
        showData:function () { 
    
          jQuery.ajax({ 
    
            type: 'Get',
    
            url: "/vue1/json/data.json",
    
            success: function (data) { 
    
              vum.datas = data.sites;
    
            }
    
          })
    
        }
    
      }
    
    })
    
    //使用jquery
    
    jQuery(function () { 
    
      // jQuery("#btn_1").bind("click", function () { 
    
      // alert(jQuery("#name").val());
    
      // });
    
      loadData();
    
    })
    
    //jquery加载数据
    
    function loadData() { 
    
      jQuery.ajax({ 
    
        type: 'Get',
    
        url: "/vue1/json/data.json",
    
        success: function (data) { 
    
          vum.message = data.sites[0].Name;
    
        }
    
      })
    
    }

json文件

{ 
    
     "sites": [
    
      { 
    
       "Name": "百度",
    
       "Url": "www.baidu.com",
    
       "Country": "CN"
    
      },
    
      { 
    
       "Name": "Google",
    
       "Url": "www.google.com",
    
       "Country": "USA"
    
      },
    
      { 
    
       "Name": "Facebook",
    
       "Url": "www.facebook.com",
    
       "Country": "USA"
    
      },
    
      { 
    
       "Name": "微博",
    
       "Url": "www.weibo.com",
    
       "Country": "CN"
    
      }
    
     ]
    
    }

为了模拟请求使用本地的`json`文件，正式开发可将`Jquery ajax`的`url`换成接口地址。

文件目录结构见下  
![在这里插入图片描述][20190918231116986.png]

[20190918131032307.png]: /images/20210704/b92952c5c32048ebb3781b708b3b9d6c.png
[20190918131044548.png]: /images/20210704/d475ecae63db47e28c9e3803a915ba4e.png
[20190918231116986.png]: /images/20210704/6450050444ac4345adcf4bc1837f757d.png