十七、模板的分离写法

■刚才,我们通过语法糖简化了Vue组件的注册过程,另外还有一个地方的写法比较麻烦,就是template模块写法。

■如果我们能将其中的HTML分离出来写,然后挂载到对应的组件上,必然结构会变得非常清晰。

■Vue提供了两种方案来定义HTML模块内容:

• 使用<script>标签
• 使用<template>标签

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

<div id="app">   <cpn></cpn> </div> <!-- 1. script标签，注意：类型必须是text/x-template --> <!-- <script type="text/x-template" id="cpnC">   <div>     <h2>我是标题</h2>     <p>我是内容，哈哈哈</p>   </div> </script> -->   <!-- 2.template标签 --> <template id="cpnC">   <div>     <h2>我是标题</h2>     <p>我是内容，哈哈哈</p>   </div> </template> <script>   //1.注册一个全局组件   Vue.component("cpn",{     template: '#cpnC'   })       const app = new Vue({     el: "#app",     data: {       message: "Hellow World"     }   }); </script>