blossom html css JavaScript

程序員入門的時候整理的一份學習筆記,見證了我的成長
備份

標簽：前端學習

HTML

視頻音頻標簽

帶控制器的視頻標簽, 不同瀏覽器有不同的文件格式要求
所以用 2 個 source 標簽指定不同的視頻格式

<video width="300" height="200" controls="controls">
    <source src="movie.mp4">
    <source src="movie.ogv">
</video>

帶控制器的音頻標簽, 不同瀏覽器有不同的文件格式要求
所以用 2 個 source 標簽指定不同的音頻格式

<audio id='id-audio-player' controls="controls">
  <source src="audio.ogg">
  <source src="audio.mp3">
</audio >

audio 基本操作如下

var a = document.querySelector('#id-audio-player')
a.play()                //播放
a.pause()               //暫停
a.autoplay              //自動播放 (設(shè)為true) 
a.src                   //鏈接音頻文件
a.volume                //音量（0-1之間的數(shù)）
a.duration              //音頻時間長度
a.currentTime = 1       //現(xiàn)在播放第幾s（設(shè)置）
a.playbackRate          // 播放速率, 默認是 1

移動端設(shè)置

設(shè)置 viewport
viewport 是 html 的父元素
在手機上需要用下面的語句設(shè)置它的尺寸

網(wǎng)易移動端模板

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<script>
//設(shè)置rem
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5(iPhone6相對寬度) + 'px';

//通過設(shè)計圖寬度 / 100 來得出相對寬度 rem
//比如iphone5 設(shè)計圖寬度640 相對寬度 6.4
</script>

媒體查詢-響應(yīng)式開發(fā)

響應(yīng)式設(shè)計就是一套 CSS 根據(jù)當前的分辨率選擇不同的樣式
媒體查詢主要用來:

• 檢測媒體的類型, 比如 screen, tv等
• 檢測布局視口的特性, 比如視口的寬高分辨率等

<style>
@media all and (min-width: 200px) and (max-width: 300px){
    body {
        background: red;
    }
}

//網(wǎng)易移動端字體設(shè)置
@media screen and (max-width: 321px) {
    body {
        font-size:16px
    }
}

@media screen and (min-width: 321px) and (max-width:400px) {
    body {
        font-size:17px
    }
}

@media screen and (min-width: 400px) {
    body {
        font-size:19px
    }
}
</style>

上面代碼中, all 是媒體類型, 代表任何設(shè)備
and 是邏輯操作
意思是, 對于任何設(shè)備, 在寬度在 200-300 的范圍內(nèi)應(yīng)用這個樣式

CSS

選擇器

舉例：< h1 id="id-h1" class="class-h1"> 琉璃 < /h1 >
一切標簽都可被選擇包括html, style等

常用

body {
    background: lightblue;          /* 背景色   */
    margin:0px;                     /* 外邊距   */
    border:0px;                     /* 邊框     */
    border-style: solid;            /* 邊框樣式 */
    padding:0px;                    /* 內(nèi)邊距   */
    font-family: Microsoft YaHei;   /* 字體     */
    font-size: 22px;                /* 字體大小 */
    text-align: center;             /* 對齊     */
}
.tanChuang {
    z-index: 100;                   /* 頂層     */
    position: fixed;                /* 定位     */
    top: 0px;                       /* 頂部     */
    left: 0px;                      /* 左部     */
    width: 100%;
    height: 100%;
    opacity: 0.96;                  /* 透明度   */
    background: black;
    color: white;
}
.tanCenter {
    position:relative;
    top: 50%;
    transform: translateY(-61.8%);  /* Y軸距離  */
}
.circle {
    width:  50px;
    height: 50px;
    border-radius: 50%;             /* 圓角     */
}

background 相關(guān)屬性和縮寫
    background-color: #233;
    background-image: url(bg.png);
    background-repeat: no-repeat;
    background-attachment: fixed; 背景圖片隨滾動軸移動方式 
    background: #233 url(bg.png) no-repeat;

三種縮寫, 分別對應(yīng)有 4 2 3 個值的時候的解釋, padding 同理
margin: top  right  bottom  left
margin: (top/bottom)  (right/left)
margin: top  (right/left)  bottom

overflow屬性
    visible 默認
    auto 需要的時候加滾動條
    hidden 隱藏多余元素
    scroll 就算用不著也會強制加滾動條

內(nèi)聯(lián)元素 居中 text-align: center
區(qū)塊元素 居中 margin: 0px auto;

偽類

a:link   { color: white; text-decoration: none; } /*去下劃線*/
a:visited{ color: black; }
a:hover  { color: red; cursor: pointer; } /*鼠標樣式*/
a:active { color: lightblue; }

a.class:visited {color: white;}    /* 獨立偽類 */

定位 position

非 static 元素可以用 top left bottom right 屬性來設(shè)置坐標
非 static 元素可以用 z-index 屬性來設(shè)置顯示層次
e.pageX——相對整個頁面的坐標
e.clientX——相對可視區(qū)域的坐標
e.offsetX——相對當前坐標系的border左上角開始的坐標

布局 flex

顯示 display

