1.v-on的基本使用
<div id="app">
<!-- 使用事件綁定的簡寫形式 -->
<input type="button" value="按鈕" v-on:click="btn">
</div>
<script>
var vm = new Vue({
el: '#app',
//methods是用來專門存放vue的處理方法的
methods: {
btn: function () {
alert('123');
}
}
});
</script>
我們在的的時侯v-on是可以縮寫成@的，例如上邊的可以縮寫成:@:chick="btn"。
在Vue中，其他的事件都可以用v-on綁定
2.事件修飾符
在事件處理程序中調用 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求。盡管我們可以在方法中輕松實現這點，但更好的方式是：方法只有純粹的數據邏輯，而不是去處理 DOM 事件細節。
為了解決這個問題，Vue.js 為 v-on 提供了事件修飾符。之前提過，修飾符是由點開頭的指令后綴來表示的。
使用修飾符 阻止瀏覽器的默認行為
<div id="app">
<a href="http://www.qq.com" v-on:click.prevent="btn">騰訊</a>
</div>
<script>
var vm = new Vue({
el: '#app',
methods: {
btn: function () {
alert('123');
}
}
});
</script>
使用修飾符綁定一次性事件
<div id="app">
<a href="http://www.qq.com" v-on:click.once="btn($event)">騰訊</a>
</div>
<script>
var vm = new Vue({
el: '#app',
methods: {
btn: function (ev) {
ev.preventDefault();
alert('123');
}
}
});
</script>
$event是原始的DOM事件：有時也需要在內聯語句處理器中訪問原始的 DOM 事件。可以用特殊變量 $event 把它傳入方法：
按鍵修飾符:
<div id="app">
<input type="text" v-on:keyup.enter="keyup">
</div>
<script>
var vm = new Vue({
el: '#app',
methods: {
keyup:function(){
console.log('111')
}
}
});
</script>
鼠標修飾符:鼠標左鍵觸發事件
<div id="app">
<input type="button" value="按鈕" v-on:click.left="btn">
</div>
<script>
var vm = new Vue({
el: '#app',
methods: {
btn:()=>{
console.log('111')
}
}
});
</script>
你可能注意到這種事件監聽的方式違背了關注點分離 (separation of concern) 這個長期以來的優良傳統。但不必擔心，因為所有的 Vue.js 事件處理方法和表達式都嚴格綁定在當前視圖的 ViewModel 上，它不會導致任何維護上的困難。實際上，使用 v-on 有幾個好處：
-
掃一眼 HTML 模板便能輕松定位在 JavaScript 代碼里對應的方法。
-
因為你無須在 JavaScript 里手動綁定事件，你的 ViewModel 代碼可以是非常純粹的邏輯，和 DOM 完全解耦，更易於測試。
3.當一個 ViewModel 被銷毀時，所有的事件處理器都會自動被刪除。你無須擔心如何清理它們。
3.v-show的指令：
<body>
<div id="app">
<input type="button" value="按鈕" v-on:click="change">
<p v-show="is_show">秀兒，是你嗎</p>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
is_show: false,
},
methods: {
change: function () {
this.is_show = !this.is_show;
}
}
});
</script>
4.v-if的指令：
<body>
<div id="app">
<input type="text" id="" v-model="type">
<div v-if="type === 'A'">我是A</div>
<div v-else-if="type === 'B'">我是B</div>
<div v-else-if="type === 'C'">我是C</div>
<div v-else-if="type === 'D'">我是D</div>
<div v-else>我什么也不是</div>
</div>
</body>
<script>
var app = new Vue({
el:'#app',
data:{
type:''
}
});
</script>
5.v-for的指令：
<body>
<div id="app">
<!-- 數組 -->
<ul>
<!-- v-for 循環的語法規則可以參考 js 的 for in 循環 -->
<li v-for="(v,key) in arr">{{v}}---{{key}}</li>
</ul>
<!-- 對象 -->
<ul>
<li v-for="(v,k) in oop">{{v}}----{{k}}</li>
</ul>
</div>
</body>
<script>
// for(cc in arr)
var app = new Vue({
el:'#app',
data:{
arr:['ff','hh','jj','gg','ll'],
oop:{name:'張三',age:30,sex:'男'}
}
});
</script>
6.v-once:的指令：
<body>
<div id="app">
<!-- 只渲染一次數據 不再是數據單項綁定 這是單次綁定 -->
<p v-once>{{msg}}</p>
</div>
</body>
<script>
var app = new Vue({
el:'#app',
data:{
msg:'123'
}
});
</script>