使用script或template标签注册组件

淡淡的烟草味﹌ 2021-09-27 13:58 320阅读 0赞

### 1 why ###

为了简化组件的注册，template选项中在拼接HTML比较麻烦，这也导致了HTML和JS的高耦合性。

### 2 how ###

### 2.1 使用script注册组件 ###

<div id="app">
    		<my-component></my-component>
    	</div>
    
    	<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    	<script type="text/x-template" id="myComponent">
    		<div>这是一个组件</div>
    	</script>
    	
    	<script type="text/javascript">
    		Vue.component('my-component',{
    			template : '#myComponent',
    		});
    
    		new Vue({
    			el:"#app",
    		});
    	
    	</script>

### 2.2 使用template注册组件     ###

<div id="app">
    		<my-component></my-component>
    	</div>
    
    	<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    	<template id="myComponent">
    		<div>这是一个组件</div>
    	</template>
    	
    	<script type="text/javascript">
    		Vue.component('my-component',{
    			template : '#myComponent',
    		});
    
    		new Vue({
    			el:"#app",
    		});
    	</script>

区别 ： 使用template注册组件不需要写 type属性。

发表评论取消回复

表情：

评论列表（有 0 条评论，320人围观）

还没有评论，来说两句吧...

相关阅读

相关为什么使用HTML ＜template＞标签？

随着 React、Vue、Angular 和所有其他前端 JavaScript 框架如此流行，许多人忘记了普通的 HTML 和 JavaScript，但今天构建的大多数网站仍然

客官°小女子只卖身不卖艺/ 2023年10月01日 17:20/ 0 赞/ 14 阅读

相关 Vue中的template标签的使用和在template标签上使用v-for

[Vue中的template标签的使用和在template标签上使用v-for][Vue_template_template_v-for] 我们知道 .vue 文件的基

旧城等待，/ 2023年02月26日 14:27/ 0 赞/ 15 阅读

相关 script标签的type为text/template模板的使用

在js里面，经常需要使用js往页面中插入html内容。比如这样： var number = 123; $('\d').append('<div cl

系统管理员/ 2023年01月20日 15:51/ 0 赞/ 85 阅读

相关 JavaScript ＜script＞标签

目录 1. HTML中使用JavaScript。 1.1 直接将JavaScript代码放入<script>标签中。 1.2 通过src引

拼搏现实的明天。/ 2022年12月16日 09:19/ 0 赞/ 207 阅读

相关 vue注册组件跟注册局部组件

vue注册组件跟注册局部组件 > 由于以前都是用脚手架写的项目，因此常常忽略了这一点，由于最近入驻的公司是关于直播广告活动的，因此都是基于vue.js写出的项目，废话不多

红太狼/ 2022年11月09日 14:22/ 0 赞/ 223 阅读

相关 html 标签内script,HTML中的script标签研究

Script 的堵塞(block)特性 Scripts without async or defer attributes, as well as inline script

妖狐艹你老母/ 2022年10月07日 12:46/ 0 赞/ 214 阅读

相关 vue插件（自定义组件或js文件使用），vue.extend()，vue.component()注册组件

一、vue.use()自定义组件或者引用第三方组件（即vue文档中的插件）？参考：https://cn.vuejs.org/v2/guide/plugins.html

淩亂°似流年/ 2022年05月24日 07:18/ 0 赞/ 261 阅读

相关 script标签属性

![70][] [70]: /images/20220521/f3cdfb5b7ca9421595f60fe5cc125f1b.png

╰半橙微兮°/ 2022年05月20日 22:34/ 0 赞/ 262 阅读

相关 script标签与访问

onclick ,当鼠标点击一下时执行一次 onmouseover ,当鼠标放上去时执行一次 onmouseout ,当鼠标移出去时执行一次 onmou

爱被打了一巴掌/ 2021年11月22日 03:28/ 0 赞/ 335 阅读

相关使用script或template标签注册组件

1 why 为了简化组件的注册，template选项中在拼接HTML比较麻烦，这也导致了HTML和JS的高耦合性。 2 how 2.1 使用script注册组件

淡淡的烟草味﹌/ 2021年09月27日 13:58/ 0 赞/ 321 阅读