iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 3
1
自我挑戰組

從0開始vue.js的30天學習日誌系列 第 3

03 創建Vue應用程式

在引入vue之後,來建立第一個應用程式:

<script>
    new Vue({
      el: "#app01",
      data: {
        msg: "我的第一個Vue應用(ง๑ •̀_•́)ง",
      },
    });
</script>

new Vue()先創建一個Vue實體(instance),並在裡面傳入包含屬性及方法的物件。

  • el ( element ):要綁定的DOM element
  • data:要綁定的資料

在data裡面定義變數msg為"text"後,使用模板雙括號{{}}將資料render出來

<div id="app01">
    {{msg}}
  </div>

網頁載入後,看到render成果,就完成了第一個Vue應用程式:

<div id="app01">
    我的第一個Vue應用(ง๑ •̀_•́)ง
  </div>

Vue.js的運作

另外官方文件上特別提到聲明式渲染

Vue.js 的核心是一個允許採用簡潔的模板語法來聲明式的將數據渲染進 DOM 的系統

看到聲明式渲染立刻滿頭問號?這啥????????/images/emoticon/emoticon19.gif

要解釋聲明式渲染的話可以拿命令式渲染來對照,上網查了一下,附上這個很好懂回答及簡表如下:怎么理解“声明式渲染”? - 知乎

聲明式渲染 命令式渲染
It should look like this This is what you should do
我想要一頓雞肉晚餐 去廚房,打開冰箱,從冰箱中取出雞肉...@$^$@%&*
  • 聲明式讓你可以更關注在狀態或資料表現,而不用去考慮底層如何實現。
  • 命令式渲染通常意味著手動操作DOM。

而jQuery就是上述說的命令式,俗稱一個口令一個動作,如果是使用最前面創建Vue應用程式的例子的話,jQuery的寫法是:

$("#app01").text("我的第一個Vue應用(ง๑ •̀_•́)ง")

jQuery使用時一定要先取得目標元素,再來把該值放入元素中。

而Vue是當使用el屬性決定執行範圍後,他會先找到{{msg}}模板的位置,並把實體化輸入的值傳送給模板({{msg}}),當資料改變時,html也會跟著改變。

所以我們只要給資料,決定完資料要放在html的哪裡,剩下的就交給Vue管家做資料與DOM的繫結了。

好!建立完第一個Vue應用程式後,下篇開始學習Vue的模板語法/images/emoticon/emoticon13.gif


上一篇
02 開始Vue.js的前置準備
下一篇
04 Vue的模板語法 - v-text, v-html
系列文
從0開始vue.js的30天學習日誌30

尚未有邦友留言

立即登入留言