1 ### Vue.js 五天
1 ### Vue.js 五天 2 3 ## 一、 組件component 4 5 ### 1. 什么是組件？ 6 組件（Component）是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼 7 組件是自定義元素（對象） 8 9 ### 2. 定義組件的方式 10 方式1：先創建組件構造器，然后由組件構造器創建組件 11 方式2：直接創建組件 12 13 ### 3. 組件的分類 14 分類：全局組件、局部組件 15 16 ### 4. 引用模板 17 將組件內容放到模板<template>中並引用 18 19 ### 5. 動態組件 20 <component :is="">組件 21 多個組件使用同一個掛載點，然后動態的在它們之間切換 22 23 <keep-alive>組件 24 25 26 ## 二、 組件間數據傳遞 27 28 ### 1. 父子組件 29 在一個組件內部定義另一個組件，稱為父子組件 30 子組件只能在父組件內部使用 31 默認情況下，子組件無法訪問父組件中的數據，每個組件實例的作用域是獨立的 32 33 ### 2. 組件間數據傳遞 （通信） 34 35 #### 2.1 子組件訪問父組件的數據 36 a)在調用子組件時，綁定想要獲取的父組件中的數據 37 b)在子組件內部，使用props選項聲明獲取的數據，即接收來自父組件的數據 38 總結：父組件通過props向下傳遞數據給子組件 39 注：組件中的數據共有三種形式：data、props、computed 40 41 #### 2.2 父組件訪問子組件的數據 42 a)在子組件中使用vm.$emit(事件名,數據)觸發一個自定義事件，事件名自定義 43 b)父組件在使用子組件的地方監聽子組件觸發的事件，並在父組件中定義方法，用來獲取數據 44 總結：子組件通過events給父組件發送消息，實際上就是子組件把自己的數據發送到父組件 45 46 ### 3. 單向數據流 47 props是單向綁定的，當父組件的屬性變化時，將傳導給子組件，但是不會反過來 48 而且不允許子組件直接修改父組件中的數據，報錯 49 解決方式： 50 方式1：如果子組件想把它作為局部數據來使用，可以將數據存入另一個變量中再操作，不影響父組件中的數據 51 方式2：如果子組件想修改數據並且同步更新到父組件，兩個方法： 52 a.使用.sync（1.0版本中支持，2.0版本中不支持，2.3版本又開始支持） 53 需要顯式地觸發一個更新事件 54 b.可以將父組件中的數據包裝成對象，然后在子組件中修改對象的屬性(因為對象是引用類型，指向同一個內存空間)，推薦 55 56 ### 4. 非父子組件間的通信 57 非父子組件間的通信，可以通過一個空的Vue實例作為中央事件總線（事件中心），用它來觸發事件和監聽事件 58 59 var Event=new Vue(); 60 Event.$emit(事件名,數據); 61 Event.$on(事件名,data => {}); 62 63 64 ## 三、 slot內容分發 65 本意：位置、槽 66 作用：用來獲取組件中的原內容，類似angular中的transclude指令 67 68 69 ## 四、 vue-router路由 70 71 ### 1. 簡介 72 使用Vue.js開發SPA（Single Page Application）單頁面應用 73 根據不同url地址，顯示不同的內容，但顯示在同一個頁面中，稱為單頁面應用 74 75 [參考](https://router.vuejs.org/zh-cn) 76 77 bower info vue-router 78 cnpm install vue-router -S 79 80 ### 2. 基本用法 81 a.布局 82 b.配置路由 83 84 ### 3. 路由嵌套和參數傳遞 85 傳參的兩種形式： 86 a.查詢字符串：login?name=tom&pwd=123 87 {{$route.query}} 88 b.rest風格url：regist/alice/456 89 {{$route.params}} 90 91 92 ### 4. 路由實例的方法 93 router.push() 添加路由，功能上與<route-link>相同 94 router.replace() 替換路由，不產生歷史記錄 95 96 ### 5. 路由結合動畫 97 98 99 ## 五、 單文件組件 100 101 ### 1. .vue文件 102 .vue文件，稱為單文件組件，是Vue.js自定義的一種文件格式，一個.vue文件就是一個單獨的組件，在文件內封裝了組件相關的代碼：html、css、js 103 104 .vue文件由三部分組成：<template>、<style>、<script> 105 <template> 106 html 107 </template> 108 109 <style> 110 css 111 </style> 112 113 <script> 114 js 115 </script> 116 117 ### 2. vue-loader 118 瀏覽器本身並不認為.vue文件，所以必須對.vue文件進行加載解析，此時需要vue-loader 119 類似的loader還有許多，如：html-loader、css-loader、style-loader、babel-loader等 120 需要注意的是vue-loader是基於webpack的 121 122 ### 3. webpack 123 webpack是一個前端資源模板化加載器和打包工具，它能夠把各種資源都作為模塊來使用和處理 124 實際上，webpack是通過不同的loader將這些資源加載后打包，然后輸出打包后文件 125 簡單來說，webpack就是一個模塊加載器，所有資源都可以作為模塊來加載，最后打包輸出 126 127 [官網](http://webpack.github.io/) 128 129 webpack版本：v1.x v2.x 130 131 webpack有一個核心配置文件：webpack.config.js，必須放在項目根目錄下 132 133 ### 4. 示例，步驟： 134 135 #### 4.1 創建項目，目錄結構 如下： 136 webpack-demo 137 |-index.html 138 |-main.js 入口文件 139 |-App.vue vue文件 140 |-package.json 工程文件 141 |-webpack.config.js webpack配置文件 142 |-.babelrc Babel配置文件 143 144 ### 4.2 編寫App.vue 145 146 ### 4.3 安裝相關模板 147 cnpm install vue -S 148 149 cnpm install webpack -D 150 cnpm install webpack-dev-server -D 151 152 cnpm install vue-loader -D 153 cnpm install vue-html-loader -D 154 cnpm install css-loader -D 155 cnpm install vue-style-loader -D 156 cnpm install file-loader -D 157 158 cnpm install babel-loader -D 159 cnpm install babel-core -D 160 cnpm install babel-preset-env -D //根據配置的運行環境自動啟用需要的babel插件 161 cnpm install vue-template-compiler -D //預編譯模板 162 163 合並：cnpm install -D webpack webpack-dev-server vue-loader vue-html-loader css-loader vue-style-loader file-loader babel-loader babel-core babel-preset-env vue-template-compiler 164 165 ### 4.4 編寫main.js 166 167 ### 4.5 編寫webpack.config.js 168 169 ### 4.6 編寫.babelrc 170 171 ### 4.7 編寫package.json 172 173 ### 4.8 運行測試 174 npm run dev 175 176 177 ## 六、 vue-cli腳手架 178 179 ### 1. 簡介 180 vue-cli是一個vue腳手架，可以快速構造項目結構 181 vue-cli本身集成了多種項目模板： 182 simple 很少簡單 183 webpack 包含ESLint代碼規范檢查和unit單元測試等 184 webpack-simple 沒有代碼規范檢查和單元測試 185 browserify 使用的也比較多 186 browserify-simple 187 188 ### 2. 示例，步驟： 189 190 #### 2.1 安裝vue-cli，配置vue命令環境 191 cnpm install vue-cli -g 192 vue --version 193 vue list 194 195 #### 2.2 初始化項目，生成項目模板 196 語法：vue init 模板名 項目名 197 198 #### 2.3 進入生成的項目目錄，安裝模塊包 199 cd vue-cli-demo 200 cnpm install 201 202 #### 2.4 運行 203 npm run dev //啟動測試服務 204 npm run build //將項目打包輸出dist目錄，項目上線的話要將dist目錄拷貝到服務器上 205 206 ### 3. 使用webpack模板 207 vue init webpack vue-cli-demo2 208 209 ESLint是用來統一代碼規范和風格的工具，如縮進、空格、符號等，要求比較嚴格 210 [官網](http://eslint.org) 211 212 問題Bug：如果版本升級到node 8.0 和 npm 5.0，控制台會報錯： 213 GET http://localhost:8080/__webpack_hmr net::ERR_INCOMPLETE_CHUNKED_ENCODING 214 解決方法： 215 a)降低Node版本到7.9或以下 216 b)修改build/dev-server.js文件，如下： 217 var hotMiddleware = require('webpack-hot-middleware')(compiler, { 218 log: () => {}, 219 heartbeat:2000 //添加此行 220 }) 221 參考：https://github.com/vuejs-templates/webpack/issues/731
2 3 ## 一、模塊化開發 4 5 ### 1. vue-router模塊化 6 cnpm install vue-router -S 7 8 #### 1.1 編輯main.js 9 10 #### 1.2 編輯App.vue 11 12 #### 1.3 編輯router.config.js 13 14 ### 2. axios模塊化 15 cnpm install axios -S 16 17 使用axios的兩種方式： 18 方式1：在每個組件中引入axios 19 方式2：在main.js中全局引入axios並添加到Vue原型中 20 21 ### 3. 為自定義組件添加事件 22 23 24 ## 二、 Elment UI 25 26 ### 1. 簡介 27 Element UI是餓了么團隊提供的一套基於Vue2.0的組件庫，可以快速搭建網站，提高開發效率 28 ElementUI PC端 29 MintUI 移動端 30 31 [官網](http://element.eleme.io/) 32 33 ### 2. 快速上手 34 35 #### 2.1 安裝elment ui 36 cnpm install element-ui -S 37 38 #### 2.2 在main.js中引入並使用組件 39 import ElementUI from 'element-ui' 40 import 'element-ui/lib/theme-default/index.css' //該樣式文件需要單獨引入 41 Vue.use(ElementUI); 42 這種方式引入了ElementUI中所有的組件 43 44 #### 2.3 在webpack.config.js中添加loader 45 CSS樣式和字體圖標都需要由相應的loader來加載，所以需要style-loader、css-loader 46 47 默認並沒有style-loader模塊，所以需要單獨安裝 48 cnpm install style-loader --save-dev 49 50 #### 2.4 使用組件 51 52 #### 2.5 使用less 53 安裝loader，需要兩個：less、less-loader 54 cnpm install less less-loader -D 55 在webpack.config.js中添加loader 56 57 ### 3. 按需引入組 58 59 #### 3.1 安裝babel-plugin-component 60 cnpm install babel-plugin-component -D 61 62 #### 3.2 配置.babelrc文件 63 "plugins": [["component", [ 64 { 65 "libraryName": "element-ui", 66 "styleLibraryName": "theme-default" 67 } 68 ]]] 69 70 #### 3.3 只引入需要的插件 71 72 73 ## 三、 自定義全局組件（插件） 74 75 全局組件（插件）：就是指可以在main.js中使用Vue.use()進行全局引入，然后在其他組件中就都可以使用了，如vue-router 76 import VueRouter from 'vue-router' 77 Vue.use(VueRouter); 78 79 普通組件（插件）：每次使用時都要引入，如axios 80 import axios from 'axios' 81 82 83 ## 四、 Vuex 84 85 ### 1. 簡介 86 Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。 87 簡單來說，用來集中管理數據，類似於React中的Redux，都是基於Flux的前端狀態管理框架 88 89 ### 2. 基本用法 90 91 #### 2.1 安裝vuex 92 cnpm install vuex -S 93 94 #### 2.2 創建store.js文件，在main.js中導入並配置store.選項 95 96 #### 2.3 編輯store.js文件 97 Vuex的核心是Store(倉庫)，相當於是一個容器，一個store實例中包含以下屬性的方法： 98 state 定義屬性（狀態、數據） 99 getters 用來獲取屬性 100 actions 定義方法（動作） 101 commit 提交變化，修改數據的唯一方式就是顯式的提交mutations 102 mutations 定義變化 103 注：不能直接修改數據，必須顯式提交變化，目的是為了追蹤到狀態的變化 104 105 #### 2.4 編輯App.vue 106 在子組件中訪問store對象的兩種方式： 107 方式1：通過this.$store訪問 108 方式2：通過mapState、mapGetters、mapActions訪問，vuex提供了兩個方法： 109 mapState 獲取state 110 mapGetters 獲取getters 111 mapActions 獲取actions 112 113 ### 3. 分模塊組織Vuex 114 115 |-src 116 |-store 117 |-index.js 118 |-getters.js 119 |-actions.js 120 |-mutations.js 121 |-modules //分為多個模塊，每個模塊都可以擁有自己的state、getters、actions、mutations 122 |-user.js 123 |-cart.js 124 |-goods.js 125 |....