vue手冊：
必備基礎：html5，es6，git。
vue起始就是個文件庫，node-modules，他的運行底層還是藉助es5+。
ES2015:
ES2015 標準提供了許多新的語法和編程特性以提高 JavaScript 的開發效率和體驗
2.1.語法糖
語法糖(Syntactic sugar)，也譯爲糖衣語法，是由英國計算機科學家彼得·約翰·蘭達(Peter J. Landin)發明的一個術語，指計算機語言中添加的某種語法，這種語法對語言的功能並沒有影響，但是更方便程序員使用。通常來說使用語法糖能夠增加程序的可讀性，從而減少程序代碼出錯的機會
2.2.工程優勢
JavaScript 的模塊化構建：
從許多年前開始，各大公司、團隊、大牛都相繼給出了他們對於這個問題的不同解決方案，以至於定下了如 CommonJS、AMD、CMD 或是 UMD 等 JavaScript 模塊化標準，RequireJS、SeaJS、FIS、Browserify、webpack 等模塊加載庫都以各自不同的優勢佔領著一方土地
解讀實例：
//import引入文件。‘fs’，‘readline’，‘path’文件格式，但是裏面一般都export語法。fs,readline,path就是申明文件export對象的實例變量
import fs from 'fs'
import readline from 'readline'
import path from 'path'
let Module = {
//noop代表函數名稱
readLineInFile(filename, callback = noop, complete = noop) {
//readline裏面有createInterface方法，他的參數是一個對象input: fs.createReadStream(path.resolve(__dirname, './big_file.txt')
let rl = readline.createInterface({
input: fs.createReadStream(path.resolve(__dirname, './big_file.txt'))
})
rl.on('line', line => {
//... do something with the current line
callback(line)
})
rl.on('close', complete)
return rl
}
}
function noop() { return false }
export default Module
可惜的是，目前暫時還沒有任何瀏覽器廠商或是 JavaScript 引擎支持這種模塊化語法。所以我們需要用 babel 進行轉換爲 CommonJS、AMD 或是 UMD 等模塊化標準的語法。
3.ES2015新語法詳解
3.1. let、const和塊級作用域
const定義常量的
var i 一直存在整個上下文。
<script>
<button>一</button>
<button>二</button>
<button>三</button>
<button>四</button>
<div id="output"></div>
<script>
var buttons = document.querySelectorAll('button')
var output = document.querySelector('#output')
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', function() {
output.innerText = buttons[i].innerText
})
}
</script>
執行完了，真個頁面對於i是4，四個按鈕因爲上下文變化的var i，所以他們都是4，所以會報錯Uncaught TypeError: Cannot read property 'innerText' of undefined
解決方案：用let。
let 語句會使該變量處於一個塊級作用域中；
塊級作用域
3.2. 箭頭函數（Arrow Function）
使用方法
let names = [ 'Will', 'Jack', 'Peter', 'Steve', 'John', 'Hugo', 'Mike' ]
let newSet = names
.map((name, index) => {
return {
id: index,
name: name
}
})
.filter(man => man.id % 2 == 0)
.map(man => [man.name])
.reduce((a, b) => a.concat(b))
console.log(newSet) //=> [ 'Will', 'Peter', 'John', 'Mike' ]
箭頭函數與上下文綁定：
對函數內部的上下文 （this）綁定爲定義函數所在的作用域的上下文
let obj = {
hello: 'world',
foo() {
let bar = () => {
return this.hello
}
return bar
}
}
window.hello = 'ES6'
window.bar = obj.foo()
window.bar() //=> 'world'
注意事項
3.3. 模板字符串
支持變量注入
let name = 'Will Wen Gunn'
let title = 'Founder'
let company = 'LikMoon Creation'
let greet = `Hi, I'm ${name}, I am the ${title} at ${company}`
支持換行
let sql = `
SELECT * FROM Users
WHERE FirstName='Mike'
LIMIT 5;
`
3.4. 對象字面量擴展語法
方法屬性省略function
let obj = {
// before
foo: function() {
return 'foo'
},
// after
bar() {
return 'bar'
}
}
支持注入_proto_
a：
class Foo {
constructor() {
this.pingMsg = 'pong'
}
ping() {
console.log(this.pingMsg)
}
}
let o = {
__proto__: new Foo()
}
o.ping() //=> pong
b：
let o = {
__proto__: new Foo(),
constructor() {
this.pingMsg = 'alive'
},
msg: 'bang',
yell() {
console.log(this.msg)
}
}
o.yell() //=> bang
o.ping() //=> alive
同名方法屬性省略語法
// module.js
export default {
someMethod
}
function someMethod() {
// ...
}
// app.js
import Module from './module'
Module.someMethod()
可以動態計算的屬性名稱：
let arr = [1, 2, 3]
let outArr = arr.map(n => {
return {
[ n ]: n,
[ `${n}^2` ]: Math.pow(n, 2)
}
})
console.dir(outArr) //=>
[
{ '1': 1, '1^2': 1 },
{ '2': 2, '2^2': 4 },
{ '3': 3, '3^2': 9 }
]
3.5. 表達式解構
3.6. 函數參數表達、傳參
默認參數值
後續傳參
注意事項
解構傳參
注意事項
3.7. 新的數據結構
Set和WeakSet
Map和WeakMap
3.8. 類(Classes)
語法
定義
繼承
靜態方法
遺憾與期望
3.9. 生成器（Generator）
來龍
基本概念
Generator Function
Generator
基本使用方法
3.10. promise
概念
基本用法
弊端
3.11. 原生的模塊化
歷史小回顧
基本用法
全局引入
局部引入
接口暴露
降級兼容
3.12. Symbol
黑科技
3.13.Proxy(代理）
1. 構建界面
2. 結構定義
3. 架構設計
模塊化
數據支持
界面渲染
4.構建應用
入口文件
數據層:文章
路由:首頁
準備頁面渲染
加載數據
設計組件
路由:文章頁面
路由:發佈新文章
5.路由綁定
6.合併代碼
1.架構設計
2.構建應用
入口文件
數據抽象層
Posts控制器
API獲取所有文章，獲取指定文章，發佈新文章。
Comments
API獲取指定文章的評論，發表新評論
配置路由
3.配置任務文件
4.部署到DaoCloud
Dockerfile
創建DaoCloud上的MongoDB的服務
代碼創建
1.async/await
2.Decorators
簡單實例
黑科技
ES6重點：
import，export，=>,module等。
es6特點：
定義函數：
var human={
breath(name){
console.log(name+"is breathing...");
}
}
vue.js 1.0解讀：
安裝：
安裝vue庫；默認在C:\Users\Administrator\AppData\Roaming\npm\node_modules可以看到npm安裝的全局庫
vue install -g vue --registry=https://registry.npm.taobao.org;
安裝vue命令行庫：
vue install -g vue-cli;
查看版本：
vue -V；
理解
組件即對象：
對象的固定屬性都是要美元符引用的。每個屬性也可以看作是一個對象