template教程

朵朵宝

已于 2022-11-13 13:31:30 修改

阅读量1.4k

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

于 2022-11-11 10:20:58 首次发布

本文链接：https://blog.csdn.net/magic_818/article/details/127800968

版权

Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在Vue中使用自定义模板。首先，通过`<template>`标签定义了一个显示用户列表的模板，然后将其注册为Vue的组件。接着，在Vue实例的`<div>`元素中使用该组件。最后，展示了完整的HTML和JavaScript代码实现。

摘要由CSDN通过智能技术生成

一、自定义模板

1.1、通过template标签定义模板

<!-- 显示用户列表的模板(网页)-->
<template id="template01">
    <div>
        <h1>这是一个用户列表</h1>
        <p>
            这是一个表格，你需要点想象力
        </p>
    </div>
</template>

1.2、将模板注册到Vue的Component中

//将用户列表模板注册到vue
Vue.component('hello1', {
    template: '#template01'
});

1.3、在div中使用模板

<div id="app">
    <hello1></hello1>
</div>

1.4、完成代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue的js库-->
    <script src="assets/vue.min-v2.5.16.js"></script>
</head>
<body>
    <!-- 显示用户列表的模板(网页)-->
    <template id="template01">
        <div>
            <h1>这是一个用户列表</h1>
            <p>
                这是一个表格，你需要点想象力
            </p>
        </div>
    </template>

    <!-- 添加用户的模板（网页） -->
    <template id="template02">
        <div>
            <h1>这是一个添加用户的页面</h1>
        </div>
    </template>

    <div id="app">
        <hello1></hello1>
    </div>
    <script>
        //将用户列表模板注册到vue
        Vue.component('hello1', {
            template: '#template01'
        });

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