前言:

本文内容: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>
<!--view层 模板-->
<div id="app">
<jokerdig></jokerdig>
</div>
<!-- 引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script>
// 定义一个Vue组件component
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>
<!--view层 模板-->
<div id="app">
<jokerdig v-for="msg in items" v-bind:item="msg"></jokerdig>
</div>
<!-- 引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script>
// 定义一个Vue组件component
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>
<!-- v-clock解决数据闪烁问题-->
<style>
[v-clock]{
display: none;
}
</style>
</head>
<body>
<!--view层 模板-->
<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>
<!-- 引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<!-- 引入axios的cnd-->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
let vm = new Vue({
el: "#app",
// vm 的data 是属性
// 这里我们使用data()方法
data(){
return{
// 请求的返回参数格式,必须和json字符串一样
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 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。

Vue生命周期

计算属性

什么时计算属性

计算属性突出在属性,首先他是属性,其次这个属性有计算的能力,这里计算就是函数;简单说,它就是一个能够将计算结果缓存起来的属性(将行为转化为静态属性),可以想象为缓存。

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>
<!--view层 模板-->
<div id="app">
<!-- 调用的是方法-->
<p>时间戳:{{currentTime()}}</p>
<!-- 调用的是属性-->
<p>时间戳2:{{currentTime1}}</p>
</div>
<!-- 引入vue-->
<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: {
// 计算属性 前提是不能与data中定义的名字相同
currentTime1: function(){
this.message;
return Date.now(); // 返回时间戳+1
}
}
});
</script>
</body>
</html>

说明:

  • methods:定义方法,调用方法使用

currentTime(),需要带括号;

  • computed:定义计算属性,调用属性使用currentTime1,当this.message的值改变,currentTime1中的值也发生改变(类似缓存);

小结

计算属性的主要特性就是为了将不经常变化的计算结果进行缓存,以节约服务器资源。