Vue学习-组件的基本使用

目录

• 示例代码
• 1.创建组件（构造器对象创建-Vue.extend）
• 2.注册组件-Vue.component
• 3.使用组件
• 4.语法糖创建与注册组件

示例代码

http://jsrun.net/c8vKp/edit

1.创建组件（构造器对象创建-Vue.extend）

const cpnC=Vue.extend({
      template:`
            <div>
                  <h2>我是标题</h2>  
                  <p>这里是内容</p>      
            </div>` 
})

ES6定义字符器用"`"定义的字符串，可以换行

2.注册组件-Vue.component

Vue.component('my-cpn',cpnC);

const app=new Vue({
         el:"#app",
         data:{
            
            }
      }) 

3.使用组件

<div id="app">
    <my-cpn></my-cpn>
</div>

4.语法糖创建与注册组件

• 直接用Vue.component一个函数搞定，只是一个语法糖，内部还是调用了Vue.extend函数创建组件
• 示例代码：http://jsrun.net/kTvKp/edit

// const cpn=Vue=Vue.extend();

Vue.component('cpn',{
      template:`
            <div>
                  <h2>我是标题</h2>
                  <p>我是内容！！！</p>
            </div>
      `
})