文章目录
- 8 、使用Axios实现异步通信
- 9 、表单输入绑定
- 9.1 、 什么是双向数据绑定
- 9.2 、为什么要实现数据的双向绑定
- 9.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>
