湯小洋Vue課程代碼記錄
課程連接地址：http://edu.51cto.com/course/10543.html
抄錄至簡書僅方便自己查閱髓帽，小伙伴們可以去學院支持該課程
Vue.js 五天 湯小洋
一、 組件component
1. 什么是組件？
組件（Component）是 Vue.js 最強大的功能之一椭岩。組件可以擴展 HTML 元素辈末，封裝可重用的代碼
組件是自定義元素（對象）
2. 定義組件的方式
方式1：先創(chuàng)建組件構(gòu)造器，然后由組件構(gòu)造器創(chuàng)建組件
方式2：直接創(chuàng)建組件
3. 組件的分類
分類：全局組件栽连、局部組件
4. 引用模板
將組件內(nèi)容放到模板<template>中并引用
5. 動態(tài)組件
<component :is="">組件
多個組件使用同一個掛載點饿幅，然后動態(tài)的在它們之間切換
<keep-alive>組件
二凡辱、 組件間數(shù)據(jù)傳遞
1. 父子組件
在一個組件內(nèi)部定義另一個組件，稱為父子組件
子組件只能在父組件內(nèi)部使用
默認情況下栗恩，子組件無法訪問父組件中的數(shù)據(jù)透乾，每個組件實例的作用域是獨立的
2. 組件間數(shù)據(jù)傳遞 （通信）
2.1 子組件訪問父組件的數(shù)據(jù)
a)在調(diào)用子組件時，綁定想要獲取的父組件中的數(shù)據(jù)
b)在子組件內(nèi)部磕秤，使用props選項聲明獲取的數(shù)據(jù)乳乌，即接收來自父組件的數(shù)據(jù)
總結(jié)：父組件通過props向下傳遞數(shù)據(jù)給子組件
注：組件中的數(shù)據(jù)共有三種形式：data、props亲澡、computed
2.2 父組件訪問子組件的數(shù)據(jù)
a)在子組件中使用vm.$emit(事件名,數(shù)據(jù))觸發(fā)一個自定義事件钦扭，事件名自定義
b)父組件在使用子組件的地方監(jiān)聽子組件觸發(fā)的事件，并在父組件中定義方法床绪，用來獲取數(shù)據(jù)
總結(jié)：子組件通過events給父組件發(fā)送消息客情，實際上就是子組件把自己的數(shù)據(jù)發(fā)送到父組件
3. 單向數(shù)據(jù)流
props是單向綁定的其弊，當父組件的屬性變化時，將傳導給子組件膀斋，但是不會反過來
而且不允許子組件直接修改父組件中的數(shù)據(jù)梭伐，報錯
解決方式：
方式1：如果子組件想把它作為局部數(shù)據(jù)來使用，可以將數(shù)據(jù)存入另一個變量中再操作仰担，不影響父組件中的數(shù)據(jù)
方式2：如果子組件想修改數(shù)據(jù)并且同步更新到父組件糊识，兩個方法：
a.使用.sync（1.0版本中支持，2.0版本中不支持摔蓝，2.3版本又開始支持）
需要顯式地觸發(fā)一個更新事件
b.可以將父組件中的數(shù)據(jù)包裝成對象赂苗，然后在子組件中修改對象的屬性(因為對象是引用類型，指向同一個內(nèi)存空間)贮尉，推薦
4. 非父子組件間的通信
非父子組件間的通信拌滋，可以通過一個空的Vue實例作為中央事件總線（事件中心），用它來觸發(fā)事件和監(jiān)聽事件
var Event=new Vue();
Event.$emit(事件名,數(shù)據(jù));
Event.$on(事件名,data => {});
三猜谚、 slot內(nèi)容分發(fā)
本意：位置败砂、槽
作用：用來獲取組件中的原內(nèi)容，類似angular中的transclude指令
四魏铅、 vue-router路由
1. 簡介
使用Vue.js開發(fā)SPA（Single Page Application）單頁面應用
根據(jù)不同url地址昌犹，顯示不同的內(nèi)容，但顯示在同一個頁面中览芳，稱為單頁面應用
bower info vue-router
cnpm install vue-router -S
2. 基本用法
a.布局
b.配置路由
3. 路由嵌套和參數(shù)傳遞
傳參的兩種形式：
a.查詢字符串：login?name=tom&pwd=123
{{$route.query}}
b.rest風格url：regist/alice/456
{{$route.params}}
4. 路由實例的方法
router.push() 添加路由斜姥，功能上與<route-link>相同
router.replace() 替換路由，不產(chǎn)生歷史記錄
5. 路由結(jié)合動畫
五沧竟、 單文件組件
1. .vue文件
.vue文件疾渴，稱為單文件組件，是Vue.js自定義的一種文件格式屯仗，一個.vue文件就是一個單獨的組件，在文件內(nèi)封裝了組件相關(guān)的代碼：html搔谴、css魁袜、js
.vue文件由三部分組成：<template>、<style>敦第、<script>
<template>
html
</template>
<style>
css
</style>
<script>
js
</script>
2. vue-loader
瀏覽器本身并不認為.vue文件峰弹，所以必須對.vue文件進行加載解析，此時需要vue-loader
類似的loader還有許多芜果，如：html-loader鞠呈、css-loader、style-loader右钾、babel-loader等
需要注意的是vue-loader是基于webpack的
3. webpack
webpack是一個前端資源模板化加載器和打包工具蚁吝，它能夠把各種資源都作為模塊來使用和處理
實際上旱爆，webpack是通過不同的loader將這些資源加載后打包，然后輸出打包后文件
簡單來說窘茁，webpack就是一個模塊加載器怀伦，所有資源都可以作為模塊來加載，最后打包輸出
[官網(wǎng)](http://webpack.github.io/)
webpack版本：v1.x v2.x
webpack有一個核心配置文件：webpack.config.js山林，必須放在項目根目錄下
4. 示例房待，步驟：
4.1 創(chuàng)建項目，目錄結(jié)構(gòu) 如下：
webpack-demo
|-index.html
|-main.js 入口文件
|-App.vue vue文件
|-package.json 工程文件
|-webpack.config.js webpack配置文件
|-.babelrc Babel配置文件
4.2 編寫App.vue
4.3 安裝相關(guān)模板
cnpm install vue -S
cnpm install webpack -D
cnpm install webpack-dev-server -D
cnpm install vue-loader -D
cnpm install vue-html-loader -D
cnpm install css-loader -D
cnpm install vue-style-loader -D
cnpm install file-loader -D
cnpm install babel-loader -D
cnpm install babel-core -D
cnpm install babel-preset-env -D //根據(jù)配置的運行環(huán)境自動啟用需要的babel插件
cnpm install vue-template-compiler -D //預編譯模板
合并：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
4.4 編寫main.js
4.5 編寫webpack.config.js
4.6 編寫.babelrc
4.7 編寫package.json
4.8 運行測試
npm run dev
六驼抹、 vue-cli腳手架
1. 簡介
vue-cli是一個vue腳手架桑孩，可以快速構(gòu)造項目結(jié)構(gòu)
vue-cli本身集成了多種項目模板：
simple 很少簡單
webpack 包含ESLint代碼規(guī)范檢查和unit單元測試等
webpack-simple 沒有代碼規(guī)范檢查和單元測試
browserify 使用的也比較多
browserify-simple
2. 示例，步驟：
2.1 安裝vue-cli框冀，配置vue命令環(huán)境
cnpm install vue-cli -g
vue --version
vue list
2.2 初始化項目流椒，生成項目模板
語法：vue init 模板名 項目名
2.3 進入生成的項目目錄，安裝模塊包
cd vue-cli-demo
cnpm install
2.4 運行
npm run dev //啟動測試服務(wù)
npm run build //將項目打包輸出dist目錄左驾，項目上線的話要將dist目錄拷貝到服務(wù)器上
3. 使用webpack模板
vue init webpack vue-cli-demo2
ESLint是用來統(tǒng)一代碼規(guī)范和風格的工具镣隶，如縮進、空格诡右、符號等安岂，要求比較嚴格
問題Bug：如果版本升級到node 8.0 和 npm 5.0，控制臺會報錯：
GET http://localhost:8080/__webpack_hmr net::ERR_INCOMPLETE_CHUNKED_ENCODING
解決方法：
a)降低Node版本到7.9或以下
b)修改build/dev-server.js文件帆吻，如下：
var hotMiddleware = require('webpack-hot-middleware')(compiler, {
log: () => {},
heartbeat:2000 //添加此行
})
參考：https://github.com/vuejs-templates/webpack/issues/731
