前端框架Vue------＞第一天学习（3）
8 、使用Axios实现异步通信
8.1 什么是Axios
Axios是一个开源的可以用在浏览器端和Node.js的异步通信框架，她的主要作用就是实现AJAX异步通信，功能特点
- 从浏览器中创建XMLHttpRequests
- 从node.js创建http请求
- 支持Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换json数据
- 客户端支持防御XSRF（跨站请求伪造）
data.json
{
"name": "百度",
"url": "http://www.baidu.com",
"page": 66,
"isNonProfit": true,
"address": {
"street": "沈丘",
"city": "周口市",
"country": "中国"
},
"links": [
{
"name": "Google",
"url": "http://www.google.com"
},{
"name": "Baidu",
"url": "http://www.baidu.com"
},
{
"name": "Sougou",
"url": "http://www.sougou.com"
}
]
}
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<title>Axios异步通信</title>
</head>
<body style="background-color: pink">
<div id="app">
<div>
名称:{{info.name}}
</div>
<div>
url:<a v-bind:href="info.url" target="_blank">{{info.url}}</a>
</div>
<ul>
<li v-for="list in info.links">
{{list.name}}----->{{list.url}}
</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data(){
return{
info:{
name:'',
url:'',
links:[]
}
}
},
mounted(){
axios
.get('data.json')//拿到当前的数据路径
.then(response =>this.info=response.data)
}
})
</script>
</body>
</html>
9 、表单输入绑定
9.1 、 什么是双向数据绑定
当数据发生变化时、视图也就发生变化，当视图发生变化时，数据也会跟着同步变化
9.2 、为什么要实现数据的双向绑定
在全局性数据流使用单项，方便跟踪，局部性数据流使用双向，简单易操作
9.3 、在表单中使用双向数据绑定
v-model指令在表单<input>、<textarea>、及<select>元素创建双向数据绑定。会根据控件类型自动选取正确的方法来更新元素。初始值来自vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<title>表单输入绑定</title>
</head>
<body style="background-color: pink">
<div id="app">
<input type="text" v-model="message">
<p>message:{{message}}</p>
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
message:"hello vue",
selected:''
}
})
</script>
</body>
</html>
前端框架Vue------＞第一天学习（3）的更多相关文章
- 前端框架Vue------＞第一天学习、Vue学习的路径、Vue官网（1）
文章目录 1.学习目标 2.前端知识体系 2.1 前端三要素 2.2.MVVM 3.第一个Vue程序 4.Vue实例的生命周期 vue的官方文档:https://cn.vuejs.org/ 1.学习目 ...
- 前端框架Vue------＞第一天学习（2） v-if
API:https://cn.vuejs.org/v2/api/#key 文章目录 5.条件渲染 5.1 . v-if 5.2 . v-else-if 6 .列表渲染 7 .事件监听 5.条件渲染 5 ...
- (转)2018几大主流的UI/JS框架——前端框架 [Vue.js(目前市场上的主流)]
https://blog.csdn.net/hu_belif/article/details/81258961 2016年开始应该是互联网飞速发展的几年,同时也是Web前端开发非常火爆的一年,Web ...
- 前端框架vue.js系列（9）：Vue.extend、Vue.component与new Vue
前端框架vue.js系列(9):Vue.extend.Vue.component与new Vue 本文链接:https://blog.csdn.net/zeping891103/article/det ...
- 可能是目前最完整的前端框架 Vue.js 全面介绍
Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架. 摘要 2016年最火的前端框架当属Vue.js了,很多使用过vue的程序员这样评价它,“vue.js兼具angul ...
- 前端框架 vue 和 react 的区别
前言:最近需要使用 react,以前用过 vue,故来总结两者的区别. 首先React与vue有几点相同之处 1.都使用了Virtual DOM 2.提供了响应式(Reactive)和组件化(Comp ...
- 前端框架 Vue 初探
一.前言 前几日使用微信网页版时,好奇这个网页用了什么前端框架.用Chrome的开发人员模式一探到底,发现原来用了一个名叫 Angular 的框架.好吧,既然微信用了.那我也最好还是看看.等等,你这篇 ...
- 前端框架VUE——安装及初始化
本篇文章适合,想要学习 vue,但对 vue 又没有接触过的同学阅读,是非常基础的内容.告诉大家使用 vue 时的安装方式,及如何创建实例,展示内容. 一.安装方式 vue 是一种前端框架,所以使用前 ...
- 前端框架vue学习笔记：环境搭建
兼容性 不兼容IE8以下 Vue Devtools 能够更好的对界面进行审查和调试 环境搭建 1.nodejs(新版本的集成了npm)[npm是node包管理 node package manager ...
随机推荐
- 6.1 NOI 模拟
\(T1\ pocky\) 要求式子 \[\sum_{i=2}^n a_i\times \gcd(a_i,a_{i-1}) \] 考虑可以枚举\(a_i,a_{i-1}\)的值,然后插板法,枚举每个位 ...
- 万答#6，MySQL最多只能用到128个逻辑CPU，是真的吗
GreatSQL社区原创内容未经授权不得随意使用,转载请联系小编并注明来源. 江湖传言MySQL最多只能用到128个逻辑CPU,是真的吗? 同事从客户现场回来,委屈巴巴的说,某PG服务商告诉客户&qu ...
- CSS（上）
css sprite是什么,有什么优缺点 概念:将多个小图片拼接到⼀个图⽚中.通过 background-position 和元素尺寸调节需要显示的背景图案. 优点: 减少 HTTP 请求数,极⼤地提 ...
- Apache DolphinScheduler 荣获国外知名媒体采访
Apache DolphinScheduler 毕业的消息被北美科技媒体 TheNewStack 关注并邀请Apache DolphinScheduler PMC chair 代立冬 进行相关采访. ...
- MyBatis ognl.NoSuchPropertyException 或者 Invalid bound statement (not found)
描述 SpringBoot + Mybatis-plus 项目,运行时出现如下错误: ognl.NoSuchPropertyException:没有对应属性异常 Invalid bound state ...
- python常量与变量的本质
python语法常量与变量的本质 python语法之注释 1.python语法注释有哪几种? (1.)单行注释 # 井号键单行注释 使用方法:首先在另起一行按('#')井号键进行注释,如果需要代码后面 ...
- 记一次血淋淋的MySQL崩溃修复案例
摘要:今天给大家带来一篇MySQL数据库崩溃的修复案例 本文分享自华为云社区<记一次MySQL崩溃修复案例,再也不用删库跑路了>,作者: 冰 河. 问题描述 研究MySQL源代码,调试并压 ...
- awk5个使用场景
awk简介 首先要知道awk的使用场景,需了解awk有哪些优势与短板. 关于个人近期学习awk总结其优势: awk对文本的处理运算效率同比其他工具效率高很多(比shell的for循环高10倍以上,运算 ...
- 报错：selenium.common.exceptions.InvalidArgumentException: Message: invalid argument: missing 'name'
代码运行到这:driver.add_cookie(cookies),报错了 相信坑了不少人,接下来是解决办法 driver.add_cookie(cookies) cookies = { " ...
- 【读书笔记】C#高级编程 第十九章 程序集
(一)程序集的含义 程序集是.NET用于部署和配置单元的术语. .NET应用程序包含一个或多个程序集.通常扩展名是EXE或DLL的.NET可执行程序称为程序集. 程序集是自我描述的安装单元,由一个或多 ...