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=”711″>7-11<br>
<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=”python”>python
<input type=”checkbox” v-model=”chkbox” value=”Java”>Java
<input type=”checkbox” v-model=”chkbox” value=”PHP”>PHP
付款方式:
<select v-model=”select_item”>
<option value=”ATM”>ATM</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,
}
})
執行結果如下圖：
