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>
小结：<!--计算属性computed和methods的区别，计算属性可以理解为缓存，因为只有当里面数据改变时它才会重新计算，否则一直存放在内存中，好处调用较快，节省资源-->
