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

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，参 数 为组件名称/组件名称与页面中的标签名称对应/组 件 名 称 还 可 以 使 用 驼 峰 法 命 名，这 里 也 可 命 名 为buttonCounterVponent(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值，它们各自统计自己被单击的次数。2data必须是一个函数一般地，我们在Vue实例对象或Vue组件对象中，我们通过data来传递数据。当定义这个组件时，可以发现它的data并不是像这样直接提供一个对象：data:count:0取而代之的是，一个组件的data选项必须是一个函数，因此每个组件返回全新的data对象，每个counter都有它自己内部的状态了。data:function()return count:0 如果Vue没有这条规则，单击一个按钮就可能会影响到其它所有实例。快乐学习！高效学习！快乐学习！高效学习！祝学习进步！祝学习进步！