Vue 第九天学习
Vue ?第九天學(xué)習(xí)
?
?
1.實(shí)現(xiàn)發(fā)表評(píng)論功能
1.把文本框做雙向數(shù)據(jù)綁定
v-model =”msg”
2.為發(fā)表按鈕綁定一個(gè)事件
@click=”post_Comment”
3.點(diǎn)擊發(fā)表評(píng)論時(shí)，做相關(guān)校驗(yàn)，【為空，非法，】，并且進(jìn)行提示
post_Comment(){
if(this.msg.trim().length == 0){
?Toast(‘評(píng)論數(shù)據(jù)不能為空’);
}
//真實(shí)情況是給服務(wù)器發(fā)數(shù)據(jù)
this.$http.post(‘wwww.bnaidu.com’+this.$route.params.id).then(function (result){
if(result.body.status == 0){
//封裝到數(shù)據(jù)中
var cmt = {
content : this.msg;
}
this.msg.trim();
this.comment.unshift(msg);
}
})
}
4.通過(guò)vue-resouce 將數(shù)據(jù)發(fā)送給服務(wù)器，
5.發(fā)布數(shù)據(jù)ok以后，列表刷新，得到最新的評(píng)論【？？？？】。本質(zhì)是查看最新的評(píng)論。
那么就是刷新列表。
?
2.圖片分享功能實(shí)現(xiàn)。
1.改造路由連接 a ?--->>>> ???router-link, 然后把規(guī)則寫(xiě)好。
<router-link?to="/home/photolist">
???????? <span?class="mui-icon mui-icon-email"><span?class="mui-badge">5</span></span>
???????? <div?class="mui-media-body">圖片分享</div>
</router-link>
?
2.新建組件，
PhotoList.vue
?
3. 到路由匹配規(guī)則中進(jìn)行 路由匹配
import?PhotoList?from?'./components/photos/PhotoList.vue'
{path :'/home/photolist',component :PhotoList},
?
4.內(nèi)容實(shí)現(xiàn)。到MUI 中復(fù)制內(nèi)容
<div?id="slider"?class="mui-slider">
????????????????<div?id="sliderSegmentedControl"?class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
????????????????????<div?class="mui-scroll">
????????????????????????<a?class="mui-control-item mui-active"?href="#item1mobile"?data-wid="tab-top-subpage-1.html">
????????????????????????????推薦
????????????????????????</a>
????????????????????????<a?class="mui-control-item"?href="#item2mobile"?data-wid="tab-top-subpage-2.html">
????????????????????????????熱點(diǎn)
????????????????????????</a>
????????????????????????<a?class="mui-control-item"?href="#item3mobile"?data-wid="tab-top-subpage-3.html">
????????????????????????????北京
????????????????????????</a>
????????????????????????<a?class="mui-control-item"?href="#item4mobile"?data-wid="tab-top-subpage-4.html">
????????????????????????????社會(huì)
????????????????????????</a>
????????????????????????<a?class="mui-control-item"?href="#item5mobile"?data-wid="tab-top-subpage-5.html">
????????????????????????????娛樂(lè)
????????????????????????</a>
<a?class="mui-control-item"?href="#item5mobile"?data-wid="tab-top-subpage-5.html">
????????????????????????????娛樂(lè)
????????????????????????</a>
????????????????????</div>
????????????????</div>
?
????????</div>
?
5.把它的mui-fullscreen去掉，
6.滑動(dòng)條無(wú)法正常滑動(dòng)，需要JS 初始化。
6.1 導(dǎo)入MUI.js
6.2 然后使用方法初始化
//1.倒入MUI的js 文件
import?mui?from?'../../lib/mui/js/mui.min.js'
//2.初始化滑動(dòng)控件
mui('.mui-scroll-wrapper').scroll({
????deceleration:?0.0005?//flick 減速系數(shù)，系數(shù)越大，滾動(dòng)速度越慢，滾動(dòng)距離越小，默認(rèn)值0.0006
});
【移除嚴(yán)格模式---視頻404.項(xiàng)目-圖片列表頂部導(dǎo)航條制作2-解決初始化問(wèn)題
1. 裝包
2. ,babelrc ?中配置（等方式）
】
【bug,第一次進(jìn)來(lái)以后，滑動(dòng)條無(wú)效，需要刷新才起作用
原因分析，初始化的不對(duì)，
?
解決方法，放到生命周期的鉤子函數(shù)中，
created(){
//第二個(gè)生命周期函數(shù)，代表數(shù)據(jù)和方法以及創(chuàng)建好了，
},
mounted?(){ //代表組件已經(jīng)創(chuàng)建好了，這個(gè)是最后的，說(shuō)明DOM結(jié)構(gòu)已經(jīng)渲染好了，
//當(dāng)組件DOM結(jié)構(gòu)已經(jīng)渲染好，并放到頁(yè)面后，執(zhí)行這個(gè)鉤子函數(shù)，
// 如果要操作元素了，最好在mounted函數(shù)中，因?yàn)檫@個(gè)時(shí)候所有的dom元素都創(chuàng)建好了
//2.初始化滑動(dòng)控件
mui('.mui-scroll-wrapper').scroll({
deceleration:?0.0005?//flick 減速系數(shù)，系數(shù)越大，滾動(dòng)速度越慢，滾動(dòng)距離越小，默認(rèn)值0.0006
});
},
?
】
3.懸案圖片分享中的數(shù)據(jù)，
3.1定義方法去拿數(shù)據(jù)
getAllCategroy{
?
}
3.2 在data 中定義數(shù)據(jù)
cats :[],
3.2 然后想created 中掛載方法和數(shù)據(jù)。
created (){
?
}
【
滑動(dòng)條高亮的選擇。
<a?:class="['mui-control-item',item.id?== 0?? 'mui-active'?:'']" v-for="item?in?cates" :key="item.id">
????????????????????????????{{item.title}}
????????????????????????</a>
?
】
4.實(shí)現(xiàn)圖片列表區(qū)域，
1.導(dǎo)入組件，效果參考mint-ui的懶加載
在main.js ?中導(dǎo)入 ?import {Lazyload} ?from ‘mint-ui’;
Vue.use(Lazyload) ;
2.頁(yè)面實(shí)現(xiàn)
<!--圖片列表區(qū)域-->
<ul>
<li?v-for="item?in?list" :key="item.id">
<img?v-lazy="item">
</li>
</ul>
?
3.渲染圖片列表數(shù)據(jù).根據(jù)導(dǎo)航ID 去獲取相關(guān)的 內(nèi)容。因此定義相關(guān)方法，然后在不同的地方調(diào)用，傳遞不同的值即可
getPhotoListByCateId(cateID){
//特別注意，這里要根據(jù)圖片列表的id 分別獲取相關(guān)數(shù)據(jù)
this.$http.get('xxx/'+cateID).then(result?=>{
if(result.body.result.status?== 0){
this.list?= result.body.message;
}
?
}); //怎么獲取實(shí)時(shí)的id？？？..n哪里調(diào)用它？？
//答：調(diào)用的時(shí)候就可以傳遞id 了
//,頁(yè)面剛進(jìn)入，默認(rèn)初始化傳遞0 ，
// //剛進(jìn)入，價(jià)值默認(rèn)頁(yè)面
//this.getPhotoListByCateId(0);
// 然后點(diǎn)擊各自導(dǎo)航的時(shí)候傳遞值，
/*
<a :class="['mui-control-item',item.id == 0 ? 'mui-active' :'']" v-for="item in cates" :key="item.id"
@click="getPhotoListByCateId(item.id)">
????????????????????????????{{item.title}}
????????????????????????</a>
*/?
},
?
?
5.【這里面跳過(guò)兩個(gè)視頻】
?
6.實(shí)現(xiàn)商品購(gòu)買功能
1.前提難點(diǎn)分析：1.布局不會(huì)，2.我猜是三個(gè)div ?分為三塊。
2.改造路由連接
3.組件實(shí)現(xiàn)
4. 路由匹配規(guī)則的實(shí)現(xiàn)，
【嘗試學(xué)習(xí)寫(xiě) CSS ?樣式】
<template>
<div?class="goods-list">
<div?class="good-item">
<img?src="https://shopstatic.vivo.com.cn/vivoshop/commodity/49/4849_1530622462696hd_530x530.png">
<h1?class="title">VIVO手機(jī)</h1>
<div?class="info">
<p?class="price">
<span?class="now">$199</span>
<span?class="old">$299</span>
</p>
<p?class="sell">
<span>熱賣中</span>
<span>剩余60件</span>
</p>
</div>
</div>
<div?class="good-item">
<img?src="https://shopstatic.vivo.com.cn/vivoshop/commodity/49/4849_1530622462696hd_530x530.png">
<h1?class="title">VIVO手機(jī)</h1>
<div?class="info">
<p?class="price">
<span?class="now">$199</span>
<span?class="old">$299</span>
</p>
<p?class="sell">
<span>熱賣中</span>
<span>剩余60件</span>
</p>
</div>
</div>
<div?class="good-item">
<img?src="https://shopstatic.vivo.com.cn/vivoshop/commodity/49/4849_1530622462696hd_530x530.png">
<h1?class="title">VIVO手機(jī)</h1>
<div?class="info">
<p?class="price">
<span?class="now">$199</span>
<span?class="old">$299</span>
</p>
<p?class="sell">
<span>熱賣中</span>
<span>剩余60件</span>
</p>
</div>
</div>
</div>
?
</template>
?
<script>
export?default?{
}
</script>
?
<style?lang="scss"?scoped>
.goods-list{
display: flex;
flex-wrap: wrap;
padding: 7px;
justify-content: space-between;
}
.good-item{
width: 49%;
border:1px?solid?#ccc;
box-shadow: 0?0?8?#ccc;
margin:3px?0px;
?
img{
width: 100%;
height: 150px;
}
.info{
padding: 5px;
}
.title{
font-size: 14px;
}
.price{
display: flex;
justify-content: space-between;
.now{
color: red;
}
}
.sell{
display: flex;
justify-content: space-between;
}
}
</style>
?
?
?
?
?
7.
?
8.
?
9.
?
?
?
?
總結(jié)
- 上一篇： 全屋净水第一步要先做什么？净水器还是前置
- 下一篇： 天正怎么填充墙体？