狂神Vue学习|狂神Vue学习03（Vue组件、网络通信、Vue的生命周期、计算属性）狂神Vue学习|vue

什么是组件组件就是可复用的Vue实例，说白了就是一组可以重复使用的模板，跟JSTL的自定义标签、Thymeleaf的th:fragment等框架有着异曲同工之妙。通常一个应用会以一颗嵌套的组件树的形式来组织

文章图片

例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它像导航链接、博文之类的组件
Vue组件注意：在实际开发中，我们并不会用以下方式开发组件，而是采用vue-cli创建.vue模板文件的方式开发，以下方式只是为了让大家理解什么是组件
使用Vue.component()方法注册组件

Title - 锐客网 src="http://img.readke.com/220415/1K5032Z0-1.jpg">>Vue.component("lai",{ props: ['l'], template: "{{l}}" }); var vm = new Vue({ el: "#app", data: { items: ["Java","Linux","前端"] } });

Vue.component()：注册组件
lai：自定义的组件名字
template：组件的模板
template里的数据从props属性中拿，而props的属性又通过v-bind和item绑定
网络通信 Axios异步通信什么是Axios
Axios是一个开源的可以用在浏览器端和NodeJS的异步通信框架，它的主要作用是实现AJAX异步通信，其功能特点如下：

从浏览器中创建XMLHttpRequests
从node.js创建http请求
支持Promise API【JS中的链式编程】
拦截请求和相应
转换请求数据和相应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF（跨站请求伪造）

为什么要用Axios
由于vue.js是一个视图层框架，并且作者严格遵守SOC（关注度分离原则），所有vue.js并不包含AJAX的通信功能，为了解决通信问题，作者单独开发了一个名为vue-resource的插件，不过在进入2.0版本后停止对于该插件的维护并推荐了Axios框架。少用jQuery，因为它操作DOM太频繁
第一个Axios程序

Title - 锐客网> [v-clock]{ display: none; } {{info.name}} 点我 src="http://img.readke.com/220415/1K5035346-2.jpg"> src="http://img.readke.com/220415/1K5032293-3.jpg"> type="text/javascript"> var vm = new Vue({ el: '#vue', //与data不一样，data是一个属性，而data()不是 data(){ return { //请求的返回参数格式，必须和json字符串一样 info: { name: null, address: { country: null, city: null, street: null }, url: null } } },mounted(){ //钩子函数,链式编程,ES6的新特性 axios.get('../data.json').then(response=>(this.info = response.data)); } });

Vue的生命周期 Vue的实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂在DOM、渲染->更新->渲染、卸载等一系列过程，我们称为Vue的生命周期。通俗来说就是Vue实例从创建到销毁的过程，就是生命周期
在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册JS方法，可以让我们用自己注册的JS方法控制整个大局，在这些事件响应方法中的this直接指向的是Vue的实例

狂神Vue学习|狂神Vue学习03（Vue组件、网络通信、Vue的生命周期、计算属性）

文章图片

文章图片

计算属性什么是计算属性 【狂神Vue学习|狂神Vue学习03（Vue组件、网络通信、Vue的生命周期、计算属性）】计算属性的重点突出在属性两个字上（属性是名词），首先它是个属性，其次这个属性有计算的能力（计算是动词），这里的计算是一个函数；简单来说，它就是一个能够将计算结果缓存起来的属性（将行为转化为静态的属性），仅此而已；可以想象为缓存
计算出的结果放在一个属性中，放在内存里

Title - 锐客网> [v-clock]{ display: none; } {{currentTime1()}} {{currentTime2}} src="http://img.readke.com/220415/1K5035346-2.jpg"> src="http://img.readke.com/220415/1K5032293-3.jpg"> type="text/javascript"> var vm = new Vue({ el: '#app', data: { message: "hello" }, methods: { currentTime1: function (){ return Date.now(); //返回一个时间戳 } }, computed: { //计算属性，methods，computed的方法名不能重名，重名之后只会调用methods中的方法 currentTime2: function (){ this.message; return Date.now(); //返回一个时间戳 } }});

说明：

methods：定义方法，调用方法使用currentTime1()，需要带括号
computed：定义计算属性，调用属性使用currentTime2，不需要带括号；this.message是为了能够让currentTime2观察到数据变化而变化
如过在方法中的值发生变化，则缓存就会刷新，可以在控制台中使用vm.message="lai"，改变数据的值，再次观察测试结果

结论：
调用方法时，每次都需要进行计算，既然有计算过程则必定会产生系统开销，那如果这个结果是不经常变化的呢？此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点，计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约系统开销