详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
作者：o黑色乌鸦o 发布时间：2023-07-02 17:07:39
标签：vue,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文件，正式开发可将Jquery ajax的url换成接口地址。
文件目录结构见下
来源：https://my.oschina.net/senit/blog/778723
0
投稿猜你喜欢
在windows中罗技K380可以安装Logitech Options来实现这个Fn锁定功能。在linux中如何实现Logitech Opt- 一.简单介绍： functools模块用于高阶函数：作用于或返回其他函数的函数。一般而言，任何可调用对象都可以作为本模块用途的函数
- 整本书围绕着一个叫做“CSS禅意花园”的网站展开，其实N久之前我在一份外国的关于CSS的在线教程上看到了这个网站的链接，可惜进去之后发现内容
- PDF是我们经常会接触到的一种文件格式，文献、文档...很多都是PDF格式。它以格式稳定的优势，使得我们在打印、分享、传输过程中能够最优的保
- 环境准备 python3.52 pycharm5.05 Pillow 自制的验证码工具包/utils/check_code 验证码的作用防恶
- 前言昨天，因为项目需求要添加表的更新接口，来存储预测模型训练的数据，所以自己写了一段代码实现了该功能，在开始之前，给大家分享python 操
- 使用 Django自带的 auth 用户验证功能，编写函数，使用 is_authenticated 检查用户是否登录，结果报错：TypeEr
- function checkPhoto(fnUpload) { var filename = fnUpload.value; alert(f
- 本文实例为大家分享了python实现随机漫步的具体代码，供大家参考，具体内容如下编写randomwalk类from random impor
- PyAutoGUI是一个纯Python的GUI自动化工具，其目的是可以用程序自动控制鼠标和键盘操作，利用它可以实现自动化任务本章介绍了许多不
- Todo清单需要实现的功能有添加任务、删除任务、编辑任务，操作要关联数据库。任务需要绑定用户，部门。用户需要绑定部门。{#自己编写一个基类模
- 影响用户访问的最大部分是前端的页面。网站的划分一般为二：前端和后台。我们可以理解成后台是用来实现网站的功能的，比如：实现用户注册，用户能够为
- Pycharm运行时总是跳出Python Console最近运行程序的时候发现，每次点击运行之后，都是出现的Python Console。最
- Python argparse中的action=store_true用法前言Python的命令行参数解析模块学习。示例参数解析模块支持act
- 简介mplcursors包也可以为matplotlib提供交互式的数据光标（弹出式注释框），它的灵感来源于mpldatacursor包，可以
- 一、使用python内置commands模块执行shellcommands对Python的os.popen()进行了封装，使用SHELL命令
- 经常会遇到下载的文件或电子书，名字中间都包含了一些网址信息，实际使用中由于名字太长不方便，下面的脚本使用正则表达式来对目录下的所有文件重命名
- 01 实现背景1、PHPdict.txt，一个文本文件，包含可能的敏感目录后缀2、HackRequests模块，安全测试人员专用的类Requ
- 概述从今天开始我们将开启一段自然语言处理 (NLP) 的旅程. 自然语言处理可以让来处理, 理解, 以及运用人类的语言, 实现机器语言和人类
- 一、os模块os 模块是 Python中的一个内置模块，也是 Python中整理文件和目录最为常用的模块。该模块提供了非常丰富的方法用来处理
