Vue学习-组件的基本使用(局部组件)

目录
  • 示例代码
  • 1.创建组件(构造器对象创建-Vue.extend)
  • 2.注册组件
  • 3.使用组件
  • 4.语法糖创建并注册组件
    • 示例代码:http://jsrun.net/kTvKp/edit
  • 5.模板分离写法
    • 示例代码:http://jsrun.net/4TvKp/edit
    • 方法一:使用script标签
    • 方法二:使用template标签

示例代码

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标签