Vue学习-组件的基本使用

示例代码

http://jsrun.net/c8vKp/edit

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

const cpnC=Vue.extend({
      template:`
            

                  
我是标题
  
                  
这里是内容
      
            
` 
})

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

2.注册组件-Vue.component

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

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

3.使用组件

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

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

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

Vue.component('cpn',{
      template:`
            

                  
我是标题
                  
我是内容！！！
            
      `
})