Day20 Vue元件中的网页模板

我们现在应该大概了元件到底在干嘛了，今天的话我们就来聊聊HTML模板怎麽写在我们的元件里面，通常我们常看到的可以用<template> 和 <x-template>来写。

template属性

template的方式就是我们前面所学到的，在template里把我们的HTML模板写进去就可以了。

依例自来看，我们把<div class="reader">...</div>区块封装成my-component的元件，在之後就可以在模板中使用元件了。

x-template属性

随着做的专案规模越来越大，我们的HTML模板也会越来越大，光是用template属性直接写入字串时不是那麽的方便阅读或改写。这时我们就能使用到<script id="xxx" type="text/x-template">... <script>这样的方式来封装我们的模板，次方式就称为「X-Templates」。

把script的内容写完後记得到元件的地方加入template:"id的名称"，才有办法抓到喔。

今天大致上到这里，我们明天见~