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

Posted on 本文总阅读量次

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

  • let與const是區域變數
    區域變數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的語法規範，再讓各家瀏覽器依照規範實作

學習來源

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