原创 elementUi——適合於Vue的UI框架

簡介 element-ui是一個ui庫,它不依賴於vue。但是卻是當前和vue配合做項目開發的一個比較好的ui框架。 Layout佈局(el-row、el-col) element-ui借用了bootstrap框架的思想,使用了柵格

原创 ES6寫法的reactjs

reactjs是目前最火的單頁面框架,面向ES6語法,使用JSX語法進行組件化開發。 JSX語法是把js和html混合起來編寫代碼,其核心就是以“<”“>”包裹html,以“{ }”來包裹js語法。 只需要多寫幾遍就行,個人覺得沒必要

原创 react路由提高(Prompt、Redirect、match、Switch)

除了Router、Route、Link這三個react路由的基礎搭配使用,還有一些其他的比較重要的組件,比如我們在頁面切換時,需要進行一些提示,我們就能使用Prompt組件。 1、Prompt組件 它有一個必須的屬性message,用

原创 屬性指令的解析原理——以 v-if 爲例

問題提出 面試中,面試官不免要問,關於v-if這類的指令,實現的原理是什麼? 效果圖示: HTNL: <body> <div id="root"> <div v-if="true">我是指令的展示和隱藏</div> <

原创 在vue中封裝echarts

echarts是什麼 echarts是一個繪製圖表的js庫。它的底層是使用canvas實現的。比如下面的這類圖表,就是使用echarts實現的。 echarts在web網頁中的使用 和其他的js庫一樣,echarts在網頁中使用的時

原创 在node下使用webpack構建react開發環境

在react中,我們知道使用webpack就是最好的構建工具,那這樣的一個簡單的開發環境是如何從無到有一步步的搭建起來的呢? 這一篇文章的目的:就是基於node使用webpack搭建基礎的開發環境。 1、node的安裝 我們使用的web

原创 Vue中,數據綁定視圖的實現原理

示例 比如說,在body中的數據模板是這樣的: <body> <div id="root"> <div>{{message}}</div> </div> </body>12345 而message的值在數

原创 路由的基本實現——hash路由

問題提出 vue、react在路由的實現上,都有基於hash的路由。那麼如何使用原生來實現呢? 比如類似下面這樣的路由: hashchange事件是實現路由的核心 hash實現路由的時候,最本質的原理就是hash值的變化,會引發一個

原创 項目實踐中的react-navigation導航器

React-Native給前端帶來了新視野,可以使用web開發語言javascript來實現Native開發(ios/android),現在的前端能做的事情就更多了。 react-navigation的使用 react-native中使

原创 react-redux之connect和Provider組件

在redux的學習中,個人覺得connect()函數是redux中的難點。所以想結合Provider 組件來總結一下。(如果大家對redux還沒有一個整體的瞭解,還不建議直接看下去) 1、react-redux的狀態管理方式是什麼?

原创 深度理解redux(一)

1、redux作爲react技術棧系列中解決數據管理的一種架構,我們非常有必要學會它,理解它。 2、爲什麼要用redux?很多人很疑惑。有這麼一句話,我覺得很經典,就是當你不知道要不要用redux的時候,那就不需要使用redux。只有當

原创 react路由補充部分(exact、八個路由示例)

1、exact exact是Route下的一條屬性,一般而言,react路由會匹配所有匹配到的路由組價,exact能夠使得路由的匹配更嚴格一些。 exact的值爲bool型,爲true是表示嚴格匹配,爲false時爲正常匹配。 如在e

原创 Vue的項目開發,你應該知道什麼

Vue進行項目開發,我們需要懂得知識棧,應該由這麼一些部分構成:vue.js、vue-router、vuex、axios、vue的單文件組件、element-ui等。這些部分,就是vue項目開發的全家桶。 1、vue.js vue.js

原创 基於vue、vue-router、axios的App項目的總結

項目需求 我的項目的github地址: https://github.com/liwudi/VueProject.git 1、基本的登錄註冊功能 2、主頁面的商品展示、商品分類、輪播。購物車的功能、我的訂單的功能、用戶中心的相關功

原创 react學習中的一些細節

1、css相關 react的css引用方式: var styles = require(“./Category.css”); import styles from “./Category.css”; 傳統的方式是 <link typ