Vue-2

• 组件模板的抽离写法

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必须是函数