Skip to main content

basic

Vue 初學筆記#

SPA Single Page Application#

用框架來實現 SPA

  • 局部渲染頁面

  • 網頁元件化，使用邏輯控制組件

  • 處理 URL 和資料流

text#

The most basic form of data binding is text interpolation using the “Mustache” syntax (double curly braces)

{ { msg } }

v-bind#

html 標籤屬性用 v-bind 把 資料放進去，並可省略成:

<main class="main" v-bind:hello="message"></main>
<main class="main" :hello="message"></main>

用 true/false 切換 HTML 屬性值

<li class="todo" :class="{completed: true}">
<!-- ... -->
</li>

插入多個值運用陣列

<li class="todo" :class="[{completed: true}, {edited: false}]">
<!-- ... -->
</li>

v-for#

用於陣列迭代案 陣列可以使用第二個參數取得索引值

List Rendering

<div v-for="item in items">{{ item.text }}</div>
<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, name, index) in object"></div>

v-model#

表單輸入框的雙向綁定

use the v-model directive to create two-way data bindings on form input

雙向綁定: 資料會影響畫面，而畫面也會影響資料，使用者能透過表單輸入框填寫資料，如果 Vue 能即時拿到使用者產生的資料，就可以設計程式讓畫面和使用者即時互動

<input
v-model="newTodo"
v-on:keyup.enter="handleKeyup(newTodo)"
type="text"
class="new-todo"
autofocus
placeholder="需要做什麼？"
/>

v-on 縮寫：@

<input
v-model="newTodo"
@keyup.enter="handleKeyup(newTodo)"
type="text"
class="new-todo"
autofocus
placeholder="需要做什麼？"
/>

取得 event 物件 $event

v-if#

The directive v-if is used to conditionally render a block. The block will only be rendered if the directive’s expression returns a truthy value.

根據表達式的的值的 truthiness 来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。

元素會被忽略，根本就不在瀏覽器的 DOM tree 裡

切換頻率小的情況，使用 v-if 則無傷大雅

v-else#

You can use the v-else directive to indicate an “else block” for v-if:

<div v-if="Math.random() > 0.5">Now you see me</div>
<div v-else>Now you don't</div>
tip

A v-else element must immediately follow a v-if or a v-else-if element - otherwise it will not be recognized.

v-show#

The difference is that an element with v-show will always be rendered and remain in the DOM; v-show only toggles the display CSS property of the element.

the element is always rendered regardless of initial condition, with CSS-based toggling.

使用時機: 切換頻率高，資料內容也不怕別人看，流暢最重要

computed#

使用時機: 需要處理的 data，computed 裡運算之後，再拿到 template 裡使用

computed 只有在「需要更新相關畫面」時，才會被呼叫。

computed 的本質是「運算後的資料」

Filters#

filters 改變資料的呈現樣子，但不改變到資料

Vue 3 以棄用

watch#

監聽資料的方法

運用函式格式來定義想要監控的對象

函式名稱 = 要監控的資料名稱

handler 如果資料改變，要執行的處理程序

deep 深層監聽#

透過 deep 可以更深層的監聽

Lifecycle 生命週期#

畫面 html 被 Vue 接管到 Vue 離開

Lifecycle Hooks#

created#

當 Vue 被創建

mounted#

當 Vue 渲染好 html

updated#

github page#

npm run build

cd dist

git init //因為 dist 資料夾預設是被 ignore 的，因此在進入 dist 資料夾後初始化 git

git add -A

git commit -m 'deploy'

git push -f https://github.com/indexhui/vue-todolist.git master:gh-pages

Edit this page