Vue(2)
六：Vue组件
组件是可以重复用的Vue实列，说白了就是一组可以重复使用的模板，跟JSTL的自定义标签，Thymeleaf的替换：fragment等框架有着异曲同工之妙，通常一个应用会以一颗嵌套的组件数的形式来组织。
使用Vue.component（）方法注册组件
使用props属性传递参数，我们是需要传递参数到组件的，此时就需要使用props属性了
列子：
<body> <div id="app"> //这里我们直接使用我们的组件 <zph>123</zph> </div> <script> //定义一个Vue组件component Vue.component("zph",{ Template: '<h1>74455</h1>' } ) }); </script> </body>
列二：体现组件的工作原理
<body> <div id="app"> //组件：传递给组件中的值：props <zph v-for="team in messages" v-bind:pin="team"></zph> </div> <script> //定义一个Vue组件component Vue.component("zph",{ props: ['pin'], template: '<h1>{{pin}}</h1>' }); var vm=new Vue({ //el绑定标签，data是指数据 el: "#app", data: { messages: ["java","c++","c"], }, }); </script> </body>
我们要通过组件读取的时候，我们要在上面的<zph>进行遍历，遍历以后我们进行将每个值绑定给pin，这个时候我们底下定义的组件template读取的时候要通过props进行读取，然后再传给<h1>
·v-for=‘’item in items” ：遍历Vue实列中定义名为items的数组，并创建同等数量的组件
·v-bind：item=“item”：将遍历的item项绑定到组件中props定义的名为item属性上；=号左边的item为props定义的属性名，右边的为item in items中遍历的item项的值。
七：Axios异步通信
①.什么是Axios
Axios是一个开源的可以用在浏览器端和Node.js的异步通信框架，她的主要作用就是实现Ajax异步通信，其功能特点如下：
·从浏览器中创建XMLHttpRequests
·从node.js创建http请求
·支持PromiseApi【js链式编程】
·拦截请求和响应
·转换请求数据和响应数据
·取消请求
·自动转换json数据
·客户端支持防御XSRF（跨站请求伪造）
②.为什么要使用Axios
由于Vue.js是一个视图层框架，所以Vue.js并不包含Ajax的通信功能，为了解决通信问题，作者单独开发了一个名为vue-resource的插件，不过在进入2.0版本以后停止 了对该插件的维护并推荐Axios框架，少用Jquery，因为它操作dom太频繁。
此时我用的cdn直接从网站上的：
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
我们用的钩子函数来进行Axios异步
<body> <div id="app"> <div>{{info.name}}</div> <div>{{info.version}}</div> <a v-bind:href="info.url">点我</a> 这里一定要用v-bind来进行绑定，不然的话实现不了url </div> <script> //定义一个Vue组件component // Vue.component("zph",{ // props: ['pin'], // template: '<h1>{{pin}}</h1>' // }); var vm=new Vue({ //el绑定标签，data是指数据 el: "#app", data(){ //请求的返回参数合格，必须和json字符串一样 return{ info:{ name: null, version: null, url: null } } }, mounted(){//钩子函数，链式编程，ES6新特性 axios.get('package.json').then(response=>(this.info=response.data)); } }); </script> </body>
本章结束
