使用script或template标签注册组件

淡淡的烟草味﹌ 2021-09-27 13:58 387阅读 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 条评论，387人围观）

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

相关阅读

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

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

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

相关 HTML ＜template＞标签

HTML <template> 标签用于保存在页面加载时不会呈现的客户端内容，但可以在运行时使用 JavaScript 对其进行实例化。模板的内容在没有使用 JavaScr

骑猪看日落/ 2023年10月01日 17:19/ 0 赞/ 14 阅读

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

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

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

相关 script标签引入

1、css写在哪？内部样式表：属性样式：“样式属性值” 内部：style双标签，包裹css样式外部(外联)：link单标签href属性，引入css文件路径

Dear 丶/ 2023年02月18日 01:45/ 0 赞/ 64 阅读

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

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

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

相关 JavaScript ＜script＞标签

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

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

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

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

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

相关 script标签属性

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

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

相关 script标签与访问

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

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

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

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

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