第二彈 Vue項目總結

移動端ui庫

餓了麼Mint-UI mint-ui.github.io/#!/zh-cn

main.js 引入

import MintUI from 'mint-ui' 
Vue.use(MintUI);
樣式引入  import 'mint-ui/lib/style.css'複製代碼

編寫組件，全局組件註冊

//main.js
import MyUI from './components/common/MyUI';
Vue.component(MyUI.name,MyUI) //組件名稱，
組件對象//MyUI.vue
<template>   
 <ul>
        <slot></slot>
 </ul>
</template>
<script>    
   export default {
        name: 'my-ul',
    }
</script>
//Home.vue 在這個組件引用全局註冊的組件
<my-ul></my-ul>複製代碼

props 誰用我誰來傳時間格式轉換須要定義

時間格式的轉換

涉及到 `Moment`  `fromNow`  `format`

命令： npm i moment -S

//main.js
import Moment from 'moment';
Vue.filter('converTime',function(data,formatStr)
{  return Moment(data).format(formatStr)})
//相對時間過濾器
Moment.locale('zh-cn')Vue.filter('relTime',function(time){  //幾天前  return Moment(time).fromNow();})
//調用
convertTime('YYYY年MM月DD日')
relTime複製代碼

格式轉換 <p>發表時間:{{news.add_time | convertTime('YYYY年MM月DD日')}}</p>
幾天前使用  {{msg.add_time | relTime}}複製代碼

列表頁到詳情頁的傳值

1. 去哪兒
<router-link :to="{name: 'NewsDetail',query: {id: news.id}}" //無需設置路由
<router-link :to="{name: 'NewsDetail',params: {id: news.id}}" //須要設置路由的狀態
複製代碼

2. 導航
{name: 'NewsDetail',path: '/news/detail/:id',component: Xxx}複製代碼

3. 詳情頁接收
created 獲取路由參數，發請求獲取詳情數據 this.$route.params.id複製代碼

請求接口爲 newsinfo/:id ,則帶值的方式進取詳情

//列表
route:{name:'PhotoList',query:{categoryId:0}
//詳情
let { categoryId } = this.$route.query;this.$axios.get('getimages/' + categoryId)複製代碼

往請求的tab數據以前加多一個所有

this.categories.unshift({id: 0 ,title: '所有'})複製代碼

tab欄切換常見的問題

1.  點擊tab欄切換，上面的id不變
2.  改變上面的id，相應的頁面沒跟着改變
3.   一開始進去加載所有使頁面變慢，須要使用懶加載
   

解決】

• 編程式路由傳值更改連接的id
  @click="navigateToCateById(category.id)"
  methods:{navigateToCateById(id) {
          this.$router.push({
               name:'PhotoList', //文件名
               query:{ categoryId:id }
  });},}複製代碼

• beforeRouteUpdate (to, from, next) { //路由更新
             // console.log(to);
             // console.log(from);
             let { categoryId } = to.query;
             // 發請求更改頁面數據
             this.loadImgsById(categoryId);
             next();
             // 在當前路由改變，可是該組件被複用時調用
             // 舉例來講，對於一個帶有動態參數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，
             // 因爲會渲染一樣的 Foo 組件，所以組件實例會被複用。而這個鉤子就會在這個狀況下被調用。
             // 能夠訪問組件實例 `this`
  
  },複製代碼

• 來自組件的懶加載  <img v-lazy="item">
  image[lazy=loading] {
    width: 40px;
    height: 300px;
    margin: auto;
  }
  //不是來自第三方的懶加載
  install vue-lazyload --save-dev ' import VueLazyload from 'vue-lazyload' Vue.use(VueLazyload) <img v-lazy="emptyGif"> 複製代碼

請求數據時，作攔截器，提升加載頁面的過渡效果（跳轉頁面的時候會顯示加載中）

//main.js
給vue的原型掛載$axios屬性
Vue.prototype.$axios = Axios;
Axios.defaults.baseURL = 'https://www.sinya.online/api/' 
//全局接口請求
攔截器
//須要加載中的過渡之類，開始定義攔截器(拿請求體，請求頭)//請求發起前
 Axios.interceptors.request.use(function(config) {
   MintUI.Indicator.open({
     text: '加載中...',
     spinnerType: 'fading-circle'
   });   
return config; 
})//響應回來後
 Axios.interceptors.response.use(function(response) {
   //reponse: { config: {},data:{},headers}   
//接收響應頭或者響應體中的數據，保存起來，供請求的攔截器使用頭信息操做
   MintUI.Indicator.close();   return response; })
複製代碼

頁面請求數據的寫法 this.$axios.get('getnewslist').then(res => {}).catch(err => {})複製代碼

slot插槽的給到的樣式沒做用

在接收這個DOM的組件中，能給solt之後的元素設置樣式，而沒有能給slot設置樣式

<solt name="icon"></solt>
<img slot="icon" src="../img/jj.png">複製代碼

query 和 params

1.  /xxx?id = 1  配置路由規則 path: 'xxx'     組件接收 this.$route.query.id   傳遞 to:{query:{id:1}}
1.  /xxx/1       配置路由規則 path: 'xxx/:id' 組件接收 this.$route.params.id          {params:{id:1}}複製代碼

圖片預覽 vue-preview

https://www.npmjs.com/package/vue-preview
安裝  npm i vue-preview -S
使用的時候須要傳入w,h,msrc複製代碼

評論留言頁的實現

考慮和注意的問題

• 發送數據給接口時，發送的請求體須要帶上`content = ${this.content}`
• 加載更多評論
• 是在原來顯示的條數上進行更新賦值仍是進行追加
• 請求的頁數如何遞增請求
• 當少於十條數據咱們應該對按鈕作什麼操做
• 當咱們留言後發送成功，是否須要把頁數從新賦值爲1，顯示出咱們評論的內容

輸入框 須要綁定聲明 v-model="content"

發送數據
 this.$axios.post(`postcomment/${this.cid}`,`content = ${this.content}`).then(res => {
    this.init();//頁碼初始化
    this.loadMsgByPage() //請求數據接口再渲染次數據 
}對加載更多進行追加
if (this.page ===1) { 
     this.msgs = res.data.message //賦值 
} else {  
     this.msgs = this.msgs.concat(res.data.message) //追加  
}頁數遞增 `this.page ++;`數據少於十條
 if( res.data.message.length <10 && this.page !=1) {       
      this.$toast({
         message: '沒有數據', iconClass: 'icon icon-success' 
}) 
// 禁止點擊
           this.disabled = true;           return ;}複製代碼

自定義全局過濾器，字符串過長截取

//控制字數顯示過濾器Vue.filter('controllShow',function(str,num){  
// 若是當前字符串小於num，返回原來值  if(str.length < num){    return str;  }  
//若是當前的字符串大於num，截取0-num-1位  
if(str.length > num) {    return str.substr(0,num-1) + '...';  }})
調用  
<div class="title">{{goods.title | controllShow(23)}}</div>

複製代碼

合併請求的狀況this.$axios.all([imgReq,infoReq])

相關連接： www.cnblogs.com/zhouyangla/…

let imgReq = this.$axios.get(`getthumimages/${this.goodsId}`);
let infoReq = this.$axios.get(`goods/getinfo/${this.goodsId}`);
// 合併請求 $axios.all([]).then(傳播響應).catch()         
this.$axios.all([imgReq,infoReq])         
.then(            this.$axios.spread(                (imgRes,infoRes)=>{                     this.imgs = imgRes.data.message;                     this.info = infoRes.data.message[0];            }) )複製代碼

不一樣的列表頁，跳轉到同一個詳情頁，對title的更改（設置路由，確認路由過來後設置）

服務端和客戶端讀取數據的區別，單頁面應用和多頁面加載出現的區別，先後端分離真正的緣由，此處在第四季vue的第四天商品列表、購物車-02