盒模型

動畫

JavaScript

Array 數(shù)組

Str 字符串

Object 字典

dict = { '初中生':6, '高中生':7, '大學生':8 }
|屬性|說明
|:-|:-|
| dict = { key : 'value', }|創(chuàng)建
|dict.(key) |點語法讀取|
|dict ['小學生'] = 4| 添加
|dict ['小學生'] = 5| 修改
|delete dict ['大學生']| 刪除
|Object.keys( dict )| 返回 keys

類

var Student = function(name, height) {
    // 用 this.變量名 來創(chuàng)造一個只有類的實例才能訪問的變量
    this.name = name
    this.height = height
}
// 用 new 函數(shù)名(參數(shù)) 初始化一個類的實例
var s1 = new Student('gua', 169)
// 可以改變 s1 的屬性
s1.name = 'xiaogua'
s1.height = 1.69
// 可以創(chuàng)建多個互相獨立的實例
var s2 = new Student()
var s3 = new Student()
//可以給類增加一些方法(函數(shù))
Student.prototype.greeting = function() {
    console.log(`hello, I'm ${this.name}`)
}
// 可以調(diào)用實例的方法
s1.greeting()

ES6類的表示方法
class Student {
    // 初始化的套路
    constructor(name, height) {
        this.name = name
        this.height = height
    }

    // 方法沒有 var
    greeting() {
        console.log(`hello, I'm ${this.name}`)
    }

    update(name, age) {
        this.name = name
        this.age = age
    }
}
class Teacher extends Student {
//繼承類的用法
}

this

apply call bind  //是用來給函數(shù)指定 this 用的


apply 接受兩個參數(shù)
第一個參數(shù)是函數(shù)里面的 this
第二個參數(shù)是要傳給函數(shù)的參數(shù)列表, 類型是 數(shù)組(暫定), apply 會把數(shù)組拆成一個個的參數(shù)傳給函數(shù)

console.log.apply(console, arguments) //直接用

call 和 apply 類似, 但是小有區(qū)別, 如下
第一個參數(shù)和 apply 一樣
第 2, 3, 4, 5, ... 個參數(shù)會依次作為參數(shù)傳給函數(shù)

console.log.call(console, 1, 2, 3, 4, 5, 6, 7) //直接用

bind 函數(shù)/*不直接調(diào)用*/, 而是返回一個函數(shù)讓你來調(diào)用
第一個參數(shù)是用來指定函數(shù)里面的 this, 和 apply call 一樣
var log = console.log.bind(console)  //不直接用
log()    //才可調(diào)用

ES6

Json 格式

var x = JSON.stringify( [1,2,3] ) //編譯

var y = JSON.parse( x )           //讀取

Promise 處理回調(diào)的方法

// 將 fs.readFile 的操作封裝成 promise外遇，這樣就可以使用 promise 的 api 了
const readFile = function(filename) {
    // 一般前端的寫法 
    // return new Promise(function(resolve, reject) {})
    const p = new Promise(function(resolve, reject) {
        const fs = require('fs')
        const options = {
            encoding: 'utf8'
        }
        fs.readFile(filename, options, function(error, content) {
            if (error !== null) {
                reject(error)
            } else {
                resolve(content)
            }
        })
    })

    return p
}
// 使用 promise 讀取文件就不用寫成回調(diào)的形式了
// 直接按照同步的寫法就好了
// 可以無限 then, 只要你保證上一個 then 返回了東西即可
let promise = readFile('foo.txt')
promise.then(function(content) {
    console.log('debug file content', content)
    const c = content + ' suffix1'
    return c
}, function(error) {
    console.log('debug error message', error)
}).then(function(c1) {
    console.log('second then', c1)
    const c = c1 + ' suffix2'
    return c
}).then(function(c) {
    console.log('third then', c)
})
console.log('GUA ****** line 46')

// 上面的寫法也可以寫成下面這樣
// 把 reject 的操作放在 catch 里面
promise.then(function(content) {
    console.log('debug file content', content)
}).catch(function(error) {
    console.log('debug error message', error)
})
// 有時候會碰到批量執(zhí)行異步操作注簿，如果直接用循環(huán) + 調(diào)用函數(shù)的形式會比較麻煩
// 使用 Promise.all 就很方便了
// all 方法是直接掛在 Promise 類上的跳仿，而 then catch 這些方法是掛在原型上
// Promise.all 會把數(shù)組里面所有的 promise 對象都執(zhí)行完
// 再往下調(diào)用
Promise.all(list).then(function(content) {
    console.log('Promise.all, content', content)
})

重命名文件的方法

var file = app.$('videoInput').files[0]; 
// 重命名
var aafile = new File([file], "aa.mp4");

BOM API

history.length      // 歷史列表中的 url 數(shù)量
history.back()      // 相當于點擊后退按鈕
history.forward()   // 相當于點前進
history.go(-2)      // 相當于點擊兩次后退按鈕
//H5新函數(shù)
var state = {
    page: "settings"
}                        
history.pushState(state, "settings", "/settings")

