1. 组件

1.1. 什么是组件

  • 组件是可复用的Vue实例， 说白了就是一组可以重复使用的模板，通常一个应用会以一棵嵌套的组件树的形式来组织：

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

1.2. 第一个Vue组件

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

  1. <div id="app">
  2.   <pan></pan>
  3. </div>
  5. <script type="text/javascript">
  6.     //先注册组件
  7.     Vue.component("pan",{
  9.         template:'<li>Hello</li>'
  11.     });
  12.     //再实例化Vue
  13.     var vm = new Vue({
  14.         el:"#app",
  15.     });
  16. </script>
  • 注意：在实际开发中，我们并不会用以下方式开发组件，而是采用vue-cli创建，vue模板文件的方式开发，以下方法只是为了理解什么是组件

    完整代码：
  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title>组件与通信</title>
  6. 		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
  7. 		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  8. 	</head>
  9. 	<body>
  10. 		<div id="app">
  11. 			<pan></pan>
  12. 		</div>
  13. 		<script type="text/javascript">
  14. 			//先注册组件
  15. 			Vue.component("pan",{
  17. 			    template:'<li>Hello</li>'
  19. 			});
  20. 			var app = new Vue({
  21. 				el: "#app",
  22. 				data: {
  24. 				}
  25. 			})
  26. 		</script>
  27. 	</body>
  28. </html>
  • 说明：
  • Vue.component()：注册组件
  • pan：自定义组件的名字
  • template：组件的模板

结果如下：

1.3. 使用props属性传递参数

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

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title>组件与通信</title>
  6. 		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
  7. 		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  8. 	</head>
  9. 	<body>
  10. 		<div id="app">
  11. 			<!--组件，传递给组件中的值：props-->
  12. 			<cpn v-for="item in items" v-bind:itemchild="item" />
  13. 		</div>
  15. 		<script>
  16. 			// 定义一个vue组件component组件
  17. 			Vue.component("cpn", {
  18. 				props: ['itemchild'],
  19. 				template: `<li>{{itemchild}}</li>`
  20. 			})
  21. 			var vm = new Vue({
  22. 				el: '#app',
  23. 				data: {
  24. 					items: ['Java', 'Linux', '前端']
  25. 				}
  26. 			});
  27. 		</script>
  28. 	</body>
  29. </html>
  • 说明：
  • 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的文件并填入上面的内容， 放在项目的根目录下

  1. {
  2. 	"sites": [{
  3. 			"name": "google",
  4. 			"url": "www.google.com"
  5. 		},
  6. 		{
  7. 			"name": "微博",
  8. 			"url": "www.weibo.com"
  9. 		}
  10. 	]
  11. }

完整代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title>组件与通信</title>
  6. 		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
  7. 		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  8. 		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  9. 	</head>
  10. 	<body>
  11. 		<div id="app">
  12. 			<div>地名：{{info.sites[0].name}}</div>
  13. 			<div>链接：<a v-bind:href="info.url" target="_blank">{{info.sites[0].url}}</a> </div>
  14. 		</div>
  16. 		<script>
  17. 			// 定义一个vue组件component组件
  18. 			Vue.component("cpn", {
  19. 				props: ['itemchild'],
  20. 				template: `<li>{{itemchild}}</li>`
  21. 			})
  22. 			var vm = new Vue({
  23. 				el: '#app',
  24. 				data() {
  25. 					return {
  26. 						info: {
  27. 							name: null,
  28. 							url: null
  29. 						}
  30. 					}
  31. 				},
  32. 				mounted() { //钩子函数
  33. 					axios
  34. 						.get('data.json')
  35. 						.then(response => (this.info = response.data));
  36. 				}
  37. 			});
  38. 		</script>
  39. 	</body>
  40. </html>

结果图：

  • 在这里使用了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

