Vue ?第九天學習

?

?

1.實現發表評論功能

1.把文本框做雙向數據綁定

v-model =”msg”

2.為發表按鈕綁定一個事件

@click=”post_Comment”

3.點擊發表評論時，做相關校驗，【為空，非法，】，并且進行提示

post_Comment(){

if(this.msg.trim().length == 0){

?Toast(‘評論數據不能為空’);

}

//真實情況是給服務器發數據

this.$http.post(‘wwww.bnaidu.com’+this.$route.params.id).then(function (result){

if(result.body.status == 0){

//封裝到數據中

var cmt = {

content : this.msg;

}

this.msg.trim();

this.comment.unshift(msg);

}

})

}

4.通過vue-resouce 將數據發送給服務器，

5.發布數據ok以后，列表刷新，得到最新的評論【？？？？】。本質是查看最新的評論。

那么就是刷新列表。

?

2.圖片分享功能實現。

1.改造路由連接 a ?--->>>> ???router-link, 然后把規則寫好。

<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. 到路由匹配規則中進行 路由匹配

import?PhotoList?from?'./components/photos/PhotoList.vue'

{path :'/home/photolist',component :PhotoList},

?

4.內容實現。到MUI 中復制內容

<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">

????????????????????????????熱點

????????????????????????</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">

????????????????????????????社會

????????????????????????</a>

????????????????????????<a?class="mui-control-item"?href="#item5mobile"?data-wid="tab-top-subpage-5.html">

????????????????????????????娛樂

????????????????????????</a>

<a?class="mui-control-item"?href="#item5mobile"?data-wid="tab-top-subpage-5.html">

????????????????????????????娛樂

????????????????????????</a>

????????????????????</div>

????????????????</div>

?

????????</div>

?

5.把它的mui-fullscreen去掉，

6.滑動條無法正常滑動，需要JS 初始化。

6.1 導入MUI.js

6.2 然后使用方法初始化

//1.倒入MUI的js 文件

import?mui?from?'../../lib/mui/js/mui.min.js'

//2.初始化滑動控件

mui('.mui-scroll-wrapper').scroll({

????deceleration:?0.0005?//flick 減速系數，系數越大，滾動速度越慢，滾動距離越小，默認值0.0006

});

【移除嚴格模式---視頻404.項目-圖片列表頂部導航條制作2-解決初始化問題

1. 裝包

2. ,babelrc ?中配置（等方式）

】

【bug,第一次進來以后，滑動條無效，需要刷新才起作用

原因分析，初始化的不對，

?

解決方法，放到生命周期的鉤子函數中，

created(){

//第二個生命周期函數，代表數據和方法以及創建好了，

},

mounted?(){ //代表組件已經創建好了，這個是最后的，說明DOM結構已經渲染好了，

//當組件DOM結構已經渲染好，并放到頁面后，執行這個鉤子函數，

// 如果要操作元素了，最好在mounted函數中，因為這個時候所有的dom元素都創建好了

//2.初始化滑動控件

mui('.mui-scroll-wrapper').scroll({

deceleration:?0.0005?//flick 減速系數，系數越大，滾動速度越慢，滾動距離越小，默認值0.0006

});

},

?

】

3.懸案圖片分享中的數據，

3.1定義方法去拿數據

getAllCategroy{

?

}

3.2 在data 中定義數據

cats :[],

3.2 然后想created 中掛載方法和數據。

created (){

?

}

【

滑動條高亮的選擇。

<a?:class="['mui-control-item',item.id?== 0?? 'mui-active'?:'']" v-for="item?in?cates" :key="item.id">

????????????????????????????{{item.title}}

????????????????????????</a>

?

】

4.實現圖片列表區域，

1.導入組件，效果參考mint-ui的懶加載

在main.js ?中導入 ?import {Lazyload} ?from ‘mint-ui’;

Vue.use(Lazyload) ;

2.頁面實現

<!--圖片列表區域-->

<ul>

<li?v-for="item?in?list" :key="item.id">

<img?v-lazy="item">

</li>

</ul>

?

3.渲染圖片列表數據.根據導航ID 去獲取相關的 內容。因此定義相關方法，然后在不同的地方調用，傳遞不同的值即可

getPhotoListByCateId(cateID){

//特別注意，這里要根據圖片列表的id 分別獲取相關數據

this.$http.get('xxx/'+cateID).then(result?=>{

if(result.body.result.status?== 0){

this.list?= result.body.message;

}

?

}); //怎么獲取實時的id？？？..n哪里調用它？？

//答：調用的時候就可以傳遞id 了

//,頁面剛進入，默認初始化傳遞0 ，

// //剛進入，價值默認頁面

//this.getPhotoListByCateId(0);

// 然后點擊各自導航的時候傳遞值，

/*

<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.【這里面跳過兩個視頻】

?

6.實現商品購買功能

1.前提難點分析：1.布局不會，2.我猜是三個div ?分為三塊。

2.改造路由連接

3.組件實現

4. 路由匹配規則的實現，

【嘗試學習寫 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手機</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手機</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手機</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.

?

?

?

?

總結

以上是生活随笔為你收集整理的Vue 第九天学习的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。