聯成電腦-讓你價值連城

Photo credit：Pexels

 

 

 

文、意如老師

 

 

了解了基本的程式架構後，接下來我們要來認識資料綁定以及屬性綁定

 

 

 

 

任務：資料綁定

 

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,

  }

})

 

 

 

執行結果如下圖：