vue.js的组件模板抽离的写法

上代码演示：

<div id="app">
<cpn1></cpn1>
<cpn2></cpn2>
</div>
<!--组件模板抽离的第一种写法-->
<script type="text/x-template" id="cpn1">
<div>
<h2>组件模板抽离的第一种写法,script标签的类型必须是text/x-template</h2>
</div>
</script>
<!--第二种写法：template标签-->
<template id="cpn2">
<div>
<h2>组件模板抽离的第二种，直接使用template标签</h2>
</div>
</template>
<script>
// 注册组件：第一种模板抽离写法
Vue.component('cpn1',{
template: '#cpn1'
})
// 注册组件：第二种模板抽离写法
Vue.component('cpn2',{
template: '#cpn2'
})
const app = new Vue({
el: '#app',
data: {
msg: '欢迎使用Vue.js'
}
})
</script>

1.组件模板抽离的第一种写法;

组件模板抽离的第一种写法,script标签的类型必须是text/x-template.

2.组件模板抽离的第二种写法;

直接使用template标签

总结：两种写法在标签上都需要使用id来注册组件

	{
template: '#id'
}

最后

以上就是干净柜子为你收集整理的vue.js的组件模板抽离的写法的全部内容，希望文章能够帮你解决vue.js的组件模板抽离的写法所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。