最熱門的網頁前端框架，工程師一定要了解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 方式來回傳資料
例路徑：srccomponentsmytest.vue

參考程式碼如下
<div>
                        {{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,
}
})

執行結果如下圖：

加入菜鳥救星官方Line並回覆「我想看文章」，不定期獲得更多知識吧！

不同頻道，不同知識！

Facebook Instagram Youtube