Vue 自定义模板

一、自定义模板

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、完成代码

一、自定义模板

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、完成代码