什么是组件

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

例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它像导航链接、博文之类的组件

Vue组件

注意：在实际开发中，我们并不会用以下方式开发组件，而是采用vue-cli创建.vue模板文件的方式开发，以下方式只是为了让大家理解什么是组件

使用Vueponent()方法注册组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- view层 模板-->
<div id = "app">
    <!--组件：传递给组件的值：props-->
    <lai v-for="item in items" v-bind:l="item"></lai>
</div>


<!--1. 导入Vue.js-->
<script src="https://cdn.jsdelivr/npm/vue@2.5.21/dist/vue.min.js"></script>

<script>
    <!--定义一个Vue组件的component-->
    Vue.component("lai",{
            props: ['l'],
            template: "<li>{{l}}</li>"
        });
    var vm = new Vue({
        el: "#app",
        data: {
            items: ["Java","Linux","前端"]
        }
    });
</script>
</body>
</html>

Vueponent()：注册组件
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程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--v-clock：解决闪烁问题-->
    <style>
        [v-clock]{
            display: none;
        }
    </style>
</head>
<body>
<div id = "vue" v-clock>
    {{info.name}}
    <a v-bind:href="info.url">点我</a>
</div>
<!--引入JS文件-->
<script src="https://cdn.jsdelivr/npm/vue@2.5.21/dist/vue.js"></script>
<script src="https://unpkg/axios/dist/axios.min.js"></script>
<script 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));
        }
    });
</script>


</body>
</html>

Vue的生命周期

Vue的实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂在DOM、渲染->更新->渲染、卸载等一系列过程，我们称为Vue的生命周期。通俗来说就是Vue实例从创建到销毁的过程，就是生命周期

在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册JS方法，可以让我们用自己注册的JS方法控制整个大局，在这些事件响应方法中的this直接指向的是Vue的实例


计算属性

什么是计算属性

计算属性的重点突出在属性两个字上（属性是名词），首先它是个属性，其次这个属性有计算的能力（计算是动词），这里的计算是一个函数；简单来说，它就是一个能够将计算结果缓存起来的属性（将行为转化为静态的属性），仅此而已；可以想象为缓存

计算出的结果放在一个属性中，放在内存里

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--v-clock：解决闪烁问题-->
    <style>
        [v-clock]{
            display: none;
        }
    </style>
</head>
<body>
<div id = "app">
    <p>{{currentTime1()}}</p>
    <p>{{currentTime2}}</p>
</div>
<!--引入JS文件-->
<script src="https://cdn.jsdelivr/npm/vue@2.5.21/dist/vue.js"></script>
<script src="https://unpkg/axios/dist/axios.min.js"></script>
<script 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();//返回一个时间戳
            }
        }

    });
</script>


</body>
</html>

说明：

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

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

更多推荐

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