DAY02 | 跟 Vue.js 認識的30天 - Vue 實體的生命週期(Lifecycle Hooks)及模板語法(Template Syntax)

發表於 更新於 分類於 ，

學了 VueJS 一段時間，總是會不定期的回頭看下面這張圖：
VueJS 生命週期

這張圖從上到下就是 Vue 實體產生的一系列過程，並且在過程中不同階段，會運行一些生命週期鉤子( lifecycle hooks )函式，例如created、mounted、updated 和 destroyed，我們就可以利用這些生命週期鉤子( lifecycle hooks )去添加自己的程式碼，並讓 Vue 執行到該階段的時候自動去執行我們所添加的程式碼。

Vue 實例 生命週期

補充說明

el
以頁面上已存在 DOM 元素作為 Vue 實例的掛載目標(可以是CSS選擇器或HTMLElement)。

模板語法(Template Syntax)

文本

使用”Mustache”語法(雙大括號 {{ 內容 }} )。

使用 {{ 內容 }} 會將 data 帶出來的值都視為普通文本。

1
<p>Text: {{ text }}</p>

原始HTML

要插入 HTML ，就必須要使用指令 v-html 。

1
2
3
4
5
6
7
<div id="app">
  <!--僅顯示HTML文字-->
  <p>{{ rawHTML }}</p>

  <!--顯示文字及設定的樣式-->
  <p v-html="rawHTML"></p>
</div>

HTML Attribute

要將資料綁到 HTML 屬性上面，就必須要使用指令**v-bind:attributeName**。
v-bind:attributeName可以縮寫成:attributeName

1
2
3
<div id="app">
  <img v-bind:src="imgUrl">
</div>

JavaScript 表達式(JavaScript Expressions)

透過在 {{ 內容 }} 其中加入JS表達式來進行運算。

1
2
<p> {{ num + 1 }}</p>
<p> {{ doSth? '可以做':'不可以做' }}</p>

更多JS表達式：
MDN-運算式與運算子

Demo:

See the Pen [DAY02]跟 Vue.js 認識的30天 - Vue 實體的生命週期(Lifecycle Hooks) by Celeste6666 (@celeste6666) on CodePen.

See the Pen [DAY02]跟 Vue.js 認識的30天 - Vue 的模板語法(Template Syntax) by Celeste6666 (@celeste6666) on CodePen.

參考資料：
Understanding Vue.js Lifecycle Hooks
vue生命周期解析
Vue.js 选项 / 生命周期钩子
Yes