recherche

Maison >interface Web >js tutoriel >Deux façons de charger des données à l'aide de Vue.Js combinées avec Jquery Ajax

Deux façons de charger des données à l'aide de Vue.Js combinées avec Jquery Ajax

不言
不言original
2018-05-05 16:32:483187parcourir

Cet article présente principalement les deux méthodes de chargement de données à l'aide de Vue.Js combinées avec Jquery Ajax. Il a une certaine valeur de référence. Les amis intéressés peuvent se référer à

pour organiser les documents et rechercher un code qui utilise. Vue.Js combiné avec Jquery Ajax pour charger des données de deux manières. Je les partagerai avec vous de manière légèrement organisée et rationalisée.

Sans plus tard, passons directement au code

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

code js

/**
 * 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;
    }
  })
}

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

Afin de simuler la requête, utilisez local json, officiellement développé Vous pouvez remplacer l'url ajax Jquery par l'adresse de l'interface.

La structure des répertoires de fichiers est présentée ci-dessous

Recommandations associées :

Introduction de l'éditeur de texte enrichi Tinymce dans le projet Vue

Analyse de la méthode de mise en œuvre du routage imbriqué et de la redirection 404 Vue

Configuration globale du projet Vue, idées de partage WeChat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment conserver deux décimales dans jsArticle suivant：Comment conserver deux décimales dans js

Articles Liés

Voir plus