前言：這個專案是我從零學習Vue2.0時用於練習基礎知識的入門專案，包含了Vue2.0幾乎所有專案都會用到的基礎功能，是新手用來練手的好專案，這裡溫故知新對功能點做一個總結。

---

 

平臺首頁	登入註冊

一、安裝配置

 

 

1、淘寶映象cnpm:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

2、v-cli開發環境搭建：

npm install
 
 -g vue-cli
vue init webpack my-project
cd my-project
npm install 
npm run dev

3、建立vue專案時：嚴格遵守Enlint語法選擇No

• WebStorm javascript 版本更改為 ES6

4、新版本vue-cli不需要下載vue-router,舊版本需要：

 npm install vue-router --save

5、main.js入口檔案中配置vue-Router：

import VueRouter from 'vue-router'

vue.use(VueRouter)
      
let router 
 
= new VueRouter({
      mode: 'history',   //router路由版本
      routers: [         //router路由map
           {
               path: '/',
               component：IndexPage
            }           
      ]
})

7.layout.vue主元件中使用router-view：

<div class="app-content">
        <keep-alive>   //建立快取，來回切換時可保持狀態
             
 
<router-view></router-view>
        </keep-alive>
</div>

 

二、根元件layout.vue

 

 

在公用元件資料夾components目錄下：

1.所有reset css都放到layout.vue的<style>中： 去掉scoped  讓樣式應用到全域性

2.head、content、foot三個div要包含在一個div中：才可以一起掛載到index.html中的掛載點上

3.content內容div：用來切換顯示路由

<div class="app-content">
        <keep-alive>
             <router-view></router-view>
        </keep-alive>
</div>

 

三、首頁index.vue

 

 

在頁面元件資料夾pages目錄下：

1.<style>為了避免樣式汙染 一定記得加scoped

2.webpack中每一個圖片都會被當做一個模組module：

• 首頁中用到的圖片都要事先放置在assets檔案中，否則圖片缺失都會報模組錯誤

3.列表都是迴圈渲染的：

• a標籤繫結href屬性時要用v-bind:href 或者縮寫：href

<a :href="item.url">{{item.name}}</a>

4.新版本的vue-cli中v-for="item in items"：

• 後面都需要跟:key="item.name"，key值必須是唯一的，如果有item屬性不唯一的時候，使用:key="index"一定不會報錯

5.使用 index 將迴圈模組中的圖片一一對應上

• 這要求 在圖片命名時以index的順序命名 1、2、3、4

v-for="(item, index) in boardList"

      注：當圖片關聯性強的時候 在資料中定義id欄位

id="car" //圖片路徑根據id值命名
:class="[{'line-last': index % 2 !== 0},'index-board-' + item.id]">

.index-board-car .index-board-item-inner{
    background: url(../assets/images/1.png) no-repeat;
}

6.迴圈出的四個模組 “田”字形排列，有兩個模組樣式不同

• 另外加一個‘line-last'class，使margin-right=0;
• 需要藉助index找到index%2!===0的兩個模組賦予class

 <div class="index-board-item"
      v-for="(item, index) in boardList"
      :key="item.title"
      :class="{'line-last': index % 2 !== 0}">

 

四、（方法一）json-server模擬資料

 

 

vue-resource實現Ajax獲取資訊資料、從後端獲取資料

1.安裝vue-resource

npm install vue-resource --save

注：每次install完外掛等之後需要重新啟動專案

2.main.js檔案中引入vue-resouce：

 import VueResource from 'vue-resource'

 Vue.use(VueResource)

之後就可以在專案任何地方：使用this.$http命令

3.index.vue元件中傳送get請求：

created: function () {
      this.$http.get('api/getNewsList')//傳送get請求           
          .then(function(res){//.then方法  請求完成後呼叫
                              //第一個函式是請求成功後方法
          }, function (err) { //第二個函式是請求失敗後方法

          })
},

• 如果傳送post請求（有時會報錯）

this.$http.post('postList',{userId: 123})

4.安裝json-server工具

