{%hackmd BJrTq20hE %}
###### tags: `Vue` `指令`
# Vue常用指令的種類與功能、修飾符

與 [Vue 指令](https://codepen.io/efzdamnp-the-lessful/pen/yLPyqba?editors=1011)一起查詢。

## 1. v-text與{{}}

### 1.1 v-text、{{}}的功能主要是顯示資料。

<div id="app">
  <p v-text="text"></p>
  <p>{{text}}</p>
</div>

可以在html標籤間使用{{}}與使用指令v-text,但是要注意v-text會蓋掉html標籤間的內容。

const app = Vue.createApp({
  data(){
    return{text:"123"}
  },
  methods:{},
  compute:{},
  watch:{},
  mounted(){},
})
app.mount("#app")

## 2. v-for

### 2.1 v-for指令的功能是把迴圈或物件的資料一一的顯示在畫面

<div id="app">

<!- 陣列 ->
<ul>
    <li v-for="(item,index) in data1" :key="item+1">item:{{item}}/index:{{index}}</li>
  </ul>
<!- 物件 ->
  <ul>
    <li v-for="(item,key,index) in data2" :key="item+2">item:{{item}}/key:{{key}}/index:{{index}}</li>
  </ul>
<!- 純數字 ->
<ul>
    <li v-for="i in 5" >{{i}}</li>
  </ul>
<!- 元件 ->
<元件名稱 v-for="item in datas" key="item.name+1"></元件名稱>
</div>
    

1.在使用v-for時需要與:key="獨一無二的值"一起使用，上面的例子是使用item+1。
2.資料來源是array時能使用的自帶參數依序是item、index
3.資料來源是object時能使用的自帶參數依序是item、key、index

const app = Vue.createApp({
  data(){
    return{data1:['a','b','c'],
           data2:{
             first:'a',
             second:'b',
             third:'c}
  },
  methods:{},
  compute:{},
  watch:{},
  mounted(){},
})
app.mount("#app")

### 2.2 v-for不與key一起使用的問題

<div id="app">
<li v-for="(item,index) in data1" >item:{{item}}/index:{{index}}
    <input type="text"></li>
  </ul>
</div>

1.上面的v-for沒有:key，只要沒有變動，就不會重新渲染，可以試著在[v指令範例](https://codepen.io/efzdamnp-the-lessful/pen/yLPyqba)，移除:key並在input輸入隨意的文字，按下reverse鈕，就會看到input的內容沒有隨著資料改變排序而跟著改變。

const app = Vue.createApp({
  data(){
    return{data1:['a','b','c'],
           data2:{
             first:'a',
             second:'b',
             third:'c}
  },
  methods:{},
  compute:{},
  watch:{},
  mounted(){},
})
app.mount("#app")

## 3 v-if、v-else、v-else-if

### 3.1 這個指令就是要來判斷html的節點要不要出現在畫面上
#### 3.1.1 v-if

<div id="app">
<p v-if="isExist===true">我出現啦</p>
  <button type="button" @click="isExist=!isExist">Switch</button>
</div>

依據v-if="結果" 結果為true就顯示，false就不顯示

onst app = Vue.createApp({
data(){
    return{isExist:true}
  },
    }
app.mount("#app")

#### 3.1.2 v-if v-else v-else-if

<div id="app">
<p v-if="name===小明">小明出現啦</p>
<p v-else-if="name===咚咚">咚咚出現啦</p>
<p v-else-if="name===小美">小美出現啦</p>
  <button type="button" @click="name='小明'">招喚小明</button>
    <button type="button" @click="name='咚咚'">招喚咚咚</button>
    <button type="button" @click="name='小美'">招喚小美</button>
</div>

只要滿足條件，也就是v-if / v-else-if 為ture時就換顯示html節點

onst app = Vue.createApp({
data(){
    return{name:''}
  },
    }
app.mount("#app")

### 3.2 v-if 與 v-for 不要一起用在同一個html標籤
v-if不推薦與v-for在同一個標籤使用。如果需要同時使用，則需要使用template這個標籤。

<div id="app">
<ul>
    <template  v-for="i in productList">
      <li class="border" v-if="i.price>30">{{i.name}}//{{i.price}}//{{i.unit}}</li>
    </template>

</div>    

這邊要注意的是，需要template包住li 因為如果是li包template的情況下，會出現空白行的情況，原因是li的數量等於productList的資料數，又因為v-if的原因使templat不會被顯示，所以就只剩下空的li，如果是template包住li因為template在html不代表任何意思所以內部為空，不會渲染在畫面上。
[範例 v-if](https://codepen.io/efzdamnp-the-lessful/pen/yLPyqba?editors=1111)

const app = Vue.createApp({
data(){
    return{
        productList:[{
             name:"Apple",
             price:50,
             unit:"100kg"
           },{
             name:"Orange",
             price:35,
             unit:"100kg"
           },{
             name:"Watermelon",
             price:25,
             unit:"100kg"
           }]}
  },
    }
app.mount("#app")

### 3.3 v-if 與 v-show 的區別
v-if 與 v-show 最大的區別就在dom元素存不存在畫面上，沒有達到v-if條件的dom元素，不會存在畫面，沒有達到v-show條件會存在畫面但是是以display:none 形式存在。

### 4.1 v-bind
是屬性綁定，縮寫為:，常用於html標籤內的屬性綁定
#### 4.1.1 scr與title
用於img內的屬性與資料綁定。

<div id='app'>
    <img :src="imgUrl" :title="titleInfo" alt="">
    </div>

const app = Vue.createApp({
data(){
    return{
    imgUrl:'https://upload.cc/i1/2021/12/09/94D8vq.jpg',
    titleInfo:"打到風之力超爽Der",
       }
  },
    }
app.mount("#app")

#### 4.1.2 disable

<div id='app'>
    你的貓咪現在{{catPlaySatus? "不想玩":"想玩"}}
<button type="button" @click="changeCatStatus()">改變貓咪狀態</button>
  <select name="cat" id="cat">
    <option value="不想玩" :disabled="catPlaySatus? false:true">不想玩</option>
    <option v-for="item in catPlaythings" :key="item" value="item" :disabled="catPlaySatus">{{item}}</option>
  </select>
    </div>

const app = Vue.createApp({
data(){
    return{
        catPlaySatus:true,
      catPlaythings:["球","逗貓棒","玩偶","紙板"],
       }
  },
methods:{
    changeCatStatus(){
      this.catPlaySatus = !this.catPlaySatus
    },
}
    }
app.mount("#app")

#### 4.1.3 v-bind與v-for一起使用

<div id='app'>
   <ul>
    <li  v-for="item in diableItems" :key="item"> <img class="imgSize":src="item.url" alt=""><label :for="item.name">{{item.name}}</label><input type="checkbox" :id="item.name"></li>
  </ul>
    </div>

const app = Vue.createApp({
data(){
    return{
         diableItems: [
        {
          name: "風之力",
          url: "https://upload.cc/i1/2021/12/09/94D8vq.jpg"
        },
        {
          name: "貝",
          url: "https://upload.cc/i1/2022/02/06/nMIKtu.jpg"
        },
        {
          name: "羅",
          url: "https://upload.cc/i1/2022/02/06/OuCDEF.png"
        }
      ],
       }
  },
}
    }
app.mount("#app")

#### 4.1.4 表達式運用-串接

<div id='app'>
    <input v-model="inputrange" type="range" max="1500" nim="100"> {{inputrange}}
  <img :src="`${productimg}&w=${inputrange}`" alt="">
    </div>

const app = Vue.createApp({
data(){
    return{
        inputrange:200,
      productimg:"https://images.unsplash.com/photo-1600182610361-4b4d664e07b9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&q=80",
       }
  },
    }
app.mount("#app")

#### 4.1.5 動態屬性綁定

<div id='app'>
    改變狀態
  <button type="button" @click="dynamic=dynamic==='disabled'? 'readonly':'disabled'">{{dynamic}}</button>
  
 <input type="text" value="咚咚" :[dynamic] 
    </div>

const app = Vue.createApp({
data(){
    return{
        dynamic:'disabled',
       }
  },
    }
app.mount("#app")

#### 4.1.6 元件使用屬性綁定傳遞資料
[Vue的元件化(施工中)](https://hackmd.io/2k17WOjQQvWDb6WKvamG0A)
簡單的範例如下 :data這個用v-bind綁定的屬性可以當作是把資料傳入元件的通道而後面的"sendInToComponent"是要傳入的資料。

<div id='app'>
<list :data="sendInToComponent"></list>
</div>

const app = Vue.createApp({
data(){
    return{
        sendInToComponent:'我是外面的資料',
       }
  },
    };
app.component('list',{
     data(){
    return{
        text:"我是元件"
    }
},
    props:["data"],
    template:`{{text}}//{{data}}`
                          });                         
app.mount("#app")

### 4.2 v-bind 樣式綁定
class的v-bind可以使用物件或是陣列，在物件時的key是樣式樣式名稱，value為true或false
#### 4.2.1 以物件綁定

<div id='app'>
<div class="box" :class={blueBG:true}></div>
</div>

const app = Vue.createApp({
data(){
    return{
        
       }
  },
    };
                        
app.mount("#app")

下面的css在4.2.1-4.2.11以下都需要使用後面就不重複貼了。

.box{
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  background: red;
  margin-bottom: 30px;
  transition:  all 1s;
}
.blueBG{
  background: blue;
}
.box-rotate{
  transform: rotate(45deg);
}

#### 4.2.2 以陣列綁定

<div id='app'>
<div class="box" :class=['blueBG']></div>
</div>

#### 4.2.3 多種樣式寫法-物件
如果class名稱有-則在物件的key要轉為字串才不會出錯，多個樣式名稱只要以，區隔。

<div id='app'>
<div class="box" :class={blueBG:true,'box-rotate':true}></div>
</div>

#### 4.2.4 多種樣式寫法-陣列

<div id='app'>
<div class="box" :class={blueBG:true,'box-rotate':true}></div>
</div>

#### 4.2.5 物件寫法的樣式可以值綁定變數
true與false可以綁定變數

<div id='app'>
<div class="box" :class={blueBG:bgBlue,'box-rotate':isRotate}></div>
  <button type="button" @click="bgBlue=!bgBlue;isRotate=!isRotate">變形</button>
</div>

const app = VuecreatApp({
    data(){
        return{
      bgBlue:true,
      isRotate:true,
        }
    },
    methods:{
        
    }
})
app.mount('#app')

#### 4.2.6 物件樣式寫法-2
把樣式整理到data內，注意物件內key有-需要全部轉成字串

<div id='app'>
<div class="box" :class="boxStyle"></div>
</div>

const app = VuecreatApp({
    data(){
        return{
      boxStyle:{
        blueBG:true,
        'box-rotate':true
      }
        }
    },
    methods:{
        
    }
})
app.mount('#app')

#### 4.2.7 以陣列樣式寫法-2
把樣式整理到data內，注意物件內key有-需要全部轉成字串

<div id='app'>
<div class="box" :class="boxStyleArr"></div>
</div>

const app = VuecreatApp({
    data(){
        return{
       boxStyleArr:['blueBG','box-rotate'],
        }
    },
    methods:{
        
    }
})
app.mount('#app')

#### 4.2.8 使用陣列改變樣式

<div id='app'>
 <div class="box" :class="boxStyleArr2"></div>
  <button type="button" @click="addboxStyle(['blueBG','box-rotate'])">變形</button>
</div>

const app = VuecreatApp({
    data(){
        return{
      boxStyleArr2:[],
        }
    },
    methods:{
        
    }
})
app.mount('#app')

#### 4.2.9 行內樣式寫法-1 物件
1.v-bind的style寫法與class不同，物件的key為style的屬性，value為style的值。
2.在物件的key中如果sytle的樣式屬性有-則-後的英文改為大寫，即為駝峰式命名 例如background-color改為backgroundColor。
3.物件的value改為style的值但要寫成字串 例如blue改為'blue'

<div id='app'>
<div class="box" :style="{backgroundColor:'green',transform:'rotate(45deg)'}"></div>
</div>

#### 4.2.10 行內樣式寫法-2 物件樣式寫在data

<div id='app'>
<div class="box" :style="boxStyleObj"></div>
</div>

const app = VuecreatApp({
    data(){
        return{
      boxStyleObj:{
        backgroundColor:"green",
        transform:"rotate(45deg)"
      },
        }
    },
    methods:{
        
    }
})
app.mount('#app')

#### 4.2.11 行內樣式寫法-3 陣列寫法
雖然陣列寫法但是原始的style是以物件的形事寫在data內

<div id='app'>
<div class="box" :style="[boxStyleObj2,boxStyleObj3]"></div>
</div>

const app = VuecreatApp({
    data(){
        return{
       boxStyleObj2:{
        backgroundColor:"green"
      },
      boxStyleObj3:{
        transform:"rotate(45deg)"
      }
        }
    },
    methods:{
        
    }
})
app.mount('#app')
### 5.1 v-model
v-model是html標籤與資料做雙向綁定，其中一個資料變動，另一個也會跟著變動。

<div id='app'>
<input type="text" v-model="string">
{{string}}
</div>

const app = Vue.createApp({
data(){
return{
string:"abc"}
},
}
app.mount("#app")

#### 5.1.1 v-model的checkbox單選框應用

<div id='app'>
<input type="checkbox" v-model="isCheck"> <label for="">點我
</label> <p>{{isCheck ? '我被點了':'我沒被點'}}</p>

</div>

const app = Vue.createApp({
data(){
return{
isCheck:true,
}
},
}
app.mount("#app")

#### 5.1.2 v-model的checkbox單選框應用 使用true-value與false-value

<div id='app'>
<input type="checkbox" v-model="isCheck2" true-value="我被點了" false-value="我沒被點"><label for="">點我
</label><p>{{isCheck2}}</p>

</div>

const app = Vue.createApp({
data(){
return{
isCheck2:''
}
},
}
app.mount("#app")

#### 5.1.3 v-model的checkbox 複選應用
可以把checkbox的值透過v-model，儲存到isCheck3陣列中，這邊多選要使用陣列作為存放value的容器，如果使用''則會只存true ane false 而且全部的checkbox會一起出現被點選或不被點選的錯誤情況。

<div id='app'>
<input type="checkbox" v-model="isCheck3" value="Apple">
<label for="">Apple</label>
<input type="checkbox" v-model="isCheck3" value="Lemon">
<label for="">Lemon</label>
<input type="checkbox" v-model="isCheck3" value="Orange">
<label for="">Orange</label>
{{showIsCheck3}}

</div>

const app = Vue.createApp({
data(){
return{
isCheck3:[]
}
},
computed:{
showIsCheck3(){
let result = '我選的是';
this.isCheck3.forEach((item)=>{
result+= `${item} `;
})
return result
},
}
}
app.mount("#app")

#### 5.2.4 v-model的radio應用
因為是radio，所以與v-model雙向綁定data的資料只要使用字串。

<div id="app">
<input type="radio" v-model="radioAns" value="水餃" id="水餃" name="food">
<label for="水餃">水餃</label>
<input type="radio" v-model="radioAns" value="蛋餅" id="蛋餅" name="food">
<label for="蛋餅">蛋餅</label>
<input type="radio" v-model="radioAns" value="水煎包" id="水煎包" name="food">
<label for="水煎包">水煎包</label>
{{showRadio}}
</div>

const app = Vue.createApp({
data(){
return{

}
},
computed:{
showRadio() {
let result = "";
if (this.radioAns === "") {
result = "還沒選要吃甚麼";
} else if (this.radioAns !== "") {
result=`你選的是${this.radioAns}`;
}
return result;
}
}
})
app.mount('#app')

#### 5.2.5 v-model的select應用 單選

在Vue中 v-model需要寫在select標籤，才會把option的value雙向綁定，如果需要default或是預先選擇的話value可以與綁定資料相同，或是在生命週期created
時使資料v-model綁定的資料與option中的value相同。
v-for 是需要寫在option中。

<div id='app'>
<select v-model="selectAns">
<option value='' disabled selected>請選擇運送方式</option>
<option :value="item" v-for="item in transferData" >{{item.transferWay}}</option>
</select>
{{showSelect}}

</div>

const app = Vue.creatApp({
data(){
return{
selectAns: "",
transferData: [
{ transferWay: "Land Transfer", price: 500, transferTime: "50hours" },
{ transferWay: "Air Transfer", price: 2500, transferTime: "10hours" },
{ transferWay: "Shipping", price: 85, transferTime: "150hours" }
]
}
},
computed:{
showSelect() {
let result = "";
if (this.selectAns === "") {
result = "尚未選擇運送方式";
} else {
result = `你選擇的是${this.selectAns.transferWay}，價格為${this.selectAns.price}，運送時間為${this.selectAns.transferTime}`;
}
return result;
}
}
})
app.mount('#app')

#### 5.2.6 v-model的select應用 多選

<div id="app">
<select v-model="selectedPets" multiple>
<option disabled >請選擇傭有的寵物</option>
<option :value="item" v-for="item in ownPets" :key="item.type">{{item.type}}</option>
</select>
{{showPet}}
</div>

const app =Vue.createApp({
data(){
return{
selectedPets:[],
ownPets:[{
type:'dog',
num:5,
},{
type:'cat',
num:4,
},{
type:'bird',
num:2,
},]
}
},
computed:{
showPet(){
let result = '';
if(this.selectedPets.length===0){
result = '尚未選擇寵物類別';
}else{
result = '所選寵物類別為'
this.selectedPets.forEach((item)=>{
result += ` ${item.type}，數量為${item.num}`
})
}
return result;
}
},
})
app.mpunt('#app')

### 5.2 v-model修飾符
修飾符的目的在於對v-model所雙向綁定的資料作出調整，在v-model加上.修飾符，例如v-model.lazy

#### 5.2.1 lazy
lazy修飾符是在資料change狀態時才會更新至資料中。

<div id="app">
<input type="text" v-model.lazy="moldifier1Data">
{{moldifier1Data}}
</div>

const app = VuecreateApp({
data(){
return{
moldifier1Data:'',
}
}
})
app.mount('#app')

#### 5.2.2 number
number修飾符是把v-model資料轉為number型別的修飾符，要注意需要與type="number"一起使用才能確定輸入的資料型別為number，如果type="text"則可以輸入string這個時候所輸入的資料型別是字串。

<div id="app">
<input type="number" v-model.number="moldifier2Data">
{{moldifier2Data}} {{typeof moldifier2Data}}
</div>

const app = VuecreateApp({
data(){
return{
moldifier2Data:0,
}
}
})
app.mount('#app')

#### 5.2.3 trim
將資料前後空白刪除的修飾符。

<div id="app">
<input type="text"v-model.trim="moldifier3Data" >
{{moldifier3Data}}
</div>

const app = VuecreateApp({
data(){
return{
moldifier3Data:'',
}
}
})
app.mount('#app')

#### 5.2.4 修飾符可以一起使用-1 
number與lazy一起使用。

<div id="app">
<input type="number" v-model.number.lazy="moldifier4Data">
{{moldifier4Data}}
</div>

const app = VuecreateApp({
data(){
return{
moldifier4Data:0,
}
}
})
app.mount('#app')

#### 5.2.5 修飾符可以一起使用-2
trim與lazy一起使用。

<div id="app">
<input type="text" v-model.trim.lazy="moldifier5Data">
{{moldifier5Data}}
</div>

const app = VuecreateApp({
data(){
return{
moldifier5Data:'',
}
}
})
app.mount('#app')

### 6.1 v-on
v-on就是以事件(滑鼠事件/或是鍵盤事件/DOM事件等..)與方法綁定，並控制資料或畫面。
v-on可以縮寫為@
##### 6.1.1 click

<div id="app">
<div class="box" :class="{blueBG:bgBlue,'box-rotate':isRotate}"></div>
</div>

本css在6.1.2也會用到。

.box{
width: 100px;
height: 100px;
border: 1px solid #000;
background: red;
margin-bottom: 30px;
transition: all 1s;
}
.blueBG{
background: blue;
}
.box-rotate{
transform: rotate(45deg);
}

const app = VuecreateApp({
data(){
return{
bgBlue:true,
isRotate:true,
}
}
})
app.mount('#app')

##### 6.1.2 帶入參數

<div id="app">
<div class="box" :class="{blueBG:bgBlue,'box-rotate':isRotate}"></div>
<button type="button" @click="change(isRotate,bgBlue)">change</button>
</div>

const app = VuecreateApp({
data(){
return{

}
}
})
app.mount('#app')

##### 6.1.3 DOM原生事件-change
change要input內容有改變才會觸發

<div id="app">
<input type="text" @change="showChangeEvent()">
</div>

const app = VuecreateApp({
data(){
return{

}
},
methods:{
showChangeEvent(){
alert('觸發change')
},
}
})
app.mount('#app')

##### 6.1.3 DOM原生事件-submit
submit功能可以不用透過click觸發提交表單，要注意要加prvent這個修飾符是因為不觸發原生post標單功能，而是觸發自己寫的submitForm()

<div id="app">
<form action="" @submit.prevent="submitForm()">
<input type="text"><button>點我</button>
</form>
</div>

const app = VuecreateApp({
data(){
return{

}
},
methods:{
submitForm(){
alert('標單已提交')
},
}
})
app.mount('#app')

##### 6.1.4 動態事件 陣列

<select name="" id="" v-model="event">
<option value="click">click</option>
<option value="change">change</option>
</select>

<input type="text" @[event]="showEvent()">

const app = VuecreateApp({
data(){
return{
event:"click"
}
},
methods:{
showEvent(){
alert(`現在事件是${this.event}`)
},
}
})
app.mount('#app')

##### 6.1.5 動態事件 物件
用物件帶入的方法無法傳入參數，如果參數會出錯，所帶入的方法會無法執行

<div id="app">
<button class="box" @="{
mousedown:down,
mouseup:up
}"></button>
</div>

const app = VuecreateApp({
data(){
return{

}
},
methods:{
down(){
console.log("mousedown")
},
up(){
console.log("mouseup")
}
}
})
app.mount('#app')

### 6.2 v-on修飾符
v-on修飾符分為三大類，鍵盤修飾符、滑鼠修飾符、事件修飾符。
簡單的來說就是在v-on:事件加上.修飾符；例如@keyup.enter="方法" 就是在input改變資料後需要按下enter鍵才會觸發方法。
#### 6.2.1 鍵盤修飾符
別名修飾符.enter, .tab, .delete, .esc, .space, .up, .down, .left, .right

<div id="app">
別名修飾符
<input type="text" v-model="vonModifiers" @keyup.enter="active('enter別名修飾符')">
相應鍵修飾符
可以另外加上.ctrl, .alt, .shift, .meta與別名修飾符組合成相應件修飾符
<input type="text" v-model="vonModifiers" @keyup.enter.ctrl="active('相應鍵修飾符')" >
特定案件修飾符
<input type="text" v-model="vonModifiers" @keyup.a="active('特定鍵修飾符')">
</div>

javascript會在 6.2.1-6.2.3之後都會使用，就不重複貼上。

const app =Vue.creatApp({
data(){
return{

}
},
methods:{
active(data){
console.log(`${data}觸發了`)
},
}
})

#### 6.2.2 滑鼠修飾符

<div id="app">
<button style="width:50px; height:50px; border:1px solid black; background:red" @click.right="active('right滑鼠修飾符')"></button>
</div>

#### 6.2.3 事件修飾符
1.  .stop - 調用 event.stopPropagation()
2.  .prevent - 調用 event.preventDefault() 常使用的修飾符
3.  .capture - 添加事件偵聽器時使用 capture 模式
4.  .self - 只當事件是從偵聽器綁定的元素本身觸發時才觸發回調。
5.  .once - 只觸發一次回調。
     

<div id="app">
冒泡事件
<div style="height:100px; width:300px;background:green;display:flex; align-items:center" @click="active('div')">
<div class="box" style="height:75px;width:75px; margin:0 auto; background:blue; display:flex; justify-content:center; align-items:center" @click="active('box')">
<button @click="active('button')">click</button>
</div>
</div>
stop修飾符
防止向外尋找，範例把stop修飾符放在box上，點擊button後只會出發到box而已，最外層的div不會觸發
<div style="height:100px; width:300px;background:green;display:flex; align-items:center" @click="active('div')">
<div class="box" style="height:75px;width:75px; margin:0 auto; background:blue; display:flex; justify-content:center; align-items:center" @click.stop="active('box')">
<button @click="active('button')">click</button>
</div>
</div>
capture修飾符
capture是由外而內查找，原本預設為由內而外。
<div style="height:100px; width:300px;background:green;display:flex; align-items:center" @click.capture="active('div')">
<div class="box" style="height:75px;width:75px; margin:0 auto; background:blue; display:flex; justify-content:center; align-items:center" @click.capture="active('box')">
<button @click.capture="active('button')">click</button>
</div>
</div>
self修飾符
只會觸發自己。
<div style="height:100px; width:300px;background:green;display:flex; align-items:center" @click.self="active('div')">
<div class="box" style="height:75px;width:75px; margin:0 auto; background:blue; display:flex; justify-content:center; align-items:center" @click.self="active('box')">
<button @click.self="active('button')">click</button>
</div>
</div>

once修飾符
只會觸發一次的修飾符，可以與self capture stop修飾符一起使用。
<div style="height:100px; width:300px;background:green;display:flex; align-items:center" @click.self.once="active('div')">
<div class="box" style="height:75px;width:75px; margin:0 auto; background:blue; display:flex; justify-content:center; align-items:center" @click.self.once="active('box')">
<button @click.self.once="active('button')">click</button>
</div>
</div>
</div>

#### 6.2.4 v-on DOM事件補充

<div id="app">
沒有參數時
沒有參數時會，所綁定的方法會預設event
<button type="button" value="你點到我了" @click="buttonActive">click</button>
有參數時
有參數時，需要增加$event作為事件參數
<button type="button" value="你點到我了" @click="buttonActive2('我是參數',$event)">click</button>
取得input數值(不靠v-model)
<input type="text" @keyup="showInputInfo" >
按鍵監聽事件
<input type="text" @keyup="showKeyCode" >
</div>

const app =Vue.creatApp({
data(){
return{
}
},
methods:{
buttonActive(e){
console.log(e.target.value)
},
buttonActive2(parameter,e){
console.log(parameter,e.target.value)
},
showInputInfo(e){
console.log(e.target.value)
},
showKeyCode(e){
console.log(e.keyCode)
},

}
})