(一) v-for根據數據生成結構列表(如陣列或物件)

• 語法: item in items (item 的名稱可任意命名，只要是合法的 JavaScript 變數名稱就好)
  (item,index) in 數據
  =>item-每一項
  =>index-索引
  

（二） v-on補充（傳遞自訂義參數、事件修飾符）
-> v-on(參數)

1. 事件通用型修飾子

• .stop:用來阻擋事件冒泡。使用 .stop 修飾子可以阻止事件向上冒泡到父元素。
• .prevent:阻止事件的預設行為例如，使用 .prevent 修飾子可以阻止表單提交的預設行為，或是阻止連結跳轉的預設行為。
• .capture:使用事件捕獲模式，即從最外層元素開始向內層元素捕獲事件。
• .self:只在點擊事件的目標元素自身時才觸發。
• .once:只執行一次事件處理方法。在第一次觸發後，該事件監聽器會被自動移除。
  ->修飾子可以組合使用，例如 @click.stop.prevent 可以同時阻止事件冒泡和預設行為。

2. 鍵盤修飾子

• .enter:當 Enter 鍵按下時觸發 <input @keyup.enter=" " />
• .tab \ .delete 或 .backspace \ .esc .space .up、.down、.left、.right ……
  請記得，鍵盤修飾子是區分大小寫的，例如 .enter 和 .Enter 是不同的修飾子。

   <!--- v-on 補充  -->
        <div id="app2">
        <!--<input type="button" value="點擊" @click="doIt(123,'你好')">-->
        <div v-for="m in messages">{{ m }}</div>
        <input type="text"  @keydown.enter.exact="addMessage"  v-model.trim="msg"  placeholder="輸入任意文字後按下 enter 鍵">
        </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app2 = new Vue({
            el:"#app2",
            data:{
                messages: []
            },
            methods: {
                doIt:function(p1,p2){
                    console.log(p1);
                    console.log(p2);
                },
                addMessage:function(p){
                    this.messages.push(this.msg);
                    this.msg = '';
                }
            },
        })

(三) v-model (表單綁定) – 獲取合設置表單元素的值(雙向數據綁定)

• .lazy:修飾子可以讓 v-model 在失去焦點或按下 Enter 鍵時才更新數據。
• .number:將輸入的值轉換為數字。
• .trim:自動去除輸入的前後空白、
  //這些修飾子可以組合使用
  EX:可以同時使用 .lazy 和 .number 修飾子-><input v-model.lazy.number="price" type="number">

 <div id="app3">
 <input type="text" v-model="message" @keyup.enter="getM">  
 <p> {{ message }}</p>      <!-- 內容與v-model="message" 相同，會同步更新-->
 <input type="button" value="修改" @click="setM"> <!--點擊按鈕 內容會改變 message 同步到上方-->
 </div>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
  var app3 = new Vue({
            el:"#app3",
            data:{
                message:"你好!"
            },
            methods: {
                getM(){
                    alert(this.message);
                },
                setM(){
                    this.message = "加油~~";
                }
            },
        })
  </script>

參考資料:
1.https://book.vue.tw/CH1/1-6-conditions-and-flow-control.html
2.https://www.bilibili.com/video/BV1HE411e7vY/?p=15&share_source=copy_web&vd_source=85a8c5bb37dc77d30860d2b3537de967