vue入門－實現一個分頁組件(1.0.3版本)

wangzy2019 發布于2019-08-21 10:44 / 826人閱讀

摘要：關注前端社區的同學，一定知道。一個小巧優雅框架。目前是正式版，然后中文文檔還沒更新上來。實現的一個分頁組件。有了角標還需判斷前一頁下一頁的顯示增加和字段觀看模版發現指令很明顯當內容是就輸出否就沒。

vue

關注前端社區的同學，一定知道vue。一個小巧、優雅 mvvm 框架。目前是1.0.3正式版，然后中文文檔還沒更新上來。使用了一段時間的感觸就是，我再也不想直接操作DOM了。數據綁定式的編程體驗真是好。實現的一個分頁組件。

css

ul,li{
    margin: 0px;
    padding: 0px;
}
li{
    list-style: none
}
.page-bar li:first-child>a {
   margin-left: 0px
}
.page-bar a{
    border: 1px solid #ffffd;
    text-decoration: none;
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #337ab7;
    cursor: pointer
}
.page-bar a:hover{
    background-color: #eee;
}
.page-bar .active a{
    color: #fff;
    cursor: default;
    background-color: #337ab7;
    border-color: #337ab7;
}
.page-bar i{
    font-style:normal;
    color: #d44950;
    margin: 0px 4px;
    font-size: 12px;
}

模版

        
            
            上一頁
            
                {{ index }}
                
                下一頁
                共{{all}}頁

在未引入js前,頁面的顯示,分析下,all字段簡單直接輸出即可,{{index}}是分頁碼這個需要一些動態的渲染。

var pageBar = new Vue({
    el: ".page-bar",
    data: {
        all: 20, //總頁數
        cur: 1,//當前頁碼
});

調用 new Vue({參數}) 就是創建了一個基本的組件,賦值給變量 pageBar.
el就是element的縮寫,定位模版的位置.data就是數據了.
知道了總頁數但是要顯示頁碼還是要一番計算,所以顯示頁碼就是計算屬性了.
所以我們要用computed

computed: {
            indexs: function(){
              var left = 1
              var right = this.all
              var ar = [] 
              if(this.all>= 11){
                if(this.cur > 5 && this.cur < this.all-4){
                        left = this.cur - 5
                        right = this.cur + 4
                }else{
                    if(this.cur<=5){
                        left = 1
                        right = 10
                    }else{
                        right = this.all
                        left = this.all -9
                    }
                }
             }
            while (left <= right){
                ar.push(left)
                left ++
            }   
            return ar
           },
           showLast: function(){
                if(this.cur == this.all){
                    return false
                }
                return true
           },
           showFirst: function(){
                if(this.cur == 1){
                    return false
                }
               return true
           }

ok這個頁碼顯示規則是參考Baidu搜尋的返回值就是[2,3,4,5,6]之類。
有了角標還需判斷前一頁、下一頁的顯示.增加showLast和showFirst字段（bool)
觀看html模版發現v-if指令.很明顯當內容是true就輸出,否就沒。
重點看下

   
        {{ index }}

v-for是循環渲染輸出計算屬性indexs.每一次循環的子元素賦值給index v-bind:class綁定class,當渲染到目前的角標的時候加個class v-on:click是綁定了事件，我把index當參數傳進入了,后面做判斷，默認傳event事件.
然后我們給Vue的選項里面再增加methods字段

 methods: {
            btnClick: function(data){//頁碼點擊事件
                if(data != this.cur){
                    this.cur = data 
                }
            }
        }

組件交互

組件寫完了，問題來了，用戶點擊發生頁面改變，你怎么通知其他組件作出相應的變化. 可以在頁角發生改變的函數下，插一條語句通知其他組件。不過這種方法是很差的做法。可以使用

watch: {
    cur: function(oldValue , newValue){
                    console.log(arguments)
            }
}

觀察了cur數據當它改變的時候，可以獲取前后值。然后通知其他組件。

完整的代碼可以看 github:vue-pagination

GPU云服務器云服務器 Vue實現分頁 vue組件 vue組件開發 vue父子組件通訊

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86116.html

Vue.js資源分享

摘要：中文官網英文官網組織發出一個問題之后，不要暫時的離開電腦，如果沒有把握先不要提問。珍惜每一次提問，感恩每一次反饋，每個人工作還是業余之外抽出的時間有限，充分準備好應有的資源之后再發問，有利于問題能夠高效質量地得到解決。 Vue.js資源分享更多資源請Star：https://github.com/maidishike... 文章轉自：https://github.com/maid...

vpants 2019-08-20 14:21 評論0 收藏0
SpringBoot-vue 基于Java的微服務全棧快速開發實踐

摘要：本項目將使用配合最簡單的邏輯來展示一個基于的微服務全棧快速開發實踐的。提供一系列大型項目常用的非功能性特征，比如內嵌服務器，安全，指標，健康檢測，外部化配置。 SprintBoot-Vue SpringBoot ＋前端MVVM 基于Java的微服務全棧快速開發實踐 showImg(https://segmentfault.com/img/remote/1460000010167913...

FleyX 2019-08-21 11:48 評論0 收藏0
SpringBoot-vue 基于Java的微服務全棧快速開發實踐

摘要：本項目將使用配合最簡單的邏輯來展示一個基于的微服務全棧快速開發實踐的。提供一系列大型項目常用的非功能性特征，比如內嵌服務器，安全，指標，健康檢測，外部化配置。 SprintBoot-Vue SpringBoot ＋前端MVVM 基于Java的微服務全棧快速開發實踐 showImg(https://segmentfault.com/img/remote/1460000010167913...

neu 2019-08-15 10:50 評論0 收藏0
使用nuxt開發博客后臺管理系統（一）element ui的使用

摘要：進入主題使用我們在創建項目時已經選擇安裝了，安裝完就能使用了。注：文章中的nuxt為2.0.0版本眾所周知vue單頁面應用的seo很不友好，每次打開頁面先獲取的節點也就是一個,而這對想用vue做spa又想擁有友好搜索引擎seo優化的人來說就好比雞肋。好在vue的官方出了nuxt，既能讓我們使用spa又能擁有良好的搜索引擎優化；nuxt介紹->https://zh.nuxtjs.or...

Freeman 2019-08-26 10:49 評論0 收藏0
Vue 實用分頁組件paging（頁數太多時顯示省略號）

摘要：年更新之前的版本在頁數太多時依然每一頁都顯示，這顯然不合理。增強版在頁數太多時會顯示省略號，且把分頁組件單獨提取出來，可以直接在其他頁面引入使用。用下來還是的做法方便一些，不需要繞一下子了。總頁數當前頁頁面初始化函數參考文章 2017年6.26更新：之前的版本在頁數太多時依然每一頁都顯示，這顯然不合理。增強版在頁數太多時會顯示省略號，且把分頁組件單獨提取出來，可以直接在其他頁面引入使...

andycall 2019-08-29 12:24 評論0 收藏0