詳解使用Vue.Js結合Jquery Ajax加載數據的兩種方式
更新時間：2017年01月10日 09:23:31 作者：o黑色烏鴉o
本篇文章主要介紹了詳解使用Vue.Js結合Jquery Ajax加載數據的兩種方式，具有一定的參考價值，感興趣的小伙伴們可以參考一下
整理文檔，搜刮出一個使用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>
<div 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>
</div>
<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文件，正式開發(fā)可將Jquery ajax的url換成接口地址。
文件目錄結構見下
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
在web后臺管理項目中,經常要用到dialog,就vue來說,使用方式則是引入組件,注冊,在template中使用,試想一下,如果我們需要在項目中的不同.vue文件中使用該dialog,但是又不想每次都在template中寫入組件該如何實現呢？本文我們介紹用指令控制dialog,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了Vue3.0插件執(zhí)行原理與實戰(zhàn)，Vue項目能夠使用很多插件來豐富自己的功能Vue-Router、Vuex等，節(jié)省了我們大量的人力和物力，下面我們就一起來了解Vue3.0插件的原理吧，需要的小伙伴可以參考一下2022-02-02
這篇文章主要介紹了講解vue-router之命名路由和命名視圖，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要介紹了Vue組件的計算屬性和普通屬性的區(qū)別說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了vue3中的響應式原理-effect，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家介紹了VSCode使React?Vue代碼調試變得更爽的使用方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
虛擬列表用來解決大數據量數據渲染問題,由于一次性渲染性能低,所以誕生了虛擬列表渲染,下面我們就來學習一下不同場景下Vue中虛擬列表是如何實現的吧2023-10-10
這篇文章主要介紹了Vue下的components模板的使用及應用，本文通過代碼介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11
這篇文章主要介紹了vue + elementUI 表單嵌套驗證,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-11-11
vue項目npm?run?build打包dist文件及打包后空白解決辦法
npm run build 這個命令會執(zhí)行Vue CLI中預定義的打包配置,并將打包后的文件存放在"dist"文件夾中,這篇文章主要給大家介紹了關于vue項目npm?run?build打包dist文件及打包后空白的解決辦法,需要的朋友可以參考下2023-10-10