npm install json-server --save

5.舊版本在build->dev.server.js檔案中進行擴充套件，新版本在build->webpack.dev.conf.js中進行配置

const jsonServer = require('json-server')
const apiServer = jsonServer.create()
const apiRouter = jsonServer.router('db.json')//資料關聯server
const middlewares = jsonServer.defaults()

apiServer.use(middlewares)
apiServer.use('/api',apiRouter)

apiServer.listen(8081, function (err) { //監聽埠，存在跨域
      if (err) {                          
          console.log(err)
          return
      }
      console.log('Lisening at http://localhost:8081/')
})

注：db.json是當前訪問頁面index.html同級的json資料檔案

6.config->index.js檔案中配置代理埠

proxyTable: {
      '/api': 'http://localhost:8081' //配置代理埠
},                       //json-server被代理到8081埠

• 重新啟動專案，執行json-server:

 npm run dev

• 此時檢查http://localhost:8081 如果看到JSON Server頁面即訪問成功
• 訪問getNewList JSON資料 http://localhost:8081/api/getNewsList

7.請求傳送成功後，將獲取的資料res.data賦值給data資料中的newsList

created: function () {
   this.$http.get('api/getNewsList')
       .then((res) => {
           this.newsList = res.data
       }, (err) => {

       })
},  

• 此時data中的newsList應為空陣列
• 坑：此處用箭頭函式=> this才表示環境中的this;  如果用的是傳統函式 因為閉包的影響，需要在外面定義一個變數

created: function () {
      let me = this
      this.$http.get('api/getNewsList')
             .then(function (res) {
                    me.newsList = res.data
              }, function (err) {

              })
},

 

五、（方法二）通過express本身獲取資料

 

 

express是通用方法：不用json-server

• json-server只能通過get請求獲取資料，無法通過post請求
• express獲取資料，get/post請求都可以

1.同樣舊版本在build->dev.server.js檔案中進行擴充套件，新版本在build->webpack.dev.conf.js中進行配置

var express = require('express')

var app = express()

var apiServer = express()
var bodyParser = require('body-parser')
apiServer.use(bodyParser.urlencoded({ extended: true }))
apiServer.use(bodyParser.json())

var apiRouter = express.Router()
var fs = require('fs')
apiRouter.route('/:apiName')

.all(function (req, res) {
    fs.readFile('./db.json', 'utf8', function (err, data) {
        if (err) throw err

        var data = JSON.parse(data)

        if (data[req.params.apiName]) {
            res.json(data[req.params.apiName])  
        }else {
            res.send('no such api name')
        }
    })
})

apiServer.use('/api', apiRouter);

apiServer.listen(port + 1, function (err) {
     if (err) {
        console.log(err)
        return
}

console.log('Listening at http://localhost:' + (port + 1) + '\n')

})

2. 同上6.7

 

五、幻燈片元件（公用元件）

 

 

第三方元件庫：awesome-vue  查詢vue元件的一種方式  github官方的一個集合

https://github.com/vuejs/awesome-vue   ctrl+F 搜尋slider

1.新建components->slideShow.vue元件

2.插入index.vue中

import slideShow from '../components/slideShow'

3.使用components選項宣告：需要保證宣告名與匯入名一致

components: {
    slideShow
},

4.使用自定義元件名渲染到模板中：

 <slide-show></slide-show>

————————————以上建立公用元件的四個基本步驟

5.傳:slides屬性  在不同的地方使用同一組件時顯示不同內容

6.圖片通過js引入，必須使用require：

 src: require('../assets/slideShow/pic1.jpg'),

• 這個圖片會由webpack解析到相應的位置

注：如果不用require webpack不會識別為模組，不會打包到最終的檔案裡，就不會顯示到相應的位置

7.props:{ } 表示這個元件要接收一些什麼樣的屬性（從父元件）

props: {
      slides: {
         type: Array,
         default: function () {
              return []
         }
     }
}

• 檢查資料是否拿到：

mounted () {
   console.log(this.slides)
}

