extend省略
// 第一步:创建good组件
const good = Vue.extend({
template:`<div>
<h1>good</h1>
</div>`,
})
// 简写模式: Vue.extend 可以写成一个对象,省略掉extend
// // 第一步:创建good组件
// const good = {
// template:`<div>
// <h1>good</h1>
// </div>`,
// }
组件name配置项是开发者工具显示的结果
<div id="root">
<!-- 组件名 -->
<x></x>
<!-- 可以复用 -->
<x></x>
<br>
<student></student>
<good></good>
</div>
<script>
//第一步:创建shool组件
const shool = Vue.extend({
// el:'#root',// 组件定义时,不用写el这个配置,因为最后它都被一个vm管理,由vm决定服务哪个容器
template:`<div>
<h1>名称:{{shoolName}}</h1>
<h1>地址:{{addr}}</h1>
</div>`,//一定只有一个根元素包裹,这是组件的HTML结构,用template配置
data(){ //data有对象式和函数式,组件式必须要用函数式,不然报错
return { //函数式是为了可以复用,每次都返回一全新的对象,被修改也不会影响到复用的对象
shoolName:'小学',
addr:'上海'
}
}
})
// 第一步:创建student组件
const student = Vue.extend({
name:'hhhhhhhhhhhh',//这个名字决定在开发者工具显示的名字
template:`<div>
<h1>姓名:{{studentName}}</h1>
<h1 @click="年龄加1">年龄:{{age}}</h1>
</div>`,
data(){
return {
studentName:'高高',
age:17
}
}
})
// 第一步:创建good组件
const good = Vue.extend({
template:`<div>
<h1>good</h1>
</div>`,
})
// 简写模式: Vue.extend 可以写成一个对象,省略掉extend
// // 第一步:创建good组件
// const good = {
// template:`<div>
// <h1>good</h1>
// </div>`,
// }
//全局配置组件
Vue.component('good',good)
new Vue({
el:'#root',//组件要服务的容器
//局部定义组件
components:{//一个键值的方式表示
x:shool,//shool表示用的是哪个组件,但是在上面的HTML用的是x这个键名,键名不能用大小,除非用脚手架
student//如果键名一致就用简写模式
}
})
</script>
网友评论