Vue註冊組件語法糖(day23)

5月20日

 
  <div id="app">
    <cpn1></cpn1>
    <cpn2></cpn2>
  </div>
  <script src="../js/vue.js">
  </script>
  <script>
    // 全局組件註冊的語法糖
    Vue.component('cpn1',{
      template:`
      <div>
        <h2>標題</h2>
        <p>段落</p>
      </div>
      `
    })

    const app = new Vue({
        el: '#app',
        data: {
          message: 'hello'
        },
        // 局部組件的語法糖
        components: {
          'cpn2': {
            template:`
            <div>
              <h2>標題2</h2>
              <p>段落2</p>
            </div>
            `
          }
        }
    })
  </script>