<slide-show :slides="slides"></slide-show>

• 動態繫結的屬性: slides 就是子元件props中的屬性
• 繫結的資料 slides 是父元件datas中的陣列資料

坑：vue props 傳Array/Object型別值，子元件報錯解決辦法

        Array/Object的預設返回值要用工廠形式返回

8.定義資料變數nowIndex,設定預設值為0

 data () {
        return {
            nowIndex: 0
        }
 },

• 在模板中渲染出slides中對應的資料項

<template>
       <div class="slide-show">
            <div class="slide-img">
            <a :href="slides[nowIndex].href">
                <img :src="slides[nowIndex].src">
            </a>
       </div>
       <h2>{{slides[nowIndex].title}}</h2>
       <ul class="slide-pages">
          <li><</li>
          <li v-for="(item, index) in slides"
              :key="index"
              @click="goto(index)">
             <a :class="{on : index === nowIndex}">{{index + 1}}</a>
          </li>
          <li>></li>
       </ul> 
     </div>
</template>

•  定義重置nowIndex的方法：

 methods () {
    goto (index) {
        this.nowIndex = index
    }
 }

• 標記當前顯示標籤高亮：動態繫結class屬性on 並判斷顯示的條件

<a :class="{on : index === nowIndex}">{{index + 1}}</a>

 9.點選兩個箭頭跳轉到前一張和後一張

   方法一： 分別建立 gotopre() 和 gotonext() 方法 執行+1，-1

   方法二： 使用vue的計算屬性computed:    

computed: {
         prevIndex () {
              if (this.nowIndex === 0) {
                    return this.slides.length - 1
              }else{
                    return this.nowIndex - 1
              }
         },
         nextIndex () {
              if (this.nowIndex === this.slides.length -1) {
                    return 0
              }else{
                    return this.nowIndex + 1
              }
         }
}

• 計算屬性的 prevIndex 和 nextIndex 對應的都是資料 nowIndex
• 返回重置後的 nowIndex 可以直接作為方法 goto(index) 的引數

<li @click="goto(prevIndex)"><</li>
<li @click="goto(nextIndex)">></li>   

10.自動輪播-setInterval

