new Vue({
el:'#app',
data:{
cars:[
{
title:'保時捷',
content:'德國豪華品牌德國豪華品牌德國豪華品牌德國豪華品牌德國豪華品牌德國豪華品牌德國豪華品牌'
},
{
title:'雷克薩斯',
content:'日本豪華品牌日本豪華品牌日本豪華品牌日本豪華品牌日本豪華品牌日本豪華品牌日本豪華品牌'
},
{
title:'紅旗',
content:'中國豪華品牌中國豪華品牌中國豪華品牌中國豪華品牌中國豪華品牌中國豪華品牌中國豪華品牌'
}
]
},
// 定義組件
components:{
// 每個組件就是一個小型的Vue實例，它里面除了不能設(shè)置el選項句喜，其他選項它都有预愤。
'b-box':{
// 組件的模板
template:`
<div class="box">
? ? <div class="title">{{title}}</div>
? ? <div class="content">
? ? ? ? {{content}}
? ? </div>
</div>
`,
// 定義組件標(biāo)簽上的屬性
props:["title","content"],
// 注意：Vue實例的data選項可以是一個對象，也可以是一個方法藤滥，由該方法返回一個對象
// 但是在組件中鳖粟，data選項必須是一個方法，由該方法返回一個對象
// 因為組件可能會使用很多次拙绊，如果data選項是對象的話向图，會導(dǎo)致多個組件使用了同一份數(shù)據(jù)。
data() {
return {
name:'我是組件'
}
},
}
}
})
<div id="app">
? ? <b-box v-for="(item,index) in cars" :key="index" :title="item.title" :content="item.content"></b-box>
</div>
2. counter組件
<div id="app">
? ? <div>衣服：<b-counter :count="yfCount" @synccount="syncYfCount">
? ? ? ? </b-counter>--{{yfCount}}</div>
? ? <div>褲子：<b-counter :count="kzCount" :min-count="2" :max-count="8" @synccount="syncKzCount">
? ? ? ? </b-counter>--{{kzCount}}</div>
? ? <div>鞋子：<b-counter :count="xzCount" :max-count="20" @synccount="syncXzCount">
? ? ? ? </b-counter>--{{xzCount}}</div>
</div>
new Vue({
? ? el:'#app',
? ? // 定義數(shù)據(jù)
? ? data() {
? ? ? ? return {
? ? ? ? ? ? // 衣服的數(shù)量
? ? ? ? ? ? yfCount:3,
? ? ? ? ? ? // 褲子的數(shù)量
? ? ? ? ? ? kzCount:5,
? ? ? ? ? ? // 鞋子的數(shù)量
? ? ? ? ? ? xzCount:7
? ? ? ? }
? ? },
? ? // 定義方法
? ? methods: {
? ? ? ? // 同步衣服的數(shù)量
? ? ? ? syncYfCount(e){
? ? ? ? ? ? this.yfCount = e
? ? ? ? },
? ? ? ? // 同步褲子的數(shù)量
? ? ? ? syncKzCount(e){
? ? ? ? ? ? this.kzCount = e
? ? ? ? },
? ? ? ? // 同步鞋子的數(shù)量
? ? ? ? syncXzCount(e){
? ? ? ? ? ? this.xzCount = e
? ? ? ? }
? ? },
? ? // 注冊組件
? ? components:{
? ? ? ? // 注意：組件的名稱不要跟原生html元素重名
? ? ? ? 'b-counter':{
? ? ? ? ? ? // template選項标沪，用于定義組件的模板
? ? ? ? ? ? template:`
? ? ? ? ? ? <div class="counter">
? ? ? ? ? ? <button @click="jian" :disabled="myCount===minCount">-</button>
? ? ? ? ? ? <input type="text" :value="myCount" readonly>
? ? ? ? ? ? <button @click="jia" :disabled="myCount===maxCount">+</button>
? ? ? ? ? ? </div>
? ? ? ? ? ? `,
? ? ? ? ? ? // 組件的props選項榄攀，用于定義組件標(biāo)簽上的屬性
? ? ? ? ? ? // props的值可以是一個字符串?dāng)?shù)組，里面定義每一個標(biāo)簽屬性名稱金句，這是簡單用法檩赢，不能對屬性做嚴(yán)格的驗證。
? ? ? ? ? ? // props:["count"]
? ? ? ? ? ? // props的值可以是一個對象违寞，里面定義每個標(biāo)簽屬性名稱贞瞒，以及對應(yīng)的類型
? ? ? ? ? ? // props:{
? ? ? ? ? ? // ? ? count:Number
? ? ? ? ? ? // }
? ? ? ? ? ? // props的值可以是一個對象，里面定義的每個標(biāo)簽屬性名稱也可以是一個對象趁曼，在這個對象里面定義該屬性的完整信息
? ? ? ? ? ? props:{
? ? ? ? ? ? ? ? // 數(shù)量
? ? ? ? ? ? ? ? count:{
? ? ? ? ? ? ? ? ? ? // 類型
? ? ? ? ? ? ? ? ? ? type:Number,
? ? ? ? ? ? ? ? ? ? // 非空
? ? ? ? ? ? ? ? ? ? required:true,
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? // 最小值
? ? ? ? ? ? ? ? minCount:{
? ? ? ? ? ? ? ? ? ? type:Number,
? ? ? ? ? ? ? ? ? ? // 默認(rèn)值
? ? ? ? ? ? ? ? ? ? default:1
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? // 最大值
? ? ? ? ? ? ? ? maxCount:{
? ? ? ? ? ? ? ? ? ? type:Number,
? ? ? ? ? ? ? ? ? ? default:10
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? // 定義組件的數(shù)據(jù)
? ? ? ? ? ? data() {
? ? ? ? ? ? ? ? return {
? ? ? ? ? ? ? ? ? ? // 從props里面將count的值給myCount復(fù)制一份
? ? ? ? ? ? ? ? ? ? myCount:this.count
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? // 定義組件的方法
? ? ? ? ? ? methods: {
? ? ? ? ? ? ? ? //數(shù)量減方法
? ? ? ? ? ? ? ? jian(){
? ? ? ? ? ? ? ? ? ? this.myCount--
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? // 數(shù)量加方法
? ? ? ? ? ? ? ? jia(){
? ? ? ? ? ? ? ? ? ? this.myCount++
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? // 偵聽器
? ? ? ? ? ? watch:{
? ? ? ? ? ? ? ? // 偵聽myCount是否發(fā)生變化
? ? ? ? ? ? ? ? myCount(){
? ? ? ? ? ? ? ? ? ? // 觸發(fā)自定義事件军浆，注意：事件名稱中不能采用大寫字母
? ? ? ? ? ? ? ? ? ? this.$emit('synccount',this.myCount)
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? }
})
3. 評分組件
<div id="app">
? ? <div>
? ? ? ? 質(zhì)量：<b-star :score="zl" @syncscore="synczl"></b-star>--{{zl}}
? ? </div>
? ? <div>
? ? ? ? 物流：<b-star :score="wl" @syncscore="syncwl"></b-star>--{{wl}}
? ? </div>
</div>
<hr>
<div id="app2">
? ? <div>
? ? ? ? 外觀：<b-star :score="wg" @syncscore="syncwg"></b-star>--{{wg}}
? ? </div>
? ? <div>
? ? ? ? 客服：<b-star :score="kf" @syncscore="synckf"></b-star>--{{kf}}
? ? </div>
</div>
// 定義全局組件，讓每一個Vue實例都可以使用
Vue.component('b-star', {
template: `
<div class="star">
? ? <i v-for="(item,index) in 10" :key="index" class="iconfont" :class="index<myScore ? 'icon-xingxing' : 'icon-star'"
? ? ? ? @mouseenter="mouseenter(index)" @mouseleave="mouseleave" @click="click(index)"></i>
</div>
`,
// 定義組件的標(biāo)簽屬性
props: ['score'],
data() {
return {
// 將組件接收到的值挡闰，在組件內(nèi)部中轉(zhuǎn)一下
myScore: this.score,
// 備份一下score值
backMyScore: this.score
}
},
methods: {
// 鼠標(biāo)進(jìn)入時乒融，調(diào)用的方法
mouseenter(index) {
this.myScore = index + 1
},
// 鼠標(biāo)離開時，調(diào)用的方法
mouseleave() {
this.myScore = this.backMyScore
},
// 鼠標(biāo)點擊時摄悯，調(diào)用的方法
click(index) {
this.backMyScore = index + 1
}
},
// 偵聽器
watch: {
// 偵聽myScore的變化
myScore() {
// 觸發(fā)自定義事件
this.$emit('syncscore', this.myScore)
}
}
})
new Vue({
el: '#app',
// 數(shù)據(jù)
data() {
return {
// 質(zhì)量
zl: 0,
// 物流
wl: 0,
}
},
// 方法
methods: {
// 同步質(zhì)量評分
synczl(e) {
this.zl = e
},
// 同步物流評分
syncwl(e) {
this.wl = e
}
},
// 注意：這里注冊的局部組件赞季，方式是：直接在Vue實例內(nèi)部的components選項中定義組件。
components: {
}
})
// 這里創(chuàng)建的Vue實例奢驯，跟上面的Vue實例申钩，不是同一個對象
new Vue({
el: '#app2',
data() {
return {
// 外觀
wg: 0,
// 客服
kf: 0
}
},
methods: {
// 同步外觀評分
syncwg(e){
this.wg = e
},
// 同步客房評分
synckf(e){
this.kf = e
}
},
})
