js vue 创建一个div_Vue.js 3 Step 创建一个组件

Step1：Vue.extend()创建组件

Step2：Vue.component()注册组件，注册的标签一定要用小写

Step3：挂载点使用组件

3 Step 创建一个组件

//Step1：创建组件

var myComponent = Vue.extend({

template: "

这是一个组件

"

})

//Step2：注册组件 在这里采用"全局注册"组件，也就是每个挂载点都可以使用组件

Vue.component('my-component', myComponent)

new Vue({

el: '#app1', //挂载点1

})

new Vue({

el: '#app2' //挂载点2

})

全局注册和局部注册

全局注册:

Vue.component('my-component', myComponent)

局部注册:

我们需要在声明挂载点的地方注入组件即可：

new Vue({

el: '#app1',

components:{

'my-component', myComponent'

}

})

这样只能在挂载点为#app1地方使用my-component组件，在挂载点#app2的地方使用my-component组件就会报错。

语法糖创建并注册组件

3 Step 创建一个组件

---

使用语法糖创建并注册组件

---

使用语法糖在局部注册并创建多个组件

//Step1：创建组件

var myComponent = Vue.extend({

template: "

这是一个组件

"

})

//Step2：注册组件 在这里采用"全局注册"组件，也就是每个挂载点都可以使用组件

Vue.component('my-component', myComponent)

//Step2: 可以使用语法糖,省略Step1,“全局注册”组件的同时创建模板内容

Vue.component('sugar-component', {

template: '

这是用语法糖创建并注册的组件，这样就可以省略自己使用Vue.extend创建组件的步骤，系统会自动为我们使用Vue.extend去创建组件。

'

})

new Vue({

el: '#app1', //挂载点1

})

new Vue({

el: '#app2' //挂载点2

})

new Vue({

el: '#app3', //挂载点3,同样可以再局部使用语法糖创建并注册组件

components: {

'sugar-component2': {

template: '

这是使用语法糖在局部注册并创建组件的内容。

'

},

'sugar-component3': {

template: '

使用语法糖，在局部可以同时创建并注册“多个组件”的内容。

'

}

}

})