vue和jQuery混合着用

最新推荐文章于 2023-09-21 16:04:26 发布

风神.NET跨平台

最新推荐文章于 2023-09-21 16:04:26 发布

阅读量2.5k

点赞数

分类专栏： Vue.js(Vue 2/Vue 3)

原文链接：https://blog.csdn.net/WuLex

版权

Vue.js(Vue 2/Vue 3) 专栏收录该内容

91 篇文章 4 订阅

订阅专栏

效果功能描述：
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>

如图

在这里插入图片描述

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换成接口地址。

文件目录结构见下
在这里插入图片描述

风神.NET跨平台

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
vue和jQuery混合着用

效果功能描述：1，一堆数据，渲染成列表；2，每个子项有一个操作；3，点每个子项的操作显示一个弹窗;4, 弹窗有一个提交按钮，提交修改后的数据；5，列表中对应的子项需实时变化；页面<!DOCTYPE html><html><head> <meta charset="utf-8"/> <title>vue和j...
复制链接

扫一扫