Two ways to load data using Vue.Js combined with Jquery Ajax-JS Tutorial-php.cn

Two ways to load data using Vue.Js combined with Jquery Ajax

不言

Release： 2018-05-05 16:32:48

Original

3160 people have browsed it

This article mainly introduces the two methods of loading data using Vue.Js combined with Jquery Ajax. It has certain reference value. Interested friends can refer to

to organize the documents and search out A code that uses Vue.Js combined with Jquery Ajax to load data in two ways. I will share it with you in a slightly organized and streamlined way.

No more nonsense, just go to the code

html code

<!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>

Copy after login

js code

/**
 * Created by sen on 2016/10/31.
 */
//定义Vue组件
var vum=new Vue({
  el: "#app",
  data: {
    message: "",
    datas: "",

  },
  methods:{
    showData:function () {
      jQuery.ajax({
        type: &#39;Get&#39;,
        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: &#39;Get&#39;,
    url: "/vue1/json/data.json",
    success: function (data) {
      vum.message = data.sites[0].Name;
    }
  })
}

Copy after login

json file

{
 "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"
  }
 ]
}

Copy after login

In order to simulate requests using local json files, formal development can use the Jquery ajax url Replace it with the interface address.

The file directory structure is shown below

Related recommendations:

Introducing the tinymce rich text editor into the Vue project

Vue nested routing and 404 redirection implementation method analysis

Vue project global configuration WeChat sharing ideas

The above is the detailed content of Two ways to load data using Vue.Js combined with Jquery Ajax. For more information, please follow other related articles on the PHP Chinese website!