vue知識點總結

  1 ### Vue.js 五天

  1 ### Vue.js 五天 
  2 
  3 ## 1、 組件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 ## 2、 組件間數據傳遞
 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 ## 3、 slot內容分發
 65     本意：位置、槽
 66     做用：用來獲取組件中的原內容，相似angular中的transclude指令
 67 
 68 
 69 ## 4、 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 ## 5、 單文件組件
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 ## 6、 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 ## 1、模塊化開發
  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 ## 2、 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 ## 3、 自定義全局組件（插件）
 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 ## 4、 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                 |....