原创 從零實現一個日曆組件

一、日曆組件簡介 日曆組件主要是由一個文本輸入框組成,點擊文本輸入框後會在文本框下方顯示日曆面板,日曆面板包含三部分: 頭部區(主要顯示當面日曆面板對應的年月以及四個年月上下切換按鈕)、內容區(顯示星期、以及42天)、底部區(今天快捷按鈕,

原创 詳解虛擬DOM並實現DOM-DIFF算法

一、虛擬DOM簡介 所謂虛擬DOM,就是用JavaScript對象的方式去描述真實DOM。由於真實DOM的創建、修改、刪除會造成頁面的重排和重繪,頻繁操作真實DOM會影響頁面的性能,頁面中會有數據、樣式的更新,操作真實DOM是不可避免的,而

原创 uni-app相關知識總結

一、默認導航欄 uni-app默認會提供一個導航欄,即小程序的導航欄,我們不需要進行任何的配置就會顯示,默認導航欄的配置同微信小程序,只不過微信小程序的組件是分爲.wxml、.wxss、.js、.json四個文件組成,而uni-app的組件

原创 uni-app開發一個小視頻應用(三)

一、前情回顧 uni-app開發一個小視頻應用(一) uni-app開發一個小視頻應用(二) 二、創建城市頁面 首頁導航欄上有一個城市選擇頁面,點擊會切換到城市頁面,切換到城市頁面的過程中並沒有路由的跳轉,而只是tab的切換,所以需要將城市

原创 uni-app開發一個小視頻應用(二)

一、前情回顧 uni-app開發一個小視頻應用(一) 上篇文章,我們已經實現了首頁的頭部導航欄組件、底部的tabBar導航欄組件、中間的視頻列表組件以及視頻列表組件中的視頻播放組件,傳入視頻列表渲染後已經可以上下滑動進行視頻切換和播放,接下

原创 uni-app開發一個小視頻應用(一)

一、uni-app簡介 uni-app 是一個使用 Vue.js 開發所有前端應用的框架,是一種終極的跨平臺解決方案,這裏的平臺,主要指的是App平臺(android、ios)、小程序平臺、H5平臺。開發者編寫一套代碼,可發佈到iOS、An

原创 Vue常見面試題精講【持續更新】

1. v-if和v-show指令有什麼區別? v-if 是條件渲染指令,控制的是組件是否創建(渲染),值爲true則渲染該組件,值爲false則不渲染該組件,對應Html元素則不會存在於瀏覽器的html文檔中,即打開瀏覽器調試工具找不到該組

原创 mpvue開發微信小程序基礎知識

一、mpvue簡介 mpvue 是一個使用 Vue.js 開發小程序的前端框架。框架基於 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 實現,使其可以運行在小程序環境中,從而爲小程序開發引入

原创 一看就懂之webpack高級配置與優化

一、打包多頁面應用 所謂打包多頁面,就是同時打包出多個html頁面,打包多頁面也是使用html-webpack-plugin,只不過,在引入插件的時候是創建多個插件對象,因爲一個html-webpack-plugin插件對象只能打包出一個h

原创 從零實現一個vue-router插件

從零實現一個vue-router插件 一、回顧一下官方vue-router插件的使用 要想自己實現一個vue-router插件,就必須先了解一下vue-router插件的基本使用,我們在使用vue-router的時候,通常會定義一個rout

原创 Vue路由之JWT身份認證

Vue路由之JWT身份認證 一、JWT身份認證簡介 JSON Web Token(JWT)是目前最流行的跨域身份驗證解決方案,相較於session機制,服務器就不需要保存任何 session 數據了,也就是說,服務器變成無狀態了,從而比較

原创 使用typescript構建Vue應用

使用typescript構建Vue應用 一、Vue項目初始化-引入typescript 使用typescript構建Vue應用和使用js一樣,都是通過vue-cli去初始化並創建一個vue項目,只不過使用typescript構建的時候要在腳

原创 從零開始實現一個Vue級聯組件

從零開始實現一個Vue級聯組件 本文實現級聯組件需要用到自定義指令和組件通信相關知識,最好先閱讀以下兩篇文章: Vue自定義指令 Vue組件基礎與通信 一、組件簡介 本文實現的是一個省、市、縣...多級聯動組件,當組件渲染完成後默認會加載出

原创 Vue自定義指令

Vue自定義指令 一、Vue自定義指令 本文主要講述的是Vue自定義指令內容,爲後續實現級聯組件作鋪墊。 ① 指令簡介 首先以常用的v-model指令的使用爲例: <input type="text" v-model.lazy="age"/

原创 Vue組件基礎與通信

Vue組件基礎與通信 一、vue cli腳手架 ① vue cli 簡介與安裝 vue cli 3.0之前安裝的是vue-cli模塊,vue cli 3.0之後安裝的是@vue/cli模塊。如果已經全局安裝了舊版本的 vue-cli , 那