/*三個參數(shù)分別是
    1.自定義對象
    2.新頁面的標題, 但是現(xiàn)在還沒有瀏覽器實現(xiàn)這個功能
    3.新頁面的地址(/...)
  
用戶點擊 前進 后退 按鈕的時候, 會觸發(fā) window 的 popstate事件
于是可以在這里操作*/

window.addEventListener("popstate", function(event) {
    var state = event.state;
    // state 就是 pushState 的第一個參數(shù) 被儲存
    console.log('pop state', state)
})

/*還有一個 replaceState 函數(shù), 它的作用和 pushState 一樣,   只是不生成一條歷史紀錄
只能在相同域名下使用*/

DOM API

• DOM 是 HTML 文件
• DOM API 是瀏覽器提供給 JavaScript 操作 html 頁面的交互方式

常用

<input id="id" type="text" value="Gua">

本地存儲

貯藏：localStorage[ 'name' ] = '饅頭'
取出：localStorage[ 'name' ]
電腦本地儲存 5MB Object,只能存字符串，可使用 Json 轉(zhuǎn)字符串
localStorage 沒有過期時間, 要用 clear remove 主動刪除數(shù)據(jù)

貯藏：sessionStorage[ 'name' ] = '饅頭'
取出：sessionStorage[ 'name' ]
sessionStorage 的數(shù)據(jù)在用戶關(guān)閉瀏覽器后將被刪除

事件

事件綁定：
區(qū)分元素 > 綁定元素 > 觸發(fā)Event > 操作元素

Ajax

• 阿賈克斯中 event 事件本身菲语，包含觸發(fā)事件所有內(nèi)容

GET

var ajaxGet = function( ku ) {
    var r = new XMLHttpRequest()        // 創(chuàng)建 AJAX 對象
    r.open( 'GET', ku.url, true )       // 設(shè)置 請求方法 地址
    r.onreadystatechange = function() {
        if (r.readyState === 4) {       // 如果 完成
            ku.callback(r.response)     // 注冊 響應(yīng)函數(shù) 結(jié)果
        }
    }
    r.send()                            // 發(fā)送 請求
}
// readyState有4種狀態(tài)  0. 未初始化 1.載入  2.載入完成  3.交互  4.交互完成
var ku = {
    url: '/login' ,                     // 地址
    callback: function(response) {      // 響應(yīng)函數(shù)
        console.log(response)
    }
}
ajaxGet( ku )

POST

var ajax = function( ku ) {
    var r = new XMLHttpRequest( )      // 創(chuàng)建 AJAX 對象
    r.open( ku.method, ku.url, true )  // 設(shè)置 請求方法 地址
    r.setRequestHeader('Content-Type', ku.ContentType)
    r.onreadystatechange = function() {
        if (r.readyState === 4) {      // 完成
            ku.callback(r.response)    // 注冊 響應(yīng)函數(shù) 結(jié)果
        }
    }
    r.send( ku.data )                  // 發(fā)送 請求
}
var ku = {
    method:         'POST',            // 請求方法
    url:            '/login',          // 地址
    ContentType:    'application/json',// 數(shù)據(jù)格式
    data: JSON.stringify({             // 發(fā)送內(nèi)容
        username:   'abc',
        password:   '123',
    }),
    callback: function(response) {     // 響應(yīng)函數(shù)
        console.log('result:', response )
    }
}
ajax( ku )

http協(xié)議

請求和返回是一樣的數(shù)據(jù)格式妄辩，分為4部分：
1，請求行或者響應(yīng)行
2山上，HTTP Header（請求的 Header 中 Host 字段是必須的眼耀，其他都是可選）
3，\r\n\r\n（連續(xù)兩個換行回車符佩憾，用來分隔Header和Body）
4哮伟，HTTP Body（可選）

請求的格式，注意大小寫（這是一個不包含Body的請求）：
原始數(shù)據(jù)如下
'GET / HTTP/1.1\r\nhost:g.cn\r\n\r\n'
打印出來如下
GET / HTTP/1.1
Host: g.cn
r\n(空一行)

jQuery

常用

$('ul.lang li'); // 選出JavaScript妄帘、Python和Lua 3個節(jié)點
$('ul.lang li:first-child'); // 僅選出JavaScript
$('ul.lang li:last-child'); // 僅選出Lua
$('ul.lang li:nth-child(2)'); // 選出第N個元素楞黄，N從1開始
$('ul.lang li:nth-child(even)'); // 選出序號為偶數(shù)的元素
$('ul.lang li:nth-child(odd)'); // 選出序號為奇數(shù)的元素

jQuery對象DOM操作

jQuery對象css操作

//jQuery對象有“批量操作”的特點可調(diào)用css對象方便修改對象的CSS
$('#test').css('background-color', 'black').css('color', 'red');
var div = $('#test-div');
div.css('color'); // '#000033', 獲取CSS屬性
div.css('color', '#336699'); // 設(shè)置CSS屬性
div.css('color', ''); // 清除CSS屬性
//css()方法將作用于DOM節(jié)點的style屬性，具有最高優(yōu)先級

jQ 動畫

jQ 事件綁定

function hello() {
    alert('hello!');
}

