iT邦幫忙

2021 iThome 鐵人賽

DAY 8
0
Modern Web

菜鳥學前端,一起vue起來 !系列 第 8

Day 8. 聲明式渲染-跟Vue說Hello

開始Hello Vue前先插播一個錯誤調試工具- Vue.js devtools
這個chrome瀏覽器開發套件,是個好用的debug工具,可以在檢查組件的相關資料,且可查看 Vuex 的事件與資料的變化,大大提高了除錯的效率。

安裝方式
直接到chrome 線上應用程式商店下載安裝
https://ithelp.ithome.com.tw/upload/images/20210916/20131400369CHThOR9.png
安裝完成後,chrome瀏覽器右上角會出現一個V字的圖示
https://ithelp.ithome.com.tw/upload/images/20210916/201314008UH0E2IaKR.png
當訪問Vue項目頁面時,該V字圖示則會變成會變成綠色
https://ithelp.ithome.com.tw/upload/images/20210916/20131400p1SCWL9isZ.png

聲明式渲染 vs命令式渲染

  • 聲明式: 我們只要聲明程式應該要做到什麼,不需要關心具體怎麼實現,只要程式直接做出效果就好。
  • 命令式: 需要一步一步告訴程式要到哪裡、做什麼(拿什麼資料出來、如果觀測到資料變化,要放到哪裡),並關注它如何實現。

Hello Vue!
學習每個程式都從最簡單的 Hello World 範例開始
Vue.js 的核心使用簡單的模板語法來將數據渲染進網頁的DOM系統中
先在body中創建一個id為app的div標簽,並聲明一個變量message

<div id="app">
     {{ message }}
</div>

當我們引入Vue.js的時候呢,會聲明一個全局變量Vue({ })
new Vue的時候,需要注意傳遞一個對象作為參數(此處的app),這個對象有兩個非常重要的屬性:

  • el(element): 綁定 html 檔的標籤,利用id選擇器的方式綁定一個div (操控HTML 裡 id 為 app 的 div )。
  • data: 是一個用於保存數據的物件,我們在html使用了哪些變量就需要在data裡面聲明這些變量,這些變量以雙大括號寫在 html 中,並與 data 中的同名對應屬性單向綁定。屬性可以賦予各種型別的值:數值、字串、布林值、陣列等等。
<script>
 var app = new Vue({
     el: '#app',
     data: {
       message: 'Hello Vue!'
     }
   })
 </script>

執行結果
按下F12選擇Vue我們也能看到裡面有我們的變量
https://ithelp.ithome.com.tw/upload/images/20210916/20131400lkvavaTsGS.png

參考資料
聲明式渲染


上一篇
Day 7. 介紹一下VSCode-打code好幫手
下一篇
Day 9. 雙向綁定-MVVM
系列文
菜鳥學前端,一起vue起來 !30

尚未有邦友留言

立即登入留言