Vue学习记录-Vue注册组件语法糖

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>