工程師一定要了解Vue.js 資料綁定篇
Photo credit：Pexels
文、意如老師
了解了基本的程式架構後，接下來我們要來認識資料綁定以及屬性綁定
任務：資料綁定
1. 使用v-text 接資料
2. 使用大括弧 {{ }} 接資料
3. 認識資料型態function
4. 使用v-html 接資料
5. 使用v-model接資料
6. 設計表單資料綁定
任務：資料綁定
1. 使用v-text 接資料
例：v-text=message
範例index.html程式碼參考如下：
div id=myapp
span v-text=message/span
/div
範例main.js程式碼如下：
var myapp = new Vue({
el: #myapp,
data: {
message: Hello myapp!
}
})
2. 使用大括弧 {{ }} 接資料
第二種方法，使用大括號的方式來接資料例如{{message}}，這種方式使用起來會較有彈性更方便。
範例Index.html程式碼如下：
div id=myapp
span{{message}}/span
/div
範例main.js程式碼如下：
var myapp = new Vue({
el: #myapp,
data: {
message: Hello myapp!
}
})
兩種方式混合一起用：
範例Index.html程式碼如下：
div id=myapp
span v-text=message/span
span{{message}}/span
/div
範例main.js程式碼如下：
var myapp = new Vue({
el: #myapp,
data: {
message: Hello myapp!
}
})
網頁結果顯示：
程式碼參考：https://jsfiddle.net/YiruAtStudio/e4809f6t/5/
如果你的main.js是首頁，並預設已經有寫一些內容，那麼我們也可以繼續往下加入（例：17行）
這時候開啟我們的首頁最下方，就會有我們剛剛輸入的文字了。
可參考-程式碼：https://jsfiddle.net/YiruAtStudio/01kdp57w/6/
3. 認識資料型態function
如元件檔副檔名為.vue例App.vue它們都是各自獨立非共用，所以元件中的data都只能是function型態，並可用return 方式來回傳資料
例路徑：src\components\mytest.vue
參考程式碼如下
div class=myfont
{{mymsg}}
/div
script
export default{
data () {
return {
mymsg: hi,mymsg!
}
}
}
/script
4. 使用v-html接資料：例v-html=message
如果要返回（return）的是html，則需要使用的是v-html
範例Index.html程式碼如下：
div id=myapp
span v-html=message/span
/div
範例main.js程式碼如下：
var myapp = new Vue({
el: #myapp,
data: {
message: a href=#我是超連結/a
}
})
console.log(myapp.message)
執行結果：
完成程式碼參考：https://jsfiddle.net/YiruAtStudio/sx35fd9m/
5. 使用v-model接資料
先來看看v-model的效果如下圖，在使用者填完資料或選擇資料時，下方資訊則會自動更新。
使用方式如下，範例index.html程式碼：
div id=myapp
姓名:input type =text v-model=myname
購買數量:input type = number v-model=mynum
br
{{myname}}，購買數量為:{{mynum}}
/div
範例main.js程式碼如下：
var myapp = new Vue({
el: #myapp,
data: {
myname: Name:,
mynum: 5
}
})
console.log(myapp.myname)
完成檔：
完成程式碼：https://jsfiddle.net/YiruAtStudio/8vex0af1/
6. 設計表單資料綁定
範例index.html程式碼如下：
input type =text v-model=myname
input type = number v-model=mynum
textarea v-model=mynote/textarea
運送:br
input type =radio name=s1 v-model=transport value=7117-11br
input type =radio name=s1 v-model=transport value=family全家br
input type =radio name=s1 v-model=transport value=hilife萊爾富br
加購:br
input type=checkbox v-model=chkbox value=pythonpython
input type=checkbox v-model=chkbox value=JavaJava
input type=checkbox v-model=chkbox value=PHPPHP
付款方式:
select v-model=select_item
option value=ATMATM/option
option value=pay貨到付款/option
option value=ment取貨付款/option
/select
{{myname}}，購買數量為:{{mynum}}，br
{{mynote}}。br
運送方式{{transport}}br
加購{{chkbox}}br
付款方式{{select_item}}
範例main.js程式碼如下：
var myapp = new Vue({
el: #myapp,
data: {
myname: Name:,
mynum: 5,
mynote: 備註,
transport: 請選擇,
// 宣告checkbox-data中的變數為陣列[]
chkbox:[],
//也可宣告null
select_item:null,
}
})
執行結果如下圖：
文章轉自菜鳥救星，未經授權請勿轉載，原文為：最熱門的網頁前端框架，工程師一定要了解Vue.js 資料綁定篇
FB粉絲團：https://www.facebook.com/lccnetzone
YouTube頻道：https://www.youtube.com/user/LccnetTaiwan
痞客邦Blog：http://lccnetvip.pixnet.net/blog
