Jquery Ajax와 결합된 Vue.Js를 사용하여 데이터를 로드하는 두 가지 방법
- 不言원래의
- 2018-05-05 16:32:483160검색
이 글에서는 주로 Vue.Js와 Jquery Ajax를 결합하여 데이터를 로드하는 두 가지 방법을 자세히 소개합니다. 참고할만한 가치가 있으니 관심 있는 친구들이 참고하면 됩니다.
Vue.Js와 Jquery Ajax를 결합하여 사용하는 방법을 찾아보세요. Jquery Ajax Jquery Ajax에서 데이터를 로드하는 두 가지 방법에 대한 코드는 공유를 위해 약간 구성되고 간소화되었습니다.
더 이상 헛소리하지 말고 바로 코드로 가세요
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 파일
{
"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 사용 요청 문서를 공식적으로 시뮬레이션하기 위해 개발됨 Jquery ajax URL을 인터페이스 주소로 바꿀 수 있습니다.
아래 파일 디렉터리 구조를 확인하세요
관련 권장 사항:
Vue 프로젝트에tinymce 리치 텍스트 편집기 도입
Vue 중첩 라우팅 및 404 리디렉션 구현 방법 분석
위 내용은 Jquery Ajax와 결합된 Vue.Js를 사용하여 데이터를 로드하는 두 가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.