Vue学习-组件的基本使用（局部组件）

示例代码

http://jsrun.net/H8vKp/edit

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

const cpnC=Vue.extend({
      template:`
            

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

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

2.注册组件

//这种是全局注册的，在多个vue实例中都可以使用
//Vue.component('my-cpn',cpnC);

//通过components局部注册组件
const app=new Vue({
         el:"#app",
         components:{
               myCpn:cpnC   //myCpn为标签名，在html使用时要转换为my-cpn命名法
            },
         data:{
            
            }
      }) 

3.使用组件

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

示例代码：http://jsrun.net/kTvKp/edit

//语法糖创建并注册组件（内部还是调用了Vue.extend函数）
Vue.component('my-cpn', {
 template: `
        

            
我是标题
            
这里是内容
        
 
        `
}) //这种为全局注册组件


const app = new Vue({
    el: "#app",
    data: {
        message: "我是message"
    },
    components:{
        cnp1:{
            template:`
                

                    
局部注册
                    
这里是语法糖局部注册
                
            `
        }
    }
})

5.模板分离写法

示例代码：http://jsrun.net/4TvKp/edit

方法一：使用script标签

const cpnC = Vue.extend({
    template: "#cpn"
})

方法二：使用template标签