Home > Article > Web Front-end > Two ways to load data using Vue.Js combined with Jquery Ajax
Two ways to load data using Vue.Js combined with Jquery Ajax
- 不言Original
- 2018-05-05 16:32:483124browse
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>
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: '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 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"
}
]
}
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!