Vue学习笔记之组件与通信

1. 组件

1.1. 什么是组件

• 组件是可复用的Vue实例， 说白了就是一组可以重复使用的模板，通常一个应用会以一棵嵌套的组件树的形式来组织：
  
• 例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件

1.2. 第一个Vue组件

使用Vue.component()方法注册组件，格式如下：

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

• 说明：

• Vue.component()：注册组件
• pan：自定义组件的名字
• template：组件的模板

结果如下：

1.3. 使用props属性传递参数

像上面那样用组件没有任何意义，所以我们是需要传递参数到组件的，此时就需要使用props属性了！

• 说明：

• v-for="item in items"：遍历Vue实例中定义的名为items的数组，并创建同等数量的组件
• v-bind:itemchild="item"：将遍历的item项绑定到组件中props定义名为itemchild属性上；= 号左边的itemchild为props定义的属性名，右边的为item in items 中遍历的item项的值

最后结果图：

2. 通信

2.1. 什么是Axios

Axios是一个开源的可以用在浏览器端和Node JS的异步通信框架， 她的主要作用就是实现AJAX异步通信，其功能特点如下：

• 从浏览器中创建XMLHttpRequests
• 从node.js创建http请求
• 支持Promise API[JS中链式编程]
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持防御XSRF(跨站请求伪造)
  ??GitHub：https://github.com/axios/axios ??中文文档：http://www.axios-js.com/

2.2. 为什么要用Axios

由于Vue.js是一个视图层框架并且作者(尤雨溪) 严格准守SoC(关注度分离原则)所以Vue.js并不包含AJAX的通信功能， 为了解决通信问题， 作者单独开发了一个名为vue-resource的插件， 不过在进入2.0版本以后停止了对该插件的维护并推荐了Axios框架。少用jQuery， 因为它操作Dom太频繁!

2.3. 第一个Axios应用程序

咱们开发的接口大部分都是采用JSON格式， 可以先在项目里模拟一段JSON数据， 数据内容如下：创建一个名为data.json的文件并填入上面的内容， 放在项目的根目录下

{
	"sites": [{
			"name": "google",
			"url": "www.google.com"
		},
		{
			"name": "微博",
			"url": "www.weibo.com"
		}
	]
}

完整代码如下：

	
		
		
		
		
		
	
	
		

			
地名：{{info.sites[0].name}}
			
链接：{{info.sites[0].url}} 
		


		
	

结果图：

• 在这里使用了v-bind将a:href的属性值与Vue实例中的数据进行绑定
• 使用axios框架的get方法请求AJAX并自动将数据封装进了Vue实例的数据对象中
• 我们在data中的数据结构必须和Ajax响应回来的数据格式匹配！

为什么要用mounted()钩子函数呢？这就涉及到Vue实例对象的生命周期：

3. 参考资料

[1]Vue.js 介绍 — Vue.js 中文文档 (bootcss.com)

[2]Vue: 狂神Vue笔记+源码 - Gitee.com