Vue组件化的实现和使用步骤

113 阅读1分钟

Vue组件化的实现和使用步骤

  • 注册组件的基本步骤
    • 创建组件构造器
    • 注册组件
    • 使用组件 步骤
  • 使用步骤
<body>
    <div id="app">
    	// 3.使用组件
        <cpm-my></cpm-my>
        <cpm-my></cpm-my>
        <cpm-my></cpm-my>
        <cpm-my></cpm-my>
    </div>
    <script src="../vue.js"></script>
    <!--  -->
    <script>
        //1.创建组件化构造器对象
        const cpny = Vue.extend({
            template:`
              <div>
                <h1>我是标题</h1>
                <p>我是内容,哈哈哈哈</p>    
                <p>我是内容,呵呵呵呵</p>    
              </div>
            `
        })
        // 2.注册组件
        Vue.component('cpm-my',cpny)
        const app = new Vue({
            el:'#app',
            data:{

            }
        })
    </script>
</body>
(```