原创 第十課時: Vue中第三方庫的使用方法
從數字漸變組件(countUp.js)談第三方JS庫的使用 1、組件封裝基礎實例父組件count-to.vue: <template> <div> // 父組件獲取DOM通過ref屬性,父組件傳遞給子組件end-val屬性
2019-05-08 21:35:06
1
原创 第九課時: Moc模擬Ajax響應
1.響應模擬(建議開發版完成後刪除Mock，筆者實際開發完沒有刪除Mock好像是引起了一些ajax的異常情況)src/main.js // 判斷開發環境下才引入mock if (process.env.NODE_ENV !== 'produ
2019-05-08 16:55:03
原创 第八課時: vue中axios請求攔截封裝
Ajax請求 1.解決跨域問題出現跨域的情況（受瀏覽器同源策略的影響）: 解決跨域的方法: 1) 前端項目增加跨域代理 在vue.config.js文件中添加 2) 後端增加header 2、封裝axiossrc/conf
2019-05-08 16:25:00
7
原创 第七課時: 狀態管理, Vuex進階
1.插件因爲vuex是存在內存中的，所以刷新頁面的時候其中的值就會初始化。爲了刷新時不讓其改變，可以開發一個插件，把state狀態都存在本地中。 saveInLocal.js: export default store => {
2019-05-07 19:45:01
原创 第六課時: Vuex狀態管理,mutation&action&module
1. mutationsmutations也是一個對象，這個對象裏面可以放改變state的初始值的方法，具體的用法就是給裏面的方法傳入參數state或額外的參數,然後利用vue的雙向數據驅動進行值的改變，同樣的定義好之後也把這個mutati
2019-05-07 18:55:02
原创 第五課時: Vuex狀態管理,state&getter
1.安裝Vuex首先在 vue 2.0+ 你的vue-cli項目中安裝 vuex : npm install vuex --save 然後 在src文件目錄下新建一個名爲store的文件夾，爲方便引入並在store文件夾裏新建一個index
2019-05-07 16:45:03
原创 第四課時: vue狀態管理-Bus
Bus相當於廣播和分發事件的方法。vue如何實現非父子組件間的通信，可以通過實例一個vue實例Bus作爲媒介，要相互通信的兄弟組件之中，都引入Bus，然後通過分別調用Bus事件觸發和監聽來實現通信和參數傳遞。 Bus.js文件: impor
2019-05-07 14:16:31
原创 第三課時: vue-router路由進階
1. 路由組件傳參頁面組件可以通過props接收url參數布爾模式{ path: '/argu/:name', name: 'argu', component: () => import('@/views/argu.vue'), props
2019-05-07 11:25:03
原创 第二課時: 路由詳情和導航流程解析
router-link 和 router-view組件 <div id="app"> <h1>Hello App!</h1> <p> <!-- 使用 router-link 組件來導
2019-05-06 17:05:11
原创 第一課時: 使用Vue-Cli 3.0 創建一個項目
3.0 新加入了 TypeScript 以及 PWA 的支持 部分命令發生了變化： 下載安裝 npm install -g vue@cli 刪除了vue list 創建項目 vue create 啓動項目 npm run ser
2019-05-06 16:25:04
原创 第十九課時: Tree組件實現文件目錄-高級實現
封裝文件目錄組件 操作目錄 多個屬性v-model替代方案 增加鉤子函數 最終呈現的效果如圖: 父組件folder-tree.vue: <template> <div class="folder-wrapper"> <!--
2019-03-09 22:55:05
原创 第十八課時: Tree組件實現文件目錄-基礎實現
Tree組件使用 iview樹形控件要求的數據格式 data1: [ { title: 'parent 1', expand: true, childr
2019-03-09 10:44:44
原创 第十七課時: 可編輯表格的實現
1、JSX進階 item.render = (h, { row, index, column }) => { // keyArr等於this.insideData[index].edittingKeyArr,如果th
2019-03-07 17:54:35
原创 第十六課時: 可收縮多級菜單的實現
可收縮多級菜單的實現 1、遞歸組件實戰 通過v-show來切換re-menu和icon組件的顯示隱藏,re-menu組件上幾個課時有事例 <template> <div class="side-menu-wrapper"> <s
2019-03-06 11:34:35
1
原创 第十四課時: 登錄/登出以及JWT認證
1.後端代碼概覽 // /login登錄接口 router.post('/login', function(req, res, next) { const {userName, password} = req.body if (us
2019-02-28 14:04:38
1