vue：组件，异步通信，计算属性

一，组件

　　起到封装的作用，是可复用的（模板实现）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">

    <!--组件，传递给组件中的值：props,(通过v-bind绑定)-->
    <king v-for="item in items" v-bind:it="item"></king>

</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>

    //定义一个Vue组件component
    //定义组件名king
    Vue.component("king",{
        props:["it"],
        <!--模板，实现复用-->
        template:'<li>{{it}}</li>'
    });

    //创建一个Vue对象
    var vm =new Vue({
        //绑定
        el:"#app",
        //存放数据
        data:{
             items:["Java","Linux","c++"]
        }
    });

</script>


</body>
</html>

小结：1，Vue组件（component）和Vue对象属于平行的层次，所以两者如果想取得联系要通过第三方才能实现，

　　　2，步骤：创建Vue对象，绑定事件（el：），存放数据（data：）或者（data（）），一个是属性，一个是方法

　　　　　　　创建Vue组件，king（组件名），props[name]来实现传值，template:(模板)

　　　　　　　第三方，在里面实现传值

二，异步通信

　　网络异步通信：JQuery+xml（Ajax）就能完美的实现

　　但，由于整体太过繁重，axios开始流行（Vue）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="vue">
    <div>{{info.name}}</div>
</div>

<!--引入js文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script src="https://unpkg.coln/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    var vm=new Vue({
        el:"#vue",

        //data:属性：vm（Vue对象）
        //这个是方法
        data(){
            return{
                //请求的返回参数格式，必须和json字符串一样
                info:{
                    name:null,
                    address:{
                        street:null,
                        city:null,
                        country:null
                    }
                }
            }
        },
        mounted(){//钩子函数,链式编程，ES6的新特性,获得，注入参数
            axios.get('../data.json').then(response=>(this.info=response.data));
        }
    });

</script>

</body>
</html>

注解：data（）中的放回参数格式可以不用全写，但写的必须与json格式一致

三，计算属性、

计算属性：计算出来的结果，保存在属性中。内存中运行：虚拟Dom，通俗的说：他就是一个将结算结果缓存起来的属性，可以想象成缓存

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <p>{{Time1()}}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            message:"hello,king"
        },
        //里面写的是方法
        methods:{//调用时要调用方法
            Time1:function (){
                return Date.now();//返回一个时间戳
            }
        },
        computed:{//计算属性:调用时使用属性即可
            Time2:function (){
                return Date.now();//返回一个时间戳
            }
        }
    });

</script>

</body>
</html>

小结：