Vue学习-组件的基本使用（局部组件）
目录
示例代码
1.创建组件（构造器对象创建-Vue.extend）
const cpnC=Vue.extend({
template:`
<div>
<h2>我是标题</h2>
<p>这里是内容</p>
</div>`
})
ES6定义字符器用"`"定义的字符串，可以换行
2.注册组件
//这种是全局注册的，在多个vue实例中都可以使用
//Vue.component('my-cpn',cpnC);
//通过components局部注册组件
const app=new Vue({
el:"#app",
components:{
myCpn:cpnC //myCpn为标签名，在html使用时要转换为my-cpn命名法
},
data:{
}
})
3.使用组件
<div id="app">
<my-cpn></my-cpn>
</div>
4.语法糖创建并注册组件
示例代码：http://jsrun.net/kTvKp/edit
//语法糖创建并注册组件（内部还是调用了Vue.extend函数）
Vue.component('my-cpn', {
template: `
<div>
<h2>我是标题</h2>
<p>这里是内容</p>
</div>
`
}) //这种为全局注册组件
const app = new Vue({
el: "#app",
data: {
message: "我是message"
},
components:{
cnp1:{
template:`
<div>
<h1>局部注册</h1>
<p>这里是语法糖局部注册</p>
</div>
`
}
}
})
5.模板分离写法
示例代码：http://jsrun.net/4TvKp/edit
方法一：使用script标签
<script type="text/x-template" id="cpn">
<div>
<h2>我是标题</h2>
<p>这里是内容</p>
</div>
</script>
const cpnC = Vue.extend({
template: "#cpn"
})
方法二：使用template标签
<template id="cpn1">
<div>
<h2>我是标题template</h2>
<p>这里是内容</p>
</div>
<template>
//注册组件
const cpnC = Vue.extend({
template: "#cpn1"
})
