# Vue.js

範例:

https://github.com/todomonster/template-code-example/tree/main/vueopen in new window

# 入門1個月要認識的名詞?

html DOM節點傳遞
JavaScript ES5 ES6 jQuery語法
解構賦值 箭頭函數 let const,Template Literals,Destructuring Assignment,promise
CSS+Sass(Scss語法) Prepros or Watch Sass
網站架構 MVC/MVP/MVVM SPA/SSR理解
cdnjs liveserver vetur插件
fontawesome + bootstrap
webpack+babel package.json熟悉

模板測試:D2Project,VueElementTemplate,Vuetify
vue-cli熟悉
vuepress
vue架構
vue(語法 directive指令,once事件,鍵盤滑鼠修飾子,判斷,迴圈)
v-bind:,v-model,v-text-v-html,v-pre
.lazy,.trim.number
v-on:@
stop,prevent,capture,self,once,passive
@keydown.enter.exact,.meta
@click.right,.middle
v-if,v-show,v-else,v-else-if
v-for
$nectTick()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 特殊

# 為什麼畫面沒有刷新(但資料是對的?)

Vue 響應式原理open in new window

$forceUpdate()

# 名詞

polyfill 是甚麼?open in new window用於實現瀏覽器並不支援的原生API的程式碼

# 採坑

vue template 根節點

Vue template裡面只能有一個根節點
The template root requires exactly one element.

JSON 格式語法

JSON 格式和js寫物件不同 {"裡面":"要用雙引號"}

感謝Alex大大教學影片open in new window

[舉個例子]

    let number = 1
    var elements = [
    'Hydrogen',
    'Helium',
    'Lithium',
    'Beryllium'
    ];

    // 這段函式會輸出[8, 6, 7, 9]這個陣列
    elements.map(function(element) {
    return element.length;
    });

    function 變成箭頭 塞到中間

    //1 上方這種一般的函式，可以被改寫成下方的箭頭函式
    elements.map((element) => {
    return element.length;
    }); // [8, 6, 7, 9]

    //2 如果輸入的參數只有一個，我們可以移除掉外面的括號
    elements.map(element => {
    return element.length;
    }); // [8, 6, 7, 9]

    //3 當箭頭函式裡的內容只有'return'的時候，我們可以拿掉return+外面的大括號
    elements.map((element) =>  element.length); // [8, 6, 7, 9]
    elements.map(element) =>  element.length); // [8, 6, 7, 9]

    ---

    //範例2--
    const func = (x) => { return x + 1 } //多行 自己加return
    const func = (x) => x + 1
    const func = x => x + 1


    const func = function (x) { return x + 1 } //匿名的函式

    ---
    //容易搞-混範例3
    const funcA = x => x + 1 //2
    const funcB = x => { x + 1 } //undefined

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

# 學Vue也要知道ES6語法，否則都看不懂

vue cli mixin
ES6 Destructuring variables in string Arrow Function
import{}及exportimport{}及export
vue 傳值

# 系列

勇者鬥 Vue 龍 2019 勇者鬥 Vue 龍 2019open in new window
前端史萊姆前端史萊姆與 Vue 的三十天時光冒險open in new window
從 0 開始 vue.js 從 0 開始 vue.js 的 30 天學習日誌open in new window
用範例理解 Vue.js 系列用範例理解 Vue.js 系列open in new window

# API 補充

nextTick()方法open in new window