Vue-(一)課程前言、(二)行前準備

1-1.老師的話 (文章)

如何設計出好架構,如何寫出好程式?
許多人問過我,要如何設計出好架構,寫出好程式 我回答的都是同一個方法: 空氣朋友 在你寫 code 時請你想像一個不存在的朋友 你要向他解釋你寫出來的每一行程式碼,他甚至可能提問 如果在某處你無法流暢清晰的解釋 代表那個地方你必須想的更深更廣,作更多的研究 長此以往,必定可以有顯著的進步!

2-1:課程準備(影片)

  • vscode中安裝Vue 2 Snippets套件
    針對編譯器中coding,做不同文字顏色的呈現,便於檢視code
  • codepen中載入Vue
    javascript的地方新增框架vue,即可使用vue

2-2:取代var的let與const(影片)

  • var是全域變數

    1
    2
    3
    4
    全域變數var i可以在所有地方被使用
    for(var i=0;i<3;i++){
    }
    console.log(i);//會印出3
  • letconst是區域變數
    區域變數let i只在for迴圈中可以被使用

    1
    2
    3
    for(let i=0;i<3;i++){
    }
    console.log(i);//錯誤:i is not defined

const 宣告出來的變數是無法被re-assign的

1
2
3
for(const i=0;i<3;i++){
}
console.log(i);//錯誤:i無法被修改

  • const被宣告為物件,是可以改變其中的內容
    const若被宣告為物件,const本身無法被重新re-assign,但是物件{}其中的內容是可以重新被re-assign

    1
    2
    const c ={x:0};
    c.x = 3;
  • javascript的hoisting特性
    可以先執行Function,再補宣告

    1
    2
    3
    a();//先呼叫執行
    function a(){ //再補宣告
    }

可以先呼叫a,再補宣告var;
但是,不能補宣告let

1
2
a+=1;
var a;

1
2
a+=1;//會報錯,找不到a
let a;

2-3:簡潔快速的縮寫shorthands(影片)

  • object中的屬性縮寫
    當object裡的內容,其key與value是同名的情況(key=value=x),
    1
    2
    3
    4
    5
    6
    7
    function makePoint(x,y){
    return{
    x:x,//左邊的x代表key,右邊的x代表value
    y:y,
    name:name,
    }
    }

可以改寫為

1
2
3
4
5
6
7
function makePoint(x,y){
return{
x,//x key的value也是‘x’,所以會往上找到參數‘x’
y,
name,
}
}

  • 補充:物件object
    物件的內容是由屬性組成的,而屬性是由 key-value pair 構成,value 可為任意資料型別的值,並且值是以參考型別(reference)的方式(存位置)儲存。

如何存取物件的屬性呢?有兩種方式

1
2
1. 特性存取(property access),使用 .
2. 鍵值存取(key access),使用 [ ]

1
2
3
4
5
const obj = {
'a': 'Hello World',
};
console.log(obj.a);<!--"Hello World" -->
console.log(obj['a']);<!--"Hello World" -->
  • 計算屬性
    若object中的key為動態的,key可以用中括號[]括起來,代表[]裡面是計算後的屬性。

    1
    2
    3
    4
    5
    6
    7
    8
    function createObj(key,value){
    const obj={};
    obj[key]=value;
    return obj;
    }
    const person = createObj('name','John');
    // 會生成出一個物件
    // person={name:'John'}

    改寫為

    1
    2
    3
    4
    5
    6
    7
    8
    function createObj(key,value){
    const obj={
    [key]:value;
    };
    return obj;
    }
    const person = createObj('name','John');
    const cat = createObj('legs',4);

[]裡面也可以放運算子

1
2
3
4
5
6
function createObj(key,value){
const obj={
[key+1]:value;
};
return obj;
}

  • 函式縮寫
    當物件中有函式function()
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    const options={
    name:'Options',
    level:3,
    created:function(){

    },
    mounted:function(){

    },
    };

可以改寫為

1
2
3
4
5
6
7
8
9
10
const options={
name:'Options',
level:3,
created(){

},
mounted(){

},
};

2-4:便利的取出元素:解構賦值(影片)

解構賦值(Destructuring assignment)語法是一種 JavaScript 運算式,可以將陣列或物件中的資料取出成獨立變數。

  • 陣列解構(拿多個)

    1
    2
    3
    4
    const nums = [111,222,333];
    const first = nums[0];
    const second = nums[1];
    const third = nums[2];

    可以將陣列解構,改寫為

    1
    2
    3
    4
    const nums = [111,222,333];
    // const [first,second] = nums;
    const [first,second,third,forth]=nums;//forth會是undefine
    const result = first+second+third+forth;//錯誤:因為forth是undefine
  • 陣列解構(預設值)
    若想避免為undefined,可以在解構的同時給予預設值

    1
    2
    const nums = [111,222,333];
    const[first, second, third, forth=0 ]=nums;//forth會是undefine
  • 陣列解構(忽略元素,拿一個)
    假設只要拿出third為333,前面可以忽略

    1
    2
    const nums = [111,222,333];
    const [,,third] = nums;
  • 陣列解構(變數交換)

    1
    2
    3
    4
    5
    let a = 1;
    let b = 2;
    let temp = a;
    a = b;
    b = temp;

利用解構賦值做變數交換的改寫

