2-1 vue 组件实现template和script标签
2017-09-05 本文已影响112人
codeTao
组件实现template和script标签
- 尽管在上面组件的组件注册的方式已经很简单，但是在template选项中拼接HTML的标签还是不符合常规的编程习惯，而且HTML元素和js代码混杂在一起造成了很大的耦合性。
- 那么，<strong>template和script标签</strong>可以帮助我们将定义在JS中的HTML模板分离出来。
1.组件实现template标签
<body>
<div id="app">
<sk-component></sk-component>
</div>
<!--1.通过template,注册一个组件-->
<template id="child">
<h1>我是自定义组件</h1>
</template>
</body>
<script src="js/vue.js"></script>
<script>
//1.实例化
Vue.component('sk-component', {
template:'#child'
});
new Vue({
el:'#app'
});
</script>
2.组件实现script标签
<body>
<div id="app">
<sk-component></sk-component>
</div>
<!--2.通过script,注册一个组件-->
<script type="text/template" id="child">
</script>
</body>
<script src="js/vue.js"></script>
<script>
//1.实例化
Vue.component('sk-component', {
template:'#child'
});
new Vue({
el:'#app'
});
</script>
注意： 两种注册方式效果一样，官方建议用第一种。
注意：使用
<script>标签时，type指定为text/x-template，意在告诉浏览器这不是一段js脚本，浏览器在解析HTML文档时会忽略<script>标签内定义的内容。