methods: {
        runInv () {
            this.invId = setInterval(() => {
                   //console.log(123)
                  this.goto(this.nextIndex)
            },this.inv)
        }，

        clearInv () {
             clearInterval(this.invId)
        }
｝

• 方法在mounted鉤子中呼叫：元件掛載完成後執行的第一個業務邏輯

mounted () {
       console.log(this.slides)
       this.runInv()
}

• this.inv：時間間隔資料仍然從父元件中獲取
• 動態繫結的屬性: inv 就是子元件props中的屬性
• 繫結的資料 slideSpeed 是父元件 datas 中的陣列資料
• 滑鼠移入時 清除 Interval,滑鼠移出時 執行自動輪播

 <div class="slide-show" @mouseover="clearInv" @mouseout="runInv">

11.高階效果--移入移除動畫

更新Img部分：一定有一個時刻是同時顯示兩張圖片的

<transition name="slide-trans">
           <img v-if="isShow" :src="slides[nowIndex].src">
</transition>

<transform name="slide-trans-old">
           <img v-if="!isShow" :src="slides[nowIndex].src">
</transform>

• datas資料中定義

isShow：true  //控制顯示的切換

• 坑： 如果沒有用 v-if 判斷 isShow 條件，無法應用vue自己的 transition動畫

方法methods中：

 goto (index) {
        //this.nowIndex -- 舊值
        this.isShow = false

        setTimeout(() => {
            this.isShow = true
            this.nowIndex = index   //新值
        }, 10)
}

• <transform>動畫元件對應css屬性：

 .slide-trans-enter-active {
        transition: all .5s;
 }
 .slide-trans-enter {
        transform: translateX(900px);
 }
 .slide-trans-old-leave-active {
        transition: all .5s;
        transform: translateX(-900px);
 }

坑：transition 對絕對定位的l eft/right 是無效的

       transition 最好是配合 transform 屬性使用

12.子元件向父元件傳遞資料、事件

• slideShow.vue中：this.$emit() 方法傳遞 onchange事件 和 index引數

goto (index) {
       this.isShow = false

       setTimeout(() => {
           this.isShow = true
           this.nowIndex = index
           this.$emit('onchange', index)
       }, 10)
}

index.vue中：

<slide-show :slides="slides"
            :inv="slideSpeed"
            @onchange="doSomethingOnSlideChange">

methods: {
        doSomethingOnSlideChange () {
            console.log('doSomethingOnSlideChange run!')
        }
},

 

七、首頁彈窗元件

  

 

1.同一個父元件中插入的所有子元件，掛載的節點（div）都必須一致

<template>
        <div></div>
</template>

2.layout.vue檔案中使用子元件：

 import Dialog from '../components/base/dialog'

 <my-dialog></my-dialog>  

 components: {
         MyDialog: Dialog
 }

注：子元件標籤命名：不要和一些html本身的元素重名，否則會報錯

3.dialog.vue檔案中：

<template>
      <div class="dialog-wrap">
            <div class="dialog-cover" @click="closeMyself"></div>
            <div class="dialog-content">
                 <p class="dialog-close" @click="closeMyself">x</p>
                 <slot>empty</slot>
             </div>
      </div>
</template>

• 通過插槽 <slot>empty</slot> 向 <my-dialog></my-dialog> 插入內容
• 通過props接收父元件的isShow屬性，判斷彈窗是否顯示

props: {
      isShow: {
             type: Boolean,
             default: false
      }
}

• 通過this.$emit()向父元件傳送事件，觸發父元件中的方法

methods: {
     closeMyself () {
          this.$emit('on-close')
     }
}

4.layout.vue檔案中：

<li @click="logClick">登入</li>

<my-dialog :isShow="isShowLogDialog"
                @on-close="closeDialog('isShowLogDialog')">
               <p>Log</p>
</my-dialog>

data () {
      return {
            isShowLogDialog: false,
      }
},

methods: {
      logClick () {
            this.isShowLogDialog = true
      },

      closeDialog (attr) {
             this[attr] = false
      }
}

 

八、登入表單-logForm.vue檔案

 

 

1.作為一個表單最重要的是input通過v-model雙向繫結資料

<input type="text"
       v-model="usernameModel"
       placeholder="請輸入使用者名稱">

<input type="password"
       v-model="passwordModel"
       placeholder="請輸入密碼">

• 繫結的資料中兩個Model：

data () {
     return {
         usernameModel: '',
         passwordModel: ''
         errorText: ''
     }
}

2.表單另一個重要功能：驗證資料是否通過

<span class="error">
          {{ userErrors.errorText }}
</span>

<span class="error">
           {{ passwordErrors.errorText }}
</span>

• 通過v-model的改變進行驗證，通過計算屬性computed關聯v-model，

定義一個錯誤資料的物件，包括出錯狀態、出錯文字（———計算屬性的第二種用法）

computed: {
       userErrors () {
          let errorText, status

          if(!/@/g.test(this.usernameModel)){
               status = false
               errorText = '不包括@'
          }
          else {
               status = true
               errorText = ''
          }

          if (!this.userFlag){
               errorText = ''
               this.userFlag = true
          }

          return {
              status,
              errorText
          }
       }
}

• usernameModel每一次改變，都會先進行驗證，驗證通過傳送請求：

methods: {
     onLogin () {
       if (!this.userErrors.status || !this.passwordErrors.status) {
          this.errorText = '使用者名稱或密碼錯誤'
       }else {
          this.errorText = ''
          this.$http.get('api/login')
               .then((res) => {
                    this.$emit('has-log', res.data)
                }, (error) => {
                console.log(error)
          })
       }
    }
}

3.layout.vue檔案中：

<log-form @has-log="onSuccessLog"></log-form>

onSuccessLog (data) {
    this.username = data.username
    this.isShowLogDialog = false
}

 

購買詳情頁

 

九、購買詳情頁——新增路由/巢狀路由

 

    

1.router -> index.js檔案中配置 路由地圖：

import Annalysis from '../pages/detail/analysis'
import Count from '../pages/detail/count'
import Forecast from '../pages/detail/forecast'
import Publish from '../pages/detail/publish'

 
{
      path: '/detail',
      component: DetailPage,
      children: [
        {
          path: 'annalysis',  //子路由中不可以帶‘/’符號,表示根目錄
          component: Annalysis
        },
        {
          path: 'count',
          component: Count
        },
        {
          path: 'forecast',
          component: Forecast
        },
        {
          path: 'publish',
          component: Publish
        }
    ]

2. layout的路由的其中一個子頁面元件--detail.vue檔案中：

<div class="detail-right">
    <keep-alive>
          <router-view></router-view>
    </keep-alive>
</div>

3. 頁面跳轉：vue-router的內建元件<router-link></router-link>

<ul>
    <router-link v-for="item in products"
                 :key="item.name"
                 :to="{ path: item.path }"
                 tag="li"
                 active-class="active">
         {{ item.name }}
    </router-link>
</ul>

• 對應datas:

 products: [
          {
            name: '資料統計',
            path: 'count',
            icon: require('../assets/images/1.png'),
            active: false
          },
          {
            name: '資料預測',
            path: 'forecast',
            active: false
          } 
  ]

4. 頭圖的對映：隨路由的迴圈而對應顯示不同的圖片

<img :src="productIcon">

• 資料datas中：

imgMap: {
          '/detail/count': require("../assets/images/1.png"),
          '/detail/forecast': require("../assets/images/2.png"),
          '/detail/analysis': require("../assets/images/3.png"),
          '/detail/publish': require("../assets/images/4.png")
}

• 使用計算屬性通過 $router.path 獲取 imgMap 中對應的圖片路徑:

computed: {
        productIcon () {
            return this.imgMap[this.$router.path]
        }
}

• 外層detail頁面給它的子路由頁面共享樣式：<style>不可以加scope

6.路由導航，也可以直接通過<a>標籤直接跳轉

• index.vue首頁  資料datas中：

href: 'detail/analysis'

• 瀏覽器可直接訪問

7.不希望使用者訪問到/detail 頁面：detail.vue只作為一箇中介的元件

• 在路由map中，將所有訪問到/detail的 redirect一下，訪問預設頁面

path: '/detail',
component: DetailPage,
redirect: '/detail/count'，

 

十、購買詳情頁——select選項元件

 

 

<div class="selection-component">
      <div class="selection-show" @click="toggleDrop">
           <span>{{ selections[nowIndex].label }}  </span>
           <div class="arrow"></div>
      </div>

      <div class="selection-list" v-if="isDrop">
          <ul>
             <li v-for="(item, index) in selections"
                  :key="item.label"
                   @click="chooseSelection(index)">
              {{ item.label }}
            </li>
          </ul>
      </div>
</div>

•  關鍵：通過規定 nowIndex 標記當前選中的選項

data () {
      return {
         nowIndex: 0,
         isDrop: false
      }
}  

• 兩個方法：顯示隱藏、切換selection

methods: {
       toggleDrop () {
           this.isDrop = !this.isDrop
       },

       chooseSelection (index) {
           this.nowIndex = index
           this.isDrop = false
           this.$emit('on-change', this.nowIndex)  
                //傳到元件外面，告訴外面要購買的是什麼
       }
}

• 從父元件獲取到的props資料型別、格式：

 props: {
       selections: {
          type: Array,
          default: [{
             label: 'test',
             value: 0
          }]
       }
 }

 

十一、購買詳情頁——可多選項元件

 

 

<template>
       <div class="chooser-component">
           <ul class="chooser-list">
              <li v-for="(item, index) in selections"
                  @click="toggleSelection(index)"
                  :title="item.label"
                  :class="{active: checkActive(index)}"
              >{{ item.label }}</li>
           </ul>
       </div>
</template>

1.關鍵：nowIndex 是一個數組，可以多選

data () {
      return {
          nowIndexs: [0]
      }
}

2、Lodash：是一個一致性、模組化、高效能的 JavaScript實用工具庫。        

• 通過降低 array、number、objects、string等等的使用難度，從而讓 JavaScript變得更簡單。

 $ npm i --save lodash

import _ from 'lodash'
 
methods: {
       toggleSelection (index) {
           if (this.nowIndexes.indexOf(index)){
              this.nowIndexes.push(index)
           }
          else {
              this.nowIndexes = _.remove(this.nowIndexes, (idx) => {
                   return idx !== index
              })
          }
          this.$emit('on-change', this.nowIndexes)
        }
}

坑：vue2.0 刪除了 vue1.0 中的 $remove方法，官方文件推薦使用第三方工具庫

       _remove實現，如上：從陣列中刪除index為this.nowIndexes的值

 

3.使用一個方法返回是否active，實現多個選項同時active 被啟用

 :class="{active: checkActive(index)}"

checkActive (index) {
      return this.nowIndexes.indexOf(index) !== -1
}

•  方法判斷index在nowIndexes陣列中是否存在。
•  返回true，則active:true 選項被啟用，返回false.則選項不被啟用

 

十二、購買詳情頁——陣列元件

 

 

<template>
   <div class="counter-component">
       <div class="counter-btn" @click="minus"> - </div>
       <div class="counter-show">
            <input type="text" v-model="number" @keyup="fixNumber">
       </div>
       <div class="counter-btn" @click="add"> + </div>
  </div>
</template>

1.最大值和最小值 由props定義預設值，在不同的呼叫處由父元件給到

 props: {
    max: {
       type: Number,
       default: 5
    },

    min: {
       type: Number,
       default: 1
    } 
 }

2.輸入框和資料雙向繫結 number, 給定預設值為當前資料的最小值

data () {
    return {
      number: this.min
    }
}

3.watch監聽number 每次改變的時候，都會執行$emit->on-change

•  使用監聽資料，可以不管資料是在哪兒變的，以及怎麼變的

watch: {
    number () {
        this.$emit('on-change', this.number)
    }
}

4.方法中執行‘加’、‘減’以及更換資料

• 當輸入框輸入String型別時替換掉其中不為數字的部分，然後轉為Number

methods: {
    fixNumber () {
      let fix

      if (typeof this.number === 'string') {
        fix = Number(this.number.replace(/\D/g, ''))
      }else {
        fix = this.number
      }

      if(fix > this.max || fix < this.min) {
        fix = this.min
      }

      this.number = fix
    },

    minus () {
      if (this.number <= this.min) {
        return
      }
      this.number --
    },

    add () {
      if (this.number >= this.max) {
        return
      }
      this.number ++
    }
  }

 

十三、購買詳情頁——總價計算

 

 

1.關鍵： 依據每一個頁面中所有元件傳出來的值，進行計算

counter.vue: 

this.$emit('on-change', this.number)

selection.vue:

this.$emit('on-change', this.selections[this.nowIndex])

chooser.vue:

this.$emit('on-change', this.selections[index])

2.analysis.vue頁面元件中：

• 呼叫對應的子元件：

<v-counter @on-change="onParamChange('buyNum', $event)">
</v-counter>

<v-selection :selections="buyTypes"
             @on-change="onParamChange('buyType',$event)">
</v-selection>

<v-chooser :selections="periodList"
           @on-change="onParamChange('period', $event)">
</v-chooser>

<v-mul-chooser :selections="versionList"
               @on-change="onParamChange('versions'$event)">
</v-mul-chooser>

• 各子元件統一使用on-change事件觸發同一個引數處理函式

onParamChange (attr, value) {
        this[attr] = value
        //console.log(attr, this[attr])
        this.getPrice()
}

在傳參時：

     第一個引數attr，用'元件資料如buyType'來標識是哪個元件呼叫的方法

     第二個引數value，用$event來表示 事件on-change帶出來的值  

 

3.元件渲染完成之後，第一次進入頁面時元件資料都顯示預設資料

mounted () {
     this.buyNum = 1
     this.buyType = this.buyTypes[0]
     this.versions = [this.versionList[0]]
     this.period = this.periodList[0]
     this.getPrice()
}

4.一般規定一個介面，傳給服務端，處理完成後再通過Ajax傳出來金額

• 使用lodash和vue-resource傳送post請求：

getPrice () {
      let buyVersionsArray = _.map(this.versions, (item) => {
           return item.value
      })

      let reqParams = {
          buyNum: this.buyNum,
          buyType: this.buyType.value,
          period: this.period.value,
          version: buyVersionsArray.join(',')
      }

      //通過vue-resource 傳送Ajax請求

      this.$http.post('/api/getPrice', reqParams)
        .then((res) => {
             //console.log(res)
             //let data = JSON.parse(res.data)
             this.price = res.data.buyNum * 20
      })
}

 

十四、購買詳情頁——購買彈窗、選擇銀行

 

 

選擇銀行：四個頁面統一，不隨頁面本身的選擇而改變  

——抽出來  以獨立的方式載入

 

訂單列表

 

十五、訂單列表——日曆元件

 

 

安裝第三方日曆控制元件-awesome 工具庫

npm install vue-date-picker  --save //記錄到專案裡   

引入：

import VueDatePicker from 'vue-date-picker'

components: {
      VueDatePicker
}

不足：這個元件只支援vue1.0版本的，需要自己再擴充套件一下

重新擴充套件：複製到自己新建的datepicker.vue檔案中

修復bug:

   1.在script->props中增：

styleObj: { type: Object, default: null }

   2.在vue1.0中value是直接傳過來的 :value="value"，需要改成

v-model="showValue"  

     datas中對應： 

showValue: ' ',

   3.在vue1.0中允許給傳入的value賦值，但在vue2.0中是不允許的，會報錯

this.value = this.stringify(); //後面通過$emit將value值傳出來
 
this.showValue = this.stringify();
this.$emit('on-change', this.showValue);

使用元件：

<v-date-picker  fromat="YYYY-MM-DD"
                @change="changeStartDate">
</v-date-picker>

 

十六、訂單列表

 

 

watch監聽關鍵詞搜尋input框中的query:

<input type="text" v-model.lazy="query" class="order-query">  

• 加修飾符 .lazy 使得移除後才觸發watch中方法

datas: { query: '', }  

watch: {
     query () {
        console.log('on query change')
     }
}

 

十七、訂單列表

 

 

關鍵：兩次遍歷——第一次遍歷每一條資料物件，包含一行中所有資料

                                第二次遍歷每一條中每一列的單個數據

基礎：兩個迴圈渲染——渲染表頭<th>、渲染表列<td>

<table>
       <tr>
          <th v-for="head in tableHeads" :key="head.label">
              {{ head.label }}
          </th>
       </tr>

       <tr v-for="item in tableData" :key="item.period">
          <td v-for="head in tableHeads" :key="head.key">
               {{ item[head.key] }}
          </td>
       </tr>
</table>

• 點選表頭，實現排序：

changeOrder (headItem) {
        this.tableHeads.map((item) => {   //常用使點選項高亮顯示的方法
            Item.active = false
            return item
        })

        headItem.active = true

        if (this.currentOrder === 'asc') {
           this.currentOrder = 'desc'
        } 
        else if (this.currentOrder === 'desc') {
           this.currentOrder = 'asc'
        }

        this.tableData = _.orderBy(this.tableData, headItem.key,
      this.currentOrder)

       //_.orderBy的三個引數分別是：
       //要排序的資料、排序根據的列數、排序的方式（正序，倒序）
}

• checkOrder.vue檔案：在元件內部進行路由跳轉的通用的方法

toOrderList () {
         this.$router.push({path: '/orderList'})
}
//和<router-link>裡面to的跳轉是一樣的

---

 版權宣告：本文原創，未經本人允許不得轉載