• 組件模板的抽離寫法

image.png

<div id="app">
    <cpn></cpn> 
    <cpn></cpn>
    <cpn></cpn>
  </div>
  <!-- 分離寫法1: script標簽,注意: 類型必須是text/x-template -->
  <!-- <script type="text/x-template" id="cpn"> // 用id和全局組件綁定
  <div>
    <h1>我是標題</h1>
    <p>哈哈哈哈</p>
  </div>
  </script> -->
  <!-- 2.分離寫法2: template標簽 -->
  <template id="cpn">
    <div>
      <h1>我是標題</h1>
      <p>哈哈哈哈</p>
    </div>
  </template>
  <script src="../js/vue.js"></script>
  <script>
    // 語法糖寫法注冊全局組件
    Vue.component('cpn',{
      template: '#cpn' // 用id和模板綁定
    })
    const vm = new Vue({
      el: '#app',
      data: {
        message: 'nihaoya', 
      }
    });
  </script>

• 為什么組件data必須是函數(shù)