【Vue】基本語法 v-text/v-html/v-model（各種資料）/ v-bind

Vue的基礎使用

<div id="app"> </div> //設定綁定範圍

• Vue是一種MVVM的架構
• vue一次只能綁定一個資料
• vue不能做巢狀綁定

開啟Vue

new Vue=({

  el:"#app", //綁定資料，形成root

  data:{__}, //放入資料

  computed:{} //資料計算

  method:{} //方法

})

Vue的資料顯示

下面這些在Vue中統稱指令

 <div id="app">
          <div>{{message}}<div>  //可下面的寫法是ㄧ樣的
          <div v-text="message"></div> //可以寫入標籤
          <div v-html="message"></div> //可以寫入Html
          <input type="text" v-model="message"> //雙向綁定
          <img v-bind:src="imgSrc" v-bind:css="className" alt="">
</div>

 var app = new Vue({
            el: '#app',
            data: {
              message: '<h1>哈囉<h1/>',
              imgSrc:'照片連結',
              className:'image-fluid'
            }
          })

​

V-model與各種表單資料

code太多不想貼，反正V-model可以跟textarea、checkbox、radio、option串再一起

<textarea v-model="textarea"></textarea>
<input type="checkbox">
<input type="radio">
<select v-model="selected">
            <option value="" disabled>-請選擇-</option>
            <option value="你好">你好</option>
            <option value="正妹">正妹</option>
</select>

​