Vue第一部分(3)：事件绑定与标签属性赋值
1.事件綁定：v-on指令
?基本使用
在Vue中通過 v-on 指令給頁面元素綁定事件。 語法： v-on:事件名="js代碼片段或函數" //事件名=事件屬性-on 比如：click=onclick-on//函數必須定義在Vue示例的methods屬性中。 const vm = new Vue({el:"選擇器",methods:{//定義事件處理函數函數名:function(){//函數實現}} })?示例代碼
<div id="app"><h1 v-if="show"><span style="color:green">show=true</span></h1><h1 v-else><span style="color:red">show=false</span></h1><!-- 直接使用函數名即可 --><button v-on:click="handleClick">點我</button> </div> <script>const vm = new Vue({el:"#app",data:{show:true},methods:{//注意事件處理函數必須定義在methods中handleClick:function(){this.show=!this.show;//data中的屬性，在函數中可以直接this.訪問}}}) </script>事件綁定還有簡寫語法：
@事件名="js代碼片段或函數"const vm = new Vue({el:"選擇器",methods:{//定義事件處理函數:直接定義函數，甚至無需function關鍵字函數名(){...}} })示例代碼
<div id="app"><h2>num={{num}}</h2><!-- 事件處理函數代碼簡單時，可以直接在事件綁定處寫代碼 --><button @click="num++">自增</button><button @click="decrement">自減</button> </div> <script>const vm = new Vue({el:"#app",data:{num:1},methods:{/*increment:function(){this.num--;}*///methods定義函數還可以有如下簡寫形式 函數名(){}increment(){this.num--;}}}) </script>?事件修飾符
在事件處理函數中調用 event.preventDefault() 禁用標簽的默認行為或event.stopPropagation() 停止事件冒泡是非常常見的需求。
<div id="app"><a href="https://www.baidu.com" @click="handleClick">點我</a> </div> <script>const vm = new Vue({el:"#app",methods:{handleClick(event){alert("被單擊了");event.preventDefault();//禁用超鏈接的默認點擊跳轉}}}) </script>盡管我們可以在方法中輕松實現這點，但更好的方式是：方法只有純粹的數據邏輯，而不是去處理 DOM 事件細節。為了解決這個問題，Vue.js 為 v-on 提供了事件修飾符。之前提過，修飾符是由點開頭的指令后綴來表示的。
-
.stop ：阻止事件冒泡
-
.prevent ：阻止默認事件發生，比如超鏈接的默認跳轉、表單的提交（重點）
-
.self ：只有元素自身觸發事件才執行。（子元素的事件冒泡來的不執行）
-
.once ：只執行一次
2.標簽屬性的賦值：v-bind指令
?基本使用
有時，我們需要動態的修改標簽的屬性值，看如下需求：動態修改div的class屬性值
<head><style type="text/css">.red_bg{background-color: red;}.green_bg{background-color: green;}</style> </head> <body><div id="app"><!-- 這里意圖通過插值表達式動態獲取class_name的值，但是失敗了 --><div class="{{class_name}}">點擊按鈕改變背景樣式:{{class_name}}</div><button @click="class_name='red_bg'">紅色</button><button @click="class_name='green_bg'">綠色</button></div><script>const vm = new Vue({el:"#app",data:{class_name:""}})</script> </body>無法直接在標簽的屬性中使用插值表達式動態的設置標簽的屬性值，這時候就需要使用v-bind指令。語法如下：
v-bind:屬性名="Vue中的變量"例如，在這里我們可以寫成：
<div v-bind:class="class_name"></div>不過，v-bind太麻煩，因此可以省略，直接寫成: ，:屬性名="屬性值" ，即：
<div :class="color"></div> 完整示例 <head><style type="text/css">.red_bg{background-color: red;}.green_bg{background-color: green;}</style> </head> <body><div id="app"><div class="{{class_name}}">點擊按鈕改變背景樣式:{{class_name}}</div><div v-bind:class="class_name">點擊按鈕改變背景樣式:{{class_name}}</div><div :class="class_name">點擊按鈕改變背景樣式:{{class_name}}</div><button @click="class_name='red_bg'">紅色</button><button @click="class_name='green_bg'">綠色</button></div><script>const vm = new Vue({el:"#app",data:{class_name:""}})</script> </body>綁定class屬性的對象語法
我們可以傳給 v-bind:class 一個對象，以動態地切換 class：
<div id="app"><div v-bind:class="{red_bg:showRed,green_bg:!showRed}">點擊按鈕改變背景樣式</div><button @click="showRed=true">紅色</button><button @click="shoRed=false">綠色</button> </div> <script>const vm = new Vue({el:"#app",data:{showRed:true}}) </script>v-for時的key屬性
當我們需要更新 v-for 渲染過的元素列表時，比如向數組中添加一個新的元素。為了保證Vue正確并高效的渲染頁面，官方建議我們為每項提供一個唯一 key 屬性，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素。key一般使用在遍歷完后，又增、減數組的元素的時候更有意義。
示例：
<ul><li v-for="(item,index) in items" :key="index"></li> </ul>-
這里使用了屬性賦值語法： :key="index"為每一個生成的元素設置一個唯一的key屬性
-
這里綁定的key是數組的索引，應該是唯一的
總結
以上是生活随笔為你收集整理的Vue第一部分(3)：事件绑定与标签属性赋值的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： centos7远程桌面端口_CentOS
- 下一篇： IDEA集成Scala图文教程详细步骤