Vue学习笔记之组件与通信的更多相关文章

  1. vue学习笔记(八)组件校验&通信

    前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...

  2. vue学习笔记(七)组件

    前言 在前面vue的一些博客中,我们几乎将vue的基础差不多学习完了,而从本篇博客开始将会进入到vue的另一个阶段性学习,本篇博客的内容在以后的vue项目中占很大的比重,所以小伙伴们需要认真学习,本篇 ...

  3. Vue 学习笔记之 —— 组件（踩了个坑）

    最近在学习vue,学习组件时,遇到了一个问题,困扰了半个多小时.. <!DOCTYPE html> <html lang="en"> <head> ...

  4. vue学习笔记(九)vue-cli中的组件通信

    前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...

  5. Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发

    ===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...

  6. Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级

    (四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...

  7. vue学习笔记(十)路由

    前言 在上一篇博客vue学习笔记(九)vue-cli中的组件通信内容中,我们学习组件通信的相关内容和进行了一些组件通信的小练习,相信大家已经掌握了vue-cli中的组件通信,而本篇博客将会带你更上一层 ...

  8. Vue学习笔记-2

    前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...

  9. vue 学习笔记（二）

    最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...

  10. vue学习笔记之：为何data是一个方法

    vue学习笔记之:为何data是一个方法 在vue开发中,我们可以发现,data中的属性值是在function中return出来的.可为何data必须是一个函数呢?我们先看官方的解释: 当一个组件被定 ...

随机推荐

  1. 【大数据面试】sqoop：空值、数据一致性、列式存储导出、数据量、数据倾斜

    一.有没有遇到过问题,怎么进行解决的 1.空值问题 本质:hive底层存储空数据使用\n<==>MySQL存储空数据使用null 解决:双向导入均分别使用两个参数☆,之前讲过 2.数据一致 ...

  2. 云原生架构（二）环境搭建（Mac上安装Docker+Kubernetes+Istio一条龙）

    一.背景 Istio 项目由 Google 和 IBM 的团队与 Lyft 的 Envoy 团队合作启动.它已经完全在 GitHub 上公开开发.目前已经是"Service Mesh服务网格 ...

  3. Django测试脚本-单表操作(增删改查)-必知必会13条-神奇的双下划线

    目录 一:Django测试脚本 1.测试环境准备 2.tests.py 3.models.py 4.切换MySQL数据库 二:单表操作 1.pk关键字与get关键字 2.增 3.删 4.修 三:必知必 ...

  4. 一文速览 Dubbo 3.0

    本文将带你快速了解 Dubbo3 的设计背景.总体架构与核心特性.与典型用户如阿里巴巴 HSF2 的关系等.也可以通过如下部分了解更多: 小白用户,快速浏览 Dubbo3 核心特性: 下一代通信协议 ...

  5. PowerDotNet平台化软件架构设计与实现系列（14）：平台建设指南

    软件开发中常见的几种不同服务模型包括SaaS(软件即服务).LaaS(许可即服务).PaaS(平台即服务).CaaS(容器即服务).IaaS(基础设施即服务)和FaaS(功能即服务). 很多人认为Ia ...

  6. nuxt 登录注册加重置密码

    <!-- 登录弹框 --> <div class="mask" v-show="flag"> <div class="m ...

  7. JavaScript：箭头函数：作为参数进行传参

    之前已经说过,JS的函数,也是对象,而函数名是一个变量,是可以进行传参的,也即函数是可以被传参的. 只要是函数,都可以被传参,但是箭头函数的语法更为灵活,所以更方便进行传参. 如上图所示,fun1是一 ...

  8. python进阶之路2——解释器软件安装

    内容概要 计算机五大组成部分 计算机三大核心硬件 操作系统 编程与编程语言 编程语言发展史 编程语言的分类 python解释器下载与安装 python解释器多版本共存 pycharm安装 计算机五大组 ...

  9. JavaBean为何物？

    JavaBean为何物?   摘要:初学SSM框架之后,我对JavaBean这个东西开始有了简单的接触,在很久以前听见JavaBean这个词一直以为是一个非常高大上的东西,但是在仔细研究之后发现其本质 ...

  10. 2023牛客寒假算法基础集训营1 ACDEFGHKLM

    比赛链接 A 题解 知识点:模拟. 显然. (用char输入到一半直接给答案跳出,WA了两小时,无话可说. 时间复杂度 \(O(1)\) 空间复杂度 \(O(1)\) 代码 #include < ...