Vue 教程(十八)template 标签

Posted 2021-09-04 _否极泰来_

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue 教程(十八)template 标签相关的知识，希望对你有一定的参考价值。

Vue 教程(十八)template 标签

template标签

标签必须加 id
使用模板时，需要的中横线

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板化组件</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <template id="bookTemplate">
        <div>
            <h3>{{title}}</h3>
            <p>计算机|网络|人工智能</p>
        </div>
    </template>

    <div id="app">
        <book-component></book-component>
    </div>

    <script>
        Vue.component('book-component', {
            template:"#bookTemplate",
            data () {
                return {
                    title:"计算机系列丛书"
                }
            }
        });

        const app = new Vue({
            el:"#app"
        })
    </script>
</body>
</html>

– 以上为《Vue 教程(十八)template 标签》，如有不当之处请指出，我后续逐步完善更正，大家共同提高。谢谢大家对我的关注。

——厚积薄发(yuanxw)

以上是关于Vue 教程(十八)template 标签的主要内容，如果未能解决你的问题，请参考以下文章

Vue 教程(二十八)webpack 使用 css 文件