2-1 实现模板和脚本标记的 vue 组件

最编程 2024-03-04 10:49:51

...

组件实现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">
    ![](images/pic1.jpeg)
</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>标签内定义的内容。

上一篇： javascript 简介标记 javascript 参考

下一篇：网络前端】标签手册 HTML/CSS/JavaScript

2-1 实现模板和脚本标记的 vue 组件

1.组件实现template标签

2.组件实现script标签

vue2-org-tree 基于 VUE 的部门组织结构组件，添加和删除节点的实现

[Vue.js] Vue.js 组件库中的树形控件、分页、标记、头像和警告元素

2-1 实现模板和脚本标记的 vue 组件