a.click(hello); // 綁定事件

// 10秒鐘后解除綁定:
setTimeout(function () {
    a.off('click', hello);
}, 10000);
使用off('click')一次性移除已綁定的click事件的所有處理函數(shù)
無參數(shù)調(diào)用off()一次性移除已綁定的所有類型的事件處理函數(shù)

a.on('click', function () {
    alert('Hello!');
})
// 兩者等價(常用下一種)
a.click(function () {
    alert('Hello!');
})
//事件委托用法
$( '#id-div-cont' ).on( 'click', '.del', Event )
// 綁定 父元素 #id-div-cont 監(jiān)聽.del(如果點擊的是.del則發(fā)生)

jQ 函數(shù)

each 遍歷

var eve = function(i, eve) {
    console.log(i, eve)
}
$('.notePad_one').each( eve )

map 遍歷 返回值

var a = [1, 2, 3, 4, 5]
var eve = function( i ) {
    return i * i
}
var b = $.map( a, eve )
// 結(jié)果 b = [1, 4, 9, 16, 25]
//map與each最大區(qū)別是返回值

filter 過濾器

var a = [1, 2, 3, 4, 5]
var eve = function( i ) {
    return i % 2 == 1
}
var b = $.grep( a, eve )
// 結(jié)果 b = [1, 3, 5]

jQ Ajax

var request = {
    url: '/uploads/tags.json',
    type: 'get',
    success: function(r) {
        console.log(r)
    },
    error: function() {
        console.log(arguments)
    }
}
$.ajax(request)

//基礎(chǔ)的jq ajax方法
$.ajax({name:value, name:value, ... })

// jq get方法
$.get("test.php", function(data){
console.log(data);
})
//jq post 方法
$.post(URL,{name:'小明'},function(data,status,xhr),dataType)

Bootstrap

Bootstrap設(shè)置響應(yīng)式的CSS布局

