Maison > Article > interface Web > 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:483125parcourir
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: '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;
}
})
}
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!