使用script或template标签注册组件

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

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

相关阅读

相关 art-template用户注册方法

应用场景nodejs Express框架，使用art-template模板引擎。后台注册方法代码： var template = require('art-tem

雨点打透心脏的1/2处/ 2023年10月17日 20:43/ 0 赞/ 6 阅读

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

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

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

相关 JavaScript ＜script＞标签

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

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

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

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

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

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

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

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

相关 javascript的script标签介绍

相信很多同学都写过html和javascript，而由html转向javascript的第一步都少不了写script这个标签。这么简单的标签为什么还要拿来讲呢，因为它有时候非常

Myth丶恋晨/ 2022年05月27日 03:51/ 0 赞/ 213 阅读

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

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

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

相关 script标签属性

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

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

相关 script标签与访问

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

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

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

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

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