5-1 5.1.1初识组件定义ppt课件 Vue.js基础与应用开发实战（微课版）

单击此处编辑母版标题样式,单击此处编辑母版文本样式,二级,三级,四级,五级,2022/10/3,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,二级,三级,四级,五级,2022/10/3,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,5-1 5.1.1 初识组件定义教学课件 Vue.js基础与应用开发实战（微课版）,5.1.1,初识组件定义,组件是可复用的,Vue,实例，且有一个名称，以下是一个最简单的组件实例。,【,实例,5-1】,定义与使用一个名称为,button-counter,的组件,【,操作要求,】,定义一个名称为,button-counter,的组件，该组件的主要功能是记录与输出单击按钮的次数。,【,实现过程,】,使用,HTML,编辑器,Dreamweaver,创建网页,0501.html,，实现要求的功能。,（,1,）定义一个名为,button-counter,的组件,定义一个名为,button-counter,的组件的代码如下：,/Vponent(),表示注册组件的,API,，参数,为组件名称,/,组件名称与页面中的标签名称,对应,/,组件名称还可以使用驼峰法命名，这里也可命名为,buttonCounter,Vponent(button-counter,/,组件中的数据必须是一个函数，通过返回值来返回初始数据,data:function(),return,count:0,/,表示组件的模板,template:,单击了,count,次,),（,2,）把组件,button-counter,作为自定义元素来使用,在,HTML,代码中把这个组件,button-counter,作为自定义元素来使用，代码如下：,（,3,）创建根实例,通过,new Vue,创建,Vue,根实例，代码如下：,var vm=new Vue(,el:#app,),（,4,）浏览网页,0501.html,浏览网页,0501.html,，初始状态出现按钮 ，,单击,1,次后按钮变为 。,因为组件是可复用的,Vue,实例，所以它们与,new Vue,接收相同的选项，例如,data,、,computed,、,watch,、,methods,以及生命周期钩子等。仅有的例外是像,el,这样根实例特有的选项。,1,复用组件,组件可复用性很强，可以将组件进行任意次数的复用，创建网页文件,demo050101.html,，该文件中自定义组件,button-counter,的代码与网页文件,0501.html,相同，在网页,demo050101.html,对自定义的组件,button-counter,进行复用，即一次定义，多次使用。,【,示例,】,：,demo050101.html,代码如下：,/,定义一个名为,button-counter,的组件,Vponent(button-counter,data:function(),return,count:0,template:,单击了,count,次,),/,创建根实例,var vm=new Vue(,el:#app,),浏览网页,demo050101.html,，初始状态如图,5-1,所示。,图,5-1,浏览网页,demo050101.html,的初始状态,在网页,demo050101.html,的初始状态下，左侧的按钮单击,1,次，中间的按钮单击,2,次，右侧的按钮单击,3,次后，结果如图,5-2,所示。,图,5-2,网页,demo050101.html,中的按钮单击不同次数的结果,这里共使用了,3,个,button-counter,组件，每个组件都会各自独立维护它自己的,count,，因为每复用一次组件，就会有一个它的新实例被创建。单击某一个按钮时，它的,count,值会进行累加。不同的按钮有不同的,count,值，它们各自统计自己被单击的次数。,2,data,必须是一个函数,一般地，我们在,Vue,实例对象或,Vue,组件对象中，我们通过,data,来传递数据。,当定义这个,组件时，可以发现它的,data,并不是像这样直接提供一个对象：,data:,count:0,取而代之的是，一个组件的,data,选项必须是一个函数，因此每个组件返回全新的,data,对象，每个,counter,都有它自己内部的状态了。,data:function(),return,count:0,如果,Vue,没有这条规则，单击一个按钮就可能会影响到其它所有实例。,快乐学习！高效学习！,祝学习进步！,