1
2
3
let a = 1;
let b = 2;
[a,b]=[b,a]

  • 陣列解構(剩餘部分)

    1
    2
    3
    4
    5
    const nums = [1,2,3,4];
    const[first,...others]=nums;
    //
    // first = 1;
    // others = [2,3,4]
  • 物件解構

    1
    2
    3
    4
    5
    6
    const point={
    x:100,
    y:150,
    }
    const x = point.x;
    const y = point.y;

    物件解構可以用大括號{}改寫

    1
    2
    3
    4
    5
    const point={
    x:100,
    y:150,
    }
    const {x,y}= point;
  • 物件解構(預設值)
    為了避免undefined,可以在解構的同時給予預設值

    1
    2
    3
    4
    5
    const point={
    x:100,
    y:150,
    }
    const {x, y, z = 0} = point;
  • 物件解構(指派新名稱)
    透過冒號:給予新名稱

    1
    2
    3
    4
    5
    6
    7
    const point = {
    x:100,
    y:150,
    }
    const[x:px, y:py] = point;
    const result = px*py;
    const result = x*y;//錯誤:找不到x,y
  • 解構函式參數
    計算point到圓點的距離
    數學算式:(x平方+y評分)=>再開根號

    1
    2
    3
    4
    5
    6
    7
    const point = {
    x:100,
    y:150,
    }
    function distance(point){
    return Math.sqrt(point.x*point.x + point.y*point.y);
    }

可以改寫為

1
2
3
4
function distance(point){
const{x,y} = point;
return Math.sqrt(x*x + y*y);
}

或是直接在函式的參數中作解構

1
2
3
function distance({x,y}){
return Math.sqrt(x*x + y*y);
}

甚至還可以在參數中給予預設值,並重新命名

1
2
3
function distance({x:px=0;y:py=0}){
return Math.sqrt(px*px + py*py);
}

2-5:更強的字串:字串模板與多行字串(影片)

  • 字串模板(string templete)
    原始寫法
    1
    2
    3
    4
    function greet(name){
    console.log('Hello, ' + name + '!');
    }
    greet('Jack');//印出 Hello, Jack!

改寫用backtick`宣告字串模板,在要放入變數的地方用${}將變數括起來

1
2
3
function greet(name){
console.log(`Hello, ${name}!`);
}

補充:表達式(expression)vs.陳述式(statement)
陳述式statement:只做行動但不立即產生結果
表達式expression:用小括號()將內容包起來,()裡面是值

1
2
const a;//陳述式
(a+1);//表達式

  • 字串模板中插入表達式
    1
    2
    3
    4
    function greet(name,days){
    const hours = days * 24;
    console.log(`Hello, ${name}! It's been ${hours} hours!`);
    }

在字串模板中,加入表達式的改寫

1
2
3
function greet(name,days){
console.log(`Hello, ${name}!It's been ${days * 24} hours!`);
}

  • 字串模板中加入三元判斷式
    三元判斷式解釋:若(days<7)成立,則回傳’’,否則回傳’Long time no see.’

    1
    2
    3
    4
    5
    6
    function greet(name,days){
    console.log(`Hello, ${name}! ${(days<7)?'':'Long time no see.'}`)
    }

    greet('Jack',3);//Hello, Jack!
    greet('Peter',8);//Hello, Peter! Long tome no see.
  • 多行字串
    長文章斷行,宣告多行字串不能斷行,若要換行只能使用+

    1
    const words = 'aaa\n'+'bbbb\n'+'ccccc';

用字串模板改寫(字串模板支援多行字串)

1
2
3
4
5
const words = `
aaa
bbbb
ccccc
`;

2-6:不只更簡短:箭頭函式(影片)

  • 箭頭函式,語法簡短
    1
    2
    3
    var double = function(x){
    return x*2;
    }
1
2
3
const double = (x) => {
return x*2;
}

如果參數只有一個,可以將小括號()省略

1
2
3
const double = x => {

}

如果函式本體只有一行,而且是return,可以省略{},將return內容直接寫在後面,

1
const double = x => x*2;

  • 箭頭函式,自動綁定
    箭頭函式內部的this與外部相同
    1
    2
    3
    4
    5
    const a =()=>{
    console.log(this);//等於外面的this
    }
    console.log(this);
    //第2行、第4行執行的this,指向同一個
1
2
3
4
5
6
7
const a = () =>{
console.log(this);
const aa = () =>{
console.log(this);/等於外面的this
}
}
//第2行、第4行執行的this,指向同一個

補充:函式裡面的this是什麼?
this是函式的context,情境不同,執行結果也不同

  1. 直接執行:“this”代表window(瀏覽器的global是window)

    1
    2
    3
    4
    5
    var name = 'Heisenburg';
    var sayMyName = function(){
    console.log(this.name);
    }
    sayMyName();//Heisenburg
  2. 宣告一個物件,將函式作為該物件的成員函式:“this”代表該物件

    1
    2
    3
    4
    5
    var teacher = {
    name:'Jack',
    }
    teacher.sayMyName = sayMyName;//物件的成員函式
    teacher.sayNyName();//Jack
  3. 作為DOM中的監聽函式:“this”代表該DOM元素

假設html中有一個button

1
<button id="btn" name="Btn-click">click me!</button>

當button被按下之後,會執行函式sayMyName

1
2
btn.addEventListener('click',sayMyName);
//Btn-click

==但是,若將函式改為箭頭函式…==
箭頭函式中的this代表外面的this,所以三種執行結果的name都ㄧ樣

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var name = 'Heisenburg';

var sayMyName = () =>{
console.log(this.name);
}

var teacher = {
name = 'Jack',
}
teacher.sayMyName = sayMyName;

sayMyName();//Heisenburg
teacher.sayMyName();//Heisenburg
btn.addEventListener('click',sayMyName);//Heisenburg

2-7:片尾彩蛋:ES5、ES6、Es2017!?到底是什麼東西?(影片)

  • ECMAScript(往往被稱作JavaScript)
    ECMA組織訂出JavaScript的語法規範,再讓各家瀏覽器依照規範實作

學習來源

© 2020 Leah's Blog All Rights Reserved. 本站访客数人次 本站总访问量
Theme by hiero