前端Vue的基础操作(三)
1. axios请求示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jerome</title>
<!--引入 JS 文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<!--在线引入axios。在项目开发中会安装axios组件(npm install axios)-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<!--
axios.request（config）
axios.get（url [，config]）
axios.delete（url [，config]）
axios.head（url [，config]）
axios.post（url [，data [，config]]）
axios.put（url [，data [，config]]）
axios.patch（url [，data [，config]]）
当使用别名方法时(axios.xxx)，不需要在config中指定url，method和data属性。
-->
<body>
<div id="app">
<div>{{info.name}}</div>
<div>{{info.address}}</div>
<a v-bind:href="info.url">Jerome</a>
</div>
<script>
var app = new Vue({
el: "#app",
//data: 属性
data: function () {//需要处理(返回)后台数据在页面上渲染时使用
return {
//请求的返回参数格式必须和json字符串一样
info: {
name: null,//相当于形参占位，实际参数data.json会赋予
url: null,
address: {
street: null,
city: null,
country: null
}
}
}
},
mounted: function () {
//mounted钩子函数，可以调用methods中定义的函数
/*
axios({
method: 'post',
url: '/test/4r42',
data: {
firstName: 'qizai',
lastName: 'Jerome'
},
header: {"token": "decrypt"}
});
*/
axios.get('json/1.data.json').then(resp => (this.info = resp.data));
}
})
</script>
</body>
</html>
1.data.json文件
{
"name": "Jerome",
"url": "https://bree.vip",
"page": 1,
"isNonProfit": true,
"address": {
"street": "Jom",
"city": "广东深圳",
"country": "中国"
},
"links": [
{
"name": "GitHub",
"url": "https://github.com"
},
{
"name": "Jerome",
"url": "https://bree.vip"
},
{
"name": "百度",
"url": "https://www.baidu.com/"
}
]
}
2. computed计算属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jerome</title>
<!--引入 JS 文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<!--在线引入axios。在项目开发中会安装axios组件(npm install axios)-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<!--
计算属性是基于他们的依赖进行缓存的，只有在相关依赖发生改变时，他们才会重新求值，也就是说，只要他的依赖没有发生变化，
那么每次访问的时候计算属性都会立即返回之前的计算结果，不再执行函数
每次触发重新渲染时，调用方法将总会再次执行函数
-->
<body>
<div id="app">
<input type="text" v-model="num1"/> + <input type="text" v-model="num2"/>
<p>求和结果{{result}}</p>
</div>
<script>
var app = new Vue({
el: "#app",
data: {num1: 1, num2: 2},
computed: {//计算属性
result: function () {
return parseInt(this.num1) + parseInt(this.num2);
}
}
})
</script>
</body>
</html>
