前言：
本文内容：Vue组件讲解、Axios异步通信、计算属性
推荐免费Vue基础教程视频：【狂神说Java】Vue最新快速上手教程通俗易懂_哔哩哔哩_bilibili
Vue组件讲解
什么是组件
组件时可以复用的Vue实例，就是一组可以重复使用的模板，跟JSTL的自定义标签，Thymeleaf的th:fragment等类似。
第一个Vue组件
在实际开发中，我们并不会使用以下方式开发组件，而是采用vue-cli创建.vue模板文件的方式开发。
使用Vue.component()方法注册组件，格式如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<jokerdig></jokerdig>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script>
Vue.component("jokerdig",{
template:'<li>hello</li>'
})
let vm = new Vue({
el: "#app"
});
</script>
</body>
</html>
|
Vue.component()：注册组件my-component-li：自定义组件的名字template：组件的模板
使用props属性传递参数
实际开发中一般需要传递参数到组件，这时我们就要使用props属性。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<jokerdig v-for="msg in items" v-bind:item="msg"></jokerdig>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script>
Vue.component("jokerdig",{
props: ['item'],
template: '<li>{{item}}</li>'
})
let vm = new Vue({
el: "#app",
data:{
items:['Java','Linux','Html']
}
});
</script>
</body>
</html>
|
v-for="msg in items"：遍历Vue实例中定义的名为items的数组，并创建同等数量的组件。v-bind:item="msg"：将msg项绑定到组件中props定义名为item属性上；=左边的item为props定义的属性名，右边的为msg in items中遍历的msg项的值。
Axios异步通信
什么时Axios
Axios是一个开源的可以用于浏览器和NodeJS的异步通信框架，主要作用时事件AJAX异步通信，其功能特点：
- 从浏览器中创建
XMLHttpRequests
- 从node.js创建http请求
- 支持Promise API[js链式编程]
- 拦截请求和响应
- 转换请i去数据和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防御XSRF(跨站请求伪造)
axios-github
axios文档
为什么要使用Axios
由于Vue.js是一个视图层框架，严格准守SoC(关注度分离原则)，所以Vue.js并不包含AJAX的通信功能，为了解决通信问题，作者单独开发vue-resource(已停止维护)插件，现在推荐使用Axios，少使用jQuery，因为它操作Dom过于频繁。
第一个Axios应用程序
开发的接口大部分都采用JSON格式，可以现在项目里模拟一段JSON数据，数据内容如下：创建data.json文件并添加数据，放在项目根目录。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| {
"name":"Joker大雄",
"url": "http://jokerdig.com",
"page": "1",
"isNonProfit":"true",
"address": {
"street": "南稍门",
"city":"陕西西安",
"country": "中国"
},
"links": [
{
"name": "哔哩哔哩",
"url": "https://www.bilibili.com/"
},
{
"name": "Bing",
"url": "https://cn.bing.com/"
},
{
"name": "百度",
"url": "https://www.baidu.com/"
}
]
}
|
简单测试Axios
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[v-clock]{
display: none;
}
</style>
</head>
<body>
<div id="app" v-clock>
<div>{{info.name}}</div>
<div>{{info.address.country}}</div>
<div>{{info.address.city}}</div>
<div>{{info.address.street}}</div>
<a v-bind:href="info.url">点一下</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
let vm = new Vue({
el: "#app",
data(){
return{
info:{
name: null,
address:{
street: null,
city: null,
country: null
},
url: null
}
}
},
mounted(){
axios.get('data.json').then(response=>(this.info=response.data));
}
});
</script>
</body>
</html>
|
运行结果
请求时xhr的异步请求
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| Joker大雄
中国
陕西西安
南稍门
点一下
可以使用console.log打印返回的json对象
Object
address: {street: '南稍门', city: '陕西西安', country: '中国'}
isNonProfit: "true"
links: (3) [{…}, {…}, {…}]
name: "Joker大雄"
page: "1"
url: "http://jokerdig.com"
[[Prototype]]: Object
|
Vue的声明周期
Vue实例有一个完整的声明周期，也就是从开始创建、初始化数据、编译模板、挂载DOM、渲染->更新->渲染、卸载等一系列过程。
在Vue整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册JS方法，用注册的JS方法控制程序，在这些事件响应方法中的this直接指向Vue实例。
生命周期钩子
例如：created钩子可以在一个实例被创建之后执行代码
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
计算属性
什么时计算属性
计算属性突出在属性，首先他是属性，其次这个属性有计算的能力，这里计算就是函数；简单说，它就是一个能够将计算结果缓存起来的属性(将行为转化为静态属性)，可以想象为缓存。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p>时间戳：{{currentTime()}}</p>
<p>时间戳2：{{currentTime1}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
message: "jokerdig.com"
},
methods: {
currentTime: function(){
return Date.now();
}
},
computed: {
currentTime1: function(){
this.message;
return Date.now();
}
}
});
</script>
</body>
</html>
|
说明：
currentTime()，需要带括号；
- computed：定义计算属性，调用属性使用
currentTime1，当this.message的值改变，currentTime1中的值也发生改变(类似缓存)；
小结
计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约服务器资源。
