5-3 5.3组件构建ppt课件 Vue.js基础与应用开发实战（微课版）.pptx

《5-3 5.3组件构建ppt课件 Vue.js基础与应用开发实战（微课版）.pptx》由会员分享，可在线阅读，更多相关《5-3 5.3组件构建ppt课件 Vue.js基础与应用开发实战（微课版）.pptx（14页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、5-3 5.3 组件构建教学课件 Vue.js基础与应用开发实战（微课版）5.3 组件构建5.3.1 使用extend方法构建组件调用Vue.extend()方法，全局注册一个名字为app-component的组件的基本过程如下所示。【示例】：demo050301.html使用extend方法构建组件的过程如下：1定义变量appComvar appCom=Vue.extend(template:这是组件 )其中template定义模板的标签，模板的内容需写在该标签下。2构建注册组件app-component/注册名为app-component的组件Vponent(app-component,a

2、ppCom);3定义vue实例var app=new Vue(el:#app)4使用组件 5.3.2 使用template标签构建组件模板代码通常写在HTML结构中，这样可以改善开发体验，提高开发效率。Vue提供了标签来定义结构的模板，可以在该标签中书写HTML代码，然后通过id值绑定到属性上。使用template标签构建组件，需在template标签上加id属性，用于以后的组件注册。【示例】：demo050302.html代码如下：欢迎登录【示例】：demo050302.html /创建根实例 var vm=new Vue(el:#app,components:app-component:t

3、emplate:#content )5.3.3 使用script标签构建组件使用script标签构建组件时，同样需加id属性，同时还得加type=text/x-template，加这个是为了告诉浏览器不执行编译里面的代码。对于以下自定义组件app-component：局部注册组件app-component的示例代码如下：【示例】：demo050303.html代码如下：欢迎登录 【示例】：demo050303.htmlvar vm=new Vue(el:#app,components:app-component:template:#content )全局注册组件app-component的示例代码如下：欢迎登录Vponent(app-component,template:#content)上面的代码等价于Vponent(app-component,template:欢迎登录)快乐学习！高效学习！快乐学习！高效学习！祝学习进步！祝学习进步！