<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>vue-读取/发送数据</title>

<style type="text/css">

* {

margin: 0;

padding: 0

}

table,

td {

border: 1px solid #cccccc;

border-collapse: collapse;

}

table {

width: 1090px;

margin: 20px auto;

}

tr {

line-height: 30px;

}

td {

text-align: center;

}

.demo_input {

width: 500px;

height: 500px;

border: 1px solid red;

margin: 0 auto;

text-align: center;

}

.demo_input input {

width: 200px;

height: 30px;

margin: 5px auto;

}

</style>

<script src="js/vue.js"></script>

<script src="js/jquery.js"></script>

</head>

<body>

<div id="demo">

<table border="1">

<tr>

<th>ID</th>

<th>书名</th>

<th>作者</th>

<th>价格</th>

</tr>

<tr v-for="books in book">

<td>{{books.id}}</td>

<td>{{books.name}}</td>

<td>{{books.author}}</td>

<td>{{books.price}}</td>

</tr>

<tr>

<td colspan="4"><button v-on:click="showData">点我</button></td>

</tr>

</table>

<hr />

<div class="demo_input">

<p>账号：<input type="text" placeholder="请输入账号" id="name" /></p>

<p>密码：<input type="text" placeholder="请输入密码" id="pwd" /></p>

<p>

<!--<button onclick="login()">登录</button>-->

<button v-on:click="login()">登录</button>

</p>

</div>

</div>

<script>

/*vue结合ajax数据读取*/

var demo = new Vue({

el: '#demo',

data: {

book: '',

},

mounted: function() {

var _self = this;

$.ajax({

type: "get",

url: "vue.json",

dataType: "json",

success: function(data) {

_self.book = data.books;

console.log(_self.book)

}

});

},

methods: {

showData: function() {

var _self = this;

$.ajax({

type: "get",

url: "vue.json",

dataType: "json",

success: function(data) {

_self.book = data.books;

console.log(_self.book)

}

});

},

login: function() {

$.ajax({

type: "get",

url: "aaa.php",

data: {

"name": $("#name").val(),

"pwd": $("#pwd").val(),

},

dataType: "text",

success: function() {

console.log("成功了")

}

});

}

}

})

</script>

</body>

</html>

vue.js-读取/发送数据的更多相关文章

  1. js读取json数据（php传值给js）

    <?php $array =array('fds','fdsa','fdsafasd');  // json_encode($array); ?> <html> <hea ...

  2. Atitit vue.js 把ajax数据 绑定到form表单

    Atitit vue.js 把ajax数据 绑定到form表单 1.1. 使用场景:主要应用在编辑与提交场合..1 1.2. 绑定数据到form控件,可以使用jquery,不过vue.js更加简单1 ...

  3. Vue.js的列表数据的同步更新方法

    这次给大家带来Vue.js的列表数据的同步更新方法,Vue.js列表数据同步更新方法的注意事项有哪些,下面就是实战案例,一起来看一下. 数组的 push(),pop(),shift(),unshift ...

  4. Vue.js学习 Item4 -- 数据双向绑定

    Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue 模板因而从根本上不同于基于字符串的模板,请记住这点. ...

  5. Vue.js连接后台数据jsp页面 ￣▽￣

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  6. 关于vue.js父子组件数据传递

    vue.js中使用props down,events up的原则进行父子组件间的通信,先来记录下props down,看个例子: <div id="app2"> < ...

  7. vue.js 三（数据交互）isomorphic-fetch

    至于fetch的介绍,在这里就不多说了,官方和网络上的说明不少 之前使用jquery的Ajax朋友,可以尝试一下使用一下这个新的api 推荐使用isomorphic-fetch,兼容Node.js和浏 ...

  8. js读取json数据

    { "code": 0, "msg": null, "data": { "pageNum": 1, "page ...

  9. 实现js读取Excel数据

    如何通过js去读取excel中的数据 <!DOCTYPE html> <html lang="en"> <head> <meta char ...

随机推荐

  1. yii2框架（一）安装

    手动安装下载yii2basic出现以下错误 2 修改 G:\learn\yii-basic-app-2.0.11\basic\config下web.conf 为cookieValidationKey设 ...

  2. IIS7.5站点配置

    1. 创建站点映射目录: c:\website\release 2. 创建系统用户: a.本地用户和组-->用户-->新用户-->用户名\密码:WebUSR.xxxyyy--> ...

  3. 前端 html span标签

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. input输入框type=file时accept中可以限制的文件类型（转载）

    转载自: input type=file accept中可以限制的文件类型 在上传文件的时候,需要限制指定的文件类型. <input type="file" accept=& ...

  5. 基于 Spark 的文本情感分析

    转载自:https://www.ibm.com/developerworks/cn/cognitive/library/cc-1606-spark-seniment-analysis/index.ht ...

  6. 前端基础（JavaScript）

    JavaScript概述 JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.( ...

  7. 3.7 Templates -- Links

    一.The {{link-to}} Helper 1. 使用{{link-to}}创建一个指向route的链接: app/router.js Router.map(function() { this. ...

  8. （3）在Windows7上搭建Cocos2d-x

    工具准备 搭建开发环境需要安装工具包括 Visual Studio python ———(本教程以python2.7.3版本为例),下载地址:http://www.python.org/downloa ...

  9. cocos代码研究（20）Widget子类LoadingBar学习笔记

    理论基础 在一些操作中可视化指示进度条.显示给用户一个条表示操作已经完成了多少,继承自 Widget. 代码实践 static LoadingBar * create ()创建一个空的LoadingB ...

  10. 字王·国标二级字库汉字GB内码un码三合一对照表2016版

    国标二级字库汉字GB内码un码三合一对照表 字王2016版 汉字内码表,是制作字库的基础,简单.便利的版本很少,根据实战经验,特此制作这个三合一版本的汉字.GB内码.Unicode码对照表: l 提供 ...