<!--配置bootstrap需要加入以下設(shè)置-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src=' jQuery'>` bootstrap 必須引用 jq</script>

布局col

col-(xs,sm,md,lg)每一個div可以加入多個col-?類 叫做混合布局,會根據(jù)屏幕自適應(yīng)布局.
每一橫行都是新的12格,如果父元素8格,子元素還是新的12格

導(dǎo)航欄navbar

對話框modal

旋轉(zhuǎn)木馬carousel

lodash

lodash 是一個非常實用的 js 工具庫 _是表達符號

lodash 函數(shù)

each

_.each(list(數(shù)組或?qū)ο?, (v, k) => {
        // each 方法的兩個參數(shù)
        // 如果 list 是 列表抡驼，那么 v 和 k 分別是指 list 的 element/index
        // 如果 list 是 對象（字典）鬼廓，那么 v 和 k 分別是指 object 的 value/key
        console.log('element and index', v, k)
    })

map (舊數(shù)組/對象生成一個新數(shù)組)

    const list2(新數(shù)組) = _.map(list1(舊數(shù)組), (v, k) => {
        const r = v * v
        return r
    })
    console.log('list2', list2)

filter (遍歷數(shù)組/對象，返回符合判斷函數(shù)中的元素)

var u(符合條件的新數(shù)組) =
_.filter(us(數(shù)組可包含對象), (e) => {
        var b = e.score > 70(bool值)
        return b
    })
    console.log('filter u', u)

orderBy (按照條件排序,先按score升序,如果有score一樣的,再按 name降序)

    var users = _.orderBy(us, ['score', 'name'], ['asc'(升序), 'desc'(降序)])
    console.log('order by users', users)   

flatten (減少一層嵌套數(shù)組(只減少一層),也就是可以將二維數(shù)組拍成一維數(shù)組)

    var l = [
        1,
        [2],
        [3, [4]],
        [5, [6], [7]],
    ]
    var f = _.flatten(l)
    console.log('flatten result', f)

compact 剔除數(shù)組中的假值元素(js 中假值元素分別為false null 0 NaN '' undefined)

    var result = _.compact(l(包含假值元素的數(shù)組))
    console.log('compact result', result)
**isEqual**  isEqual比較兩個對象或者數(shù)組是否相等
    var o1 = {
        'key': 1,
    }
    var o2 = {
        'key': 1,
    }
    var result = _.isEqual(o1, o2)
    console.log('isEqual result', result)

result (獲取嵌套對象的值)

    var o = {
        'k1': {
            'k2': {
                'k3': {
                    'k4': 'value in nested dict'
                }
            }
        }
    }

    var path = 'k1.k2.k3.k4'
    var result = _.result(o, path)
    console.log('result nested result', result)

cloneDeep 深拷貝(改變賦值不影響原函數(shù)的拷貝)

        var o = {
        'a': [1],
        'b': [2],
        }
    var deep = _.cloneDeep(o)
    console.log('deep', deep)

random (返回給定范圍的隨機值)

    var a = 10      var b = 20
    // 返回 a 和 b 之間的一個整數(shù)
    var r1 = _.random(a, b)
    console.log('random r1', r1)
//如果指定第三個參數(shù)為 true致盟，這個參數(shù)的意思是指 floating ,那么返回的就是一個浮點數(shù)
    var r2 = _.random(a, b, true)
    console.log('random r2', r2(浮點數(shù)))

shuffle (返回打亂順序后的數(shù)組)

    var l = [1, 2, 3, 4,]
    const s = _.shuffle(l)
    console.log('shuffle l', s)

vue.js

注意事項
1.確保在初始化根實例之前注冊了組件

2. 內(nèi)部使用vue屬性需要使用this
   3.要在內(nèi)聯(lián)語句處理器中訪問原生 DOM 事件碎税∮任浚可以用特殊變量 $event 把它傳入方法
   4.在數(shù)據(jù)變化之后立即使用 Vue.nextTick(callback) == this.$nextTick(callback)

this.$on('事件名字',function(r){console.log(r)})
//監(jiān)聽自定義事件 第一個事件名字 第二個參數(shù)觸發(fā)函數(shù)
this.$emit('事件名字','輸入值')
//觸發(fā)自定義事件 第一個參數(shù)名字 第二個參數(shù)函數(shù)參數(shù)

常用vue指令

html代碼事例

<div id='app'>  
    <div v-if(show)='welcome' v-bind:title='title' v-once>
    <!--1.顯示隱藏元素(if是添加show是改變display) 2.v-bind(可省略)綁定title屬性為'title' 3.message值不隨著改變-->           
    {{ loggedIN? message : '請先登錄 '}}  
    <!--loggedIN值為true hello  false  請先登錄 -->
    </div>
    <div v-else>     //v-else-if也可以使用
    Now you don't
    </div>
     <!--if為false時顯示 -->
    <div v-text='message'></div>  <!--message純文本顯示 -->
    <div v-html='message'></div>   <!--渲染顯示 -->
    
    <!--觸發(fā)的事件調(diào)用 event.preventDefault()-->
    <form v-on:submit.prevent="onSubmit"></form>
    <form v-on:submit.prevent></form>
    <!-- 點擊事件將只會觸發(fā)一次 -->
    <a v-on:click.once="doThis"></a>
    <!-- 阻止單擊事件冒泡,可以串聯(lián)按照順序執(zhí)行 -->
    <a v-on:click.stop.once="doThis"></a>
    <!-- 只當事件在該元素本身（比如不是子元素）觸發(fā)時觸發(fā)回調(diào) -->
    <div v-on:click.self="doThat">...</div>
    
    <!-- 在 "change" 而不是 "input" 事件中更新 -->
    <input v-model.lazy="msg" >
    <!-- 自動轉(zhuǎn)換輸入的字符為數(shù)字 -->
    <input v-model.number="age" type="number">
    <!-- 自動過濾用戶輸入的首尾空格 -->
    <input v-model.trim="msg">

    
    <input v-model='message'> 
<!--input框中默認為message  修改此值即修改data里message值 -->
    <ol>
        <li v-for='comment in comments  //(value, key, index) in object)'>
            {{ comment.content }}
        </li>
<!--循環(huán)comments數(shù)組創(chuàng)建li  可通過app.comments.push({content:'lalala'})添加新的li元素-->
    </ol>
    <!--組件化演示 -->
    <comment v-for='comment in comments' v-bind:comment='comment'></comment>  <!--效果同上li -->
<div>

js代碼事例

//定義全局組件化
Vue.component('comment', {        //聲明組件名字
    template: '<li> {{ comment.content }} </li>', //組件模板
    // '<slot> :) </slot>'   內(nèi)容分發(fā)
    //包含slot標簽的div沒有內(nèi)容時顯示:) 有內(nèi)容時隱藏
    props: ['comment'],             //組件傳入的對象
    /* prosp: {
        comment: {
            type:String,    
            default: 'button',   默認值
            required: true,      必須有值
            validator (value) {
                return value.length > 3      值長度大于 3
            }      prosp的另一種對象形式
        }        可以過濾傳入對象的屬性
    }*/
    methods: {
        logMessage() {
        console.log(this.message)
        }    //組件化中也可以直接定義data與methods
    }
})

var vm = new Vue({
    el: '#app', //選擇應(yīng)用vue的選擇器,等效于vm.$mout('#app')
    methods: {
        logMessage() {
        console.log(this.message)
        }
    },
    data: {
        message: 'hello',
        title: 'hello',     //鼠標放上去顯示
        welcome: true, //true顯示這個元素 false隱藏
        loggedin: false,
        comments: [
            {content: 'yayaya1'},
            {content: 'yayaya2'},
            {content: 'yayaya3'},
        ]
    },
    created: function () {
    // 實例被創(chuàng)建之后調(diào)用
    console.log('hello word~')
  }
})
 

vue-router.js

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 組件來導(dǎo)航. -->
    <!-- 通過傳入 `to` 屬性指定鏈接. -->
    <!-- <router-link> 默認會被渲染成一個 `<a>` 標簽 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
    <!-- 渲染模板里面根據(jù)路由再次嵌套渲染-->
    <router-link to="/user/foo/profile">/user/foo/profile</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的組件將渲染在這里 -->
  <router-view></router-view>
</div>

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const User = {  //動態(tài)參數(shù)值會被設(shè)置到 this.$route.params
  template: '<div>User {{ $route.params.id }}</div>'
}
const User = {
  template: `
    <div class="user">
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>
  `
}
const router = new VueRouter({
  routes: [
     { path: '/foo', component: Foo },
     { path: '/bar', component: Bar },
     // 動態(tài)路徑參數(shù) 以冒號開頭
     { path: '/user/:id', component: User,
     //自路由再次渲染
       children: [ { path: 'profile', component: UserProfile },
                 { path: 'posts', component: UserPosts } ]
     }
  ]
})
const app = new Vue({
  router
}).$mount('#app')   //$mount('#app')相當于 el:'#app'

router.push 會向 history棧添加一個新的記錄點擊瀏覽器后退按鈕回到之前的 URL
router.replace與router.push 很像虐杯，唯一的不同就是玛歌，它不會向 history 添加新記錄
router.go 參數(shù)是一個整數(shù)，意思是在 history 記錄中向前或者后退多少步
{ path: '/a', redirect: { name: 'foo' }}
重定向的意思是擎椰，當用戶訪問 /a時支子，URL 將會被替換成 /b，然后匹配路由為 /b
{ path: '/a', component: A, alias: '/b' }
/a 的別名是 /b达舒，意味著值朋，當用戶訪問 /b 時背蟆，URL 會保持為 /b难咕，但是路由匹配則為 /a窑业，就像用戶訪問 /a 一樣

router.beforeEach((to, from, next) => {
  // 全局注冊的鉤子   3個參數(shù) 去哪 哪來  干嘛
})
beforeEnter: (to, from, next) => {
        //組件內(nèi)部的鉤子 效果一樣
} 
beforeRouteEnter (to, from, next) //渲染該組件的對應(yīng)路由被 confirm 前調(diào)用 無this

beforeRouteUpdate (to, from, next) //在當前路由改變恋沃，但是該組件被復(fù)用時調(diào)用

beforeRouteLeave (to, from, next) //導(dǎo)航離開該組件的對應(yīng)路由時調(diào)用

scrollBehavior (to, from, savedPosition) {
    // return 期望滾動到哪個的位置
  }

node.js

node(fs)專屬配置環(huán)境工具

var fs = require('fs')     //加載fs庫賦值于fs
fs.readdir('.', (err,files) => { // .當前目錄..上一級
    if(err != null) {
       console.log(err)
    } else {
       console.log('files', files)
   }
})   //  讀取當前目錄下的文件(readdirSync同步版本)

fs.rmdir('目錄名',(err) => { })
//刪除目錄文件(目錄必須為空)

fs.unlink(file, (err) => { })  
//  刪除file文件

fs.mkdir('目錄名字',(err) => { }) 
//創(chuàng)建目錄

fs.readdir('目錄',(err, files) => {})
//讀取目錄內(nèi)容

fs.writeFile('file', '你好 Node.js', (err) => {})
 //  創(chuàng)建file文件

fs.appendFile('file', '你好 python', (err) => {})
//添加文件內(nèi)容

fs.readFile('message.txt', 'utf8', (err, data) => {
    console.log('讀取了文件', data)
})    //   讀取文件

fs.rename('原名字','新名字',(err) => {})
//重命名文件

var fileReadStream = fs.createReadStream('文件名')
var fileWriteStream = fs.createWriteStream('文件名')
//讀取文件流  寫入文件流
fileReadStream.pipe(fileWriteStream)
//pipe好像管道,可以把讀取流接入寫入流 效果類似write
//pipe可以鏈式使用
fileReadStream.pipe(fileWriteStream).pipe(...)

var i = 0
fileReadStream.on('data',(chunk) => {
console.log(`${i++}接受到:${chunk.length}`)
fileWriteStream.write(chunk) //寫入每次內(nèi)容
}) //讀取次數(shù),每次長度

fileReadStream.on('end',() => {})
//讀取結(jié)束事件

fileReadStream.on('error',(err) => {})
//發(fā)生錯誤事件

express庫用于后端開發(fā)

// 引入 express 并且創(chuàng)建一個 express 實例賦值給 app
var express = require('express')
var app = express()
app.use(express.static('static'))
//封裝一個函數(shù)
var sendHtml = function(path, response) {
    var fs = require('fs') //   path是讀取文件
    var options = {       //  options解碼環(huán)境   
        encoding: 'utf-8'  
    }
    fs.readFile(path, options, function(err, data){
        console.log(`讀取的html文件 ${path} 內(nèi)容是`, data)
        response.send(data)
    })
}
// 用 get 定義一個給用戶訪問的網(wǎng)址
// request 是瀏覽器發(fā)送的請求
// response 是我們要發(fā)給瀏覽器的響應(yīng)
app.get('/', function(request, response) {
    var path = 'index.html'
    sendHtml(path, response)
})

app.get('/todo/all', function(request, response) {
    var todos = [
        {
            id: 1,
            task: '吃飯',
        }
    ]
    var r = JSON.stringify(todos)
    response.send(r)
})
app.post('/todo/add', function(request, response) {
    // request.body  這個函數(shù)可以獲取前端post的數(shù)據(jù)
})

//打開端口服務(wù)器
// listen 函數(shù)的第一個參數(shù)是我們要監(jiān)聽的端口
// 這個端口是要瀏覽器輸入的
// 默認的端口是 80
// 所以如果你監(jiān)聽 80 端口的話，瀏覽器就不需要輸入端口了
// 但是 1024 以下的端口是系統(tǒng)保留端口休建，需要管理員權(quán)限才能使用
var server = app.listen(8081, function () {
  var host = server.address().address
  var port = server.address().port

  console.log("應(yīng)用實例盛杰，訪問地址為 http://%s:%s", host, port)
})

node的一些庫

//sync-request 用于下載網(wǎng)頁
var request = require('sync-request')

//cheerio 用于解析網(wǎng)頁數(shù)據(jù)
var cheerio = require('cheerio')

//模塊中函數(shù)輸出
module.exports = 函數(shù)名

git

git init   //創(chuàng)建git倉庫
git add (文件名)   //添加文件
git commit -m "改動說明"   //上傳改動
git status           //查詢倉庫狀態(tài)
git diff ()           //查詢文件變動
git log         //查詢版本改動
git log --pretty=oneline     //格式化顯示版本改動狀態(tài)
git reset --hard HEAD^    //HEAD當前版本 ^上個版本 ^^上2個版本  HEAD-100  上100個版本
git reset --hard (版本號(可只寫幾個開頭))   //回滾到指定版本
git reflog                     //記錄每次操作
git checkout -- （）          //文件回滾到最后一次add或commit狀態(tài)
git reset HEAD （）     //撤銷最后一次的git add
git rm ()    //刪除文件
git checkout -b dev     //創(chuàng)建并切換為dev分支
git branch    //查看所有分支
git checkout master    //切換分支到master
git merge dev    //合并指定分支（dev）到當前分支
git branch -d（D） dev    //刪除（強制刪除）dev分支
git stash   git stash pop    //儲存目前工作現(xiàn)場翼闽，讀取禽捆。笙什。。
git remote -v    //顯示遠程倉庫信息
git push （origin branch-name）    //本地推送分支到遠程倉庫
git branch --set-upstream （branch-name origin/branch-name）
// 建立本地分支和遠程分支的關(guān)聯(lián)
git tag （name）   //打標簽
git tag             //查看所有標簽
git tag （v1.0） (提交id)     //打歷史標簽
git show (name)      //顯示對應(yīng)標簽說明
git tag -a <tagname> -m "blablabla..."   //添加標簽說明
git tag -d （name）     //刪除本地標簽
git push origin :refs/tags/<tagname>   //刪除一個遠程標簽
git push origin <tagname>     //推送一個本地標簽
git push origin --tags        //推送全部未推送過的本地標簽
//忽略某些文件時胚想，需要編寫.gitignore
git config --global alias.（co） checkout   //配置簡化git命令checkout為co

gulp

創(chuàng)建gulpfile.js文件

var gulp = require('gulp')     //引入gulp

gulp.task('images', function () {
    return gulp.src('images/*.png').pipe(gulp.dest('dist/images'))
})   
//創(chuàng)建images函數(shù)琐凭，將images下所有png格式圖片復(fù)制到dist/images文件下

var sass = require('gulp-sass')  //編譯sass為css
var connect = require('gulp-connect')
gulp.task('server', function() {
    connect.server({
        root: 'dist'
    })
})
//創(chuàng)建本地服務(wù)器監(jiān)視dist文件下內(nèi)容
var concat = require('gulp-concat');  //合并
var uglify = require('gulp-uglify');  //壓縮js文件
var rename = require('gulp-rename');  //重命名文件
gulp.task('scripts', function () {
return gulp.src(['javascripts/**/*.js',''])
.pipe(concat('vendor.js'))
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});
//合并文件，取名vendor.js壓縮后放在dist/js下
var minifyCSS = require('gulp-minify-css');
// 壓縮css文件  minifyCSS()
var imagemin = require('gulp-imagemin');
//壓縮圖片體積   imagemin()
var browserSync = require('browser-sync').create();
// 游覽器同步
// 靜態(tài)服務(wù)器
gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });
});
// 代理
gulp.task('browser-sync', function() {
    browserSync.init({
        proxy: "你的域名或IP"
    });
});
npm install browser-sync --save-dev
//安裝browser-sync
browser-sync start --server forest --files "forest/index.html, forest/css/*.css"
//監(jiān)視forest文件夾下文件
--tunnel
//使外網(wǎng)也可以訪問
browser-sync start  --proxy localhost:9090
//監(jiān)視指定代理服務(wù)器

// 直接使用browser-sync
browser-sync start --server --files "css/*.css, *.html"

webpack

webpack (原.js) (處理后.js)
module.exports = 'zh is boss!'   //name.js
var name = require('./name')    //引入name.js
npm install css-loader // 處理css文件
npm install style-loader // 應(yīng)用css文件
require('style!css!./css/*.css')  //引入css文件
webpack --devtool source-map  //生成可source調(diào)試的js
npm install webpack-dev-serve    //生成開發(fā)用服務(wù)器
webpack-dev-server --inline --hot  //模塊熱更新監(jiān)控
//配置webpack文件
新建一個名為webpack.config.js的文件
module.exports = {
 devtool: 'eval-source-map',//配置生成Source Maps
 entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"http://打包后輸出文件的文件名
  }
  devServer: {
    contentBase: "./public",//本地服務(wù)器所加載的頁面所在的目錄
    colors: true,//終端中輸出結(jié)果為彩色
    historyApiFallback: true,//不跳轉(zhuǎn)
    inline: true//實時刷新
  }
}

一些常用函數(shù)/數(shù)據(jù)

循環(huán)

for (var i = 0; i < iterable.length; i++) {
    iterable[i]
    }
    
var i = 0
while(i<iterable.length) {
function語句
i += 1
}

arr.forEach(function(iteam, index, array)
for (i of iterable) { i }           // i = 值
for (i in iterable) ( iterable[i] } // i = 下標
break  結(jié)束單次循環(huán)
continue 語句可以跳過單次循環(huán)

常用函數(shù)

var log = function() {
    console.log.apply(console, arguments)
    //alert( )
    }    
//測試函數(shù)情況    
    
var ensure = function( def, result, message ) {
    if( JSON.stringify( def ) !== JSON.stringify( result ) ) {
        log('錯誤', message)
    }
}
//測試函數(shù)正確

var e = function(selector) {
    return document.querySelector(selector)
}
// 綁定元素

var appendHtml = function(element, html) {
    element.insertAdjacentHTML('beforeend', html)
}
//加入html字符串

var toggleClass = function(element, className) {
    if (element.classList.contains(className)) {
        element.classList.remove(className)
    } else {
        element.classList.add(className)
    }
}
// 開關(guān)(className)

var removeClassAll = function(className) {
    var selector = '.' + className
    var elements = document.querySelectorAll(selector)
    for (var i = 0; i < elements.length; i++) {
        var e = elements[i]
        e.classList.remove(className)
    }
}
//批量刪除className

var bindEvent = function(element, eventName, callback) {
    element.addEventListener(eventName, callback)
}
//綁定事件

var bindAll = function(selector, eventName, callback) {
    var elements = document.querySelectorAll(selector)
    for(var i = 0; i < elements.length; i++) {
        var e = elements[i]
        bindEvent(e, eventName, callback)
    }
}
//批量綁定事件

var time = function( z ) {
    if (z === undefined) { z = new Date() }
    var han = '日一二三四五六'
    var Year   = z.getFullYear()    
    var Month  = z.getMonth() + 1
    var Day    = z.getDate()
    var Hour   = z.getHours()
    var Minute = z.getMinutes()
    var Second = z.getSeconds() 
    var Week   = han[z.getDay()]
    if ( String(Month).length === 1) {
        Month = '0' + Month
    }
    return `${Year}年${Month}月${Day}日 ${Hour}時${Minute}分${Second}秒 星期${Week}`
}
time( ) 
//時間函數(shù)    括號里輸入時間對象 否則為當前時間
// (new Date()).getTime()把時間轉(zhuǎn)換為當前毫秒計算事件 常用于倒計時
//可通過new Date('2017/6/10,10:30:30')的格式來設(shè)置時間

參數(shù)說明

Math 數(shù)學

邏輯符號

定時器

a是執(zhí)行函數(shù) b是時間（例如1000）

offsetLeft 距離左邊的距離 用于做無縫滾動

類型

RegExp 正則表達式

• 語法：/Pattern/Property
  |Property|說明|
  |:-:|:-:|
  |/i|無視大小寫|
  |/g|全局匹配|
  |/m|多行匹配 |
  |/img|組合使用|

• 常用

• 編譯：new RegExp( Pattern, Property )

var name = '饅頭'
var re = new RegExp( `${name}`, 'img' ) //加變量

轉(zhuǎn)義符

注釋

編碼

ASCII：2進制8字節(jié)表示 Base64：2進制6字節(jié)
|ASCII - Unicode 編碼|說明|
|:-: |:-: |
|'Aa'.charCodeAt( 0 ) === 65|0 下標|
|String.fromCharCode( 65 ) === "A"|65 ASCII碼|
|( 10 ).toString( 2 ) === "1010"|進制轉(zhuǎn)換|

參考資料：

書籍

《Head First HTML 與 CSS》第2版 ;
《JavaScript 語言精粹》;
《JavaScript 高級程序設(shè)計》;

《編碼》;《計算機程序的構(gòu)造和解釋》;SICP 解題集
《深入理解計算機系統(tǒng)》;
《算法導(dǎo)論》;《編程珠璣》;《程序設(shè)計語言》;《代碼大全》;

網(wǎng)絡(luò)

文檔：MDN /w3school
教程：廖雪峰/寧皓網(wǎng)/慕課網(wǎng)

基礎(chǔ)教程：
計算機科學和Python編程導(dǎo)論
計算機科學cs50
計算機程序設(shè)計
算法導(dǎo)論
編程語言
英語學習