Vue造輪子 Tabs測試 上

1. 點選出現下劃線的問題

// tabs-item.vue

methods: 
}// tabs.vue
mounted()
// tabs-head
created())
}// 為了解決初始化列印出為undefined的問題
// tabs.vue 通過兩層迴圈解決找到item
mounted()})}
})}

mounted() = vm.$el.getboundingclientrect()

this.$refs.line.style.width = `$px` // 寬度就會跟著我們點的元素的寬度變,
// this.$refs.line.style.left = `$px` // 寬度變了我們再修改位置
this.$refs.line.style.transform = `translatex($px)` 
// 可以這樣優化寫來實現硬體3d加速
// 但是這樣寫有個bug一開始會從左往右滑
})}

// tabs-head.vue

data()
},mounted() = vm.$el.getboundingclientrect()
this.$refs.line.style.width = `$px`
this.$refs.line.style.transform = `translatex($px)`
})})
}

// 增加disabled樣式

computed: }},
// 增加disabled行為
methods: 
this.eventbus.$emit('update:selected', this.name, this)
}}

Vue造Toast輪子引發的思考

最近一直在不停的造vue輪子，目前已經完成了button 網格布局 預設布局 input等輪子。今天在編寫toast輪子的時候遇到了乙個問題，說一說我的思考過程，拿出來和大家分享一下，希望對大家有所幫助。在決定去造乙個輪子之前，首先要做的就是需求分析，其中最重要的一步就是你的輪子造出來之後，其他人怎...

Vue造輪子 手風琴元件

一.大致的使用方法 內容2內容3 二.完成最外部的樣式 collapse三.進一步調節樣式 collapse item四.預設內容摺疊起來和點選切換，基本樣式和基本功能完成 collapse item data 五.完善功能第乙個點開,第二個就關閉mounted methods else close...

迷你版Vue 學習如何造乙個Vue輪子

專案位址 其實vue1和vue2最大的區別就是vue2多了乙個虛擬dom，其他的區別都是很小的。所以理解了vue1的原始碼，就相當於理解了vue2，中間差了乙個虛擬dom的diff演算法 先來科普一下mvvm的概念及原理 mini vuex 全域性方法 繼承minivue 產生乙個新的子類建構函式 ...