今天要進入用Vue.js實作出一個網頁啦~今天要介紹的是資料綁定

這是寫在html的部分也就是View的區塊

<div class="txt">
  <p>{{introduction}} </p>
</div>

在JavaScript的部分就是所謂的Model

new Vue({
    el: '#it',    
    data: {
            introduction: 'Welcome to Vue.js'
     }
})

所以我們可以從View+Model=網頁畫面知道，我們所謂的ViewModel就是中間的那個"+"
而程式碼的部分
new Vue顧名思義就是去產生一個Vue的實體
el是element元素的意思，他是用來幫我們把Vue的組件跟DOM綁在一起
而組件中的data則是拿來存放資料的地方
{{}}就是在做資料的綁定，這個稱為mustache語法，這裡它就是透過{{}}從data中去找到我們introduction的資料
這裡的照片使用的是Lorem Picsum 假圖產生器產生
這裡的照片大小是設定寬:1200px,高:600px
Demo

接下來要介紹的是資料的雙向綁定，先來看一段官網的介紹吧!

You can use the v-model directive to create two-way data bindings on form input, textarea, and select elements. It automatically picks the correct way to update the element based on the input type.

在官網中他告訴我們input, textarea和select elements這幾個tag都可以利用v-model指令去做資料的雙向綁定。那什麼是雙向綁定呢?雙向綁定就是會依照我們輸入的資料去更新畫面，所以今天的第二個網頁就是使用v-model做雙向綁定
這個網頁是讓使用者在輸入框中輸入自己的名字，然後他就會把使用者所填寫的資料呈現在卡片的文章中，所以我們在input的tag中使用v-model指令綁定username也就是去綁定使用者所輸入的名稱
卡片中的文章使用的是亂數假文產生器 Chinese Lorem Ipsum產生
Demo

github