1. 修飾符 modifires
修飾符可以幫我們處理一些事件、鍵盤碼、事件源等一些問題
.stop– 阻止默認冒泡、捕獲等(阻止事件傳播) 等於：e.propagation();或者 IE的e.cancelBubble= true;
.capture– 設置捕獲 等於：xxx.addEventListener('click',fn,true);
.prevent– 阻止默認行爲 等於：e.preventDafault() / returnValue = false 阻止默認事件– a標籤，form表單的submit的默認行爲
.once– 只執行一次 等於：on('click') off('click')
.self--判斷事件源綁定事件e.target / e.srcElement-只有點擊自己的時候觸發，不會經過冒泡或捕獲觸發
冒泡 和 捕獲
冒泡:
1.父子關係，例如：點擊grandson元素，會冒泡向上觸發child 和parent的點擊事件
2.阻止冒泡：給孫子添加事件源：e.propagation();或者 IE的e.cancelBubble= true;，vue修飾符：.stop
3. 這個都算是處理事件細節的問題，我們可以使用修飾符
4.不想讓孫子 點擊的時候 冒泡，給孫子加@事件.stop ='fn'
捕獲：和冒泡 相對的是捕獲，默認是冒泡
1. 設置捕獲：二級綁定xxx.addEventListener('click',fn,true);//true 是捕獲， false是冒泡，默認不寫是false-冒泡
2. vue提供修飾符.capture,給父級加@事件.capture = 'fn',這樣點擊子級，它的父級會先捕獲到先執行捕獲和冒泡那個先執行：
正常的點擊孫子按照冒泡一層一層向上走，但若父級捕獲了，點擊孫子會先執行捕獲的父級，然後執行孫子，然後向上冒泡執行沒有捕獲的
定義方法
methods:{
parent(){alert('parent');},
child(){alert('child');},
grandson(){alert('grandson'); }
}
冒泡：默認冒泡，點擊孫子，會一層層向上觸發點擊事件，彈出grandson - child -parent
<div class="parent" @click='parent'>parent
<div class="child" @click='child'>child
<div class="grandson" @click='grandson'>grandson</div>
<!-- 冒泡：點擊孫子，會一層層向上觸發點擊事件，彈出grandson - child -parent-->
</div>
</div>
捕獲：添加修飾符.capture,點擊孫子，會從上到下一層層向下觸發點擊事件，彈出parent- child -grandson
捕獲：添加修飾符`.capture`,點擊孫子，會從上到下一層層向下觸發點擊事件，彈出parent- child -grandson
<div class="parent" @click.capture='parent'>parent
<div class="child" @click.capture='child'>child
<div class="grandson" @click.capture='grandson'>grandson</div>
</div>
</div>
捕獲 和 冒泡：先捕獲，再冒泡；點擊孫子，先執行有捕獲的，然後按冒泡執行沒有捕獲的，彈出parent -grandson -child
捕獲 和 冒泡：點擊孫子，先執行有捕獲的，然後按冒泡執行沒有捕獲的，彈出parent -grandson -child
<div class="parent" @click.capture='parent'>parent
<div class="child" @click='child'>child
<div class="grandson" @click='grandson'>grandson</div>
</div>
</div>
阻止捕獲 或 冒泡（阻止事件傳播）: 點擊孫子，跳出parent，然後就不再傳播了
阻止捕獲 或 冒泡（阻止事件傳播）: 點擊孫子，跳出parent，然後就不再傳播了
<div class="parent" @click.capture.stop='parent'>parent
<div class="child" @click='child'>child
<div class="grandson" @click='grandson'>grandson</div>
</div>
阻止默認行爲
修飾符： .prevent 等於原生的e.preventDafault() / returnValue = false 阻止默認事件，
阻止a標籤默認跳轉行爲，執行click彈出child，還可以阻止form表單中的summit提交按鈕，會自己提交的默認行爲
<a href="http://baidu.com" @click.prevent='child'>1111</a>
2. template
- template標籤是vue提供給我們的，沒有任何實際的意義，用來包裹元素用的
- v-show不支持template,只有v-if 可以放在template標籤上
<div v-if='false'>111</div>
<div v-if='false'>222</div>
<div v-if='false'>333</div>
<div>hello</div>
<template v-if='false'>
<div>111</div>
<div>222</div>
<div>333</div>
</template>
<div>hello</div>
切換標籤：
<button @click='flag = !flag'>切換</button>
<template v-if='flag'>
<label for="">登錄</label>
<input type="text" key='1'>
<!-- 默認情況下再切換dom時相同的結構會被複用，如果不需要複用，需要加key -->
<!-- :key='1' 有冒號，裏面時變量，這是數字1， key='1' 沒有冒號就是字符串1-->
</template>
<template v-else>
<label for="">註冊</label>
<input type="text" key='2'>
</template>
3.動態綁定樣式
v-bind: 動態綁定’屬性’, class 或style 使用兩種方式寫：對象 或 數組
:class = “對象/數組”
class:
:class綁定的樣式 和 class綁定的不衝突 ，:class的值可以是對象或者數組- 對象寫法：
:class="{z:flag,y:true}"注意{}放在“”裏，值true生效- 數組：
:class="[class1,class2,'m']"class1/class2是變量，m不是變量，就是類名
<!-- v-bind: 動態綁定'屬性',class 或style 使用兩種方式寫：對象 或 數組 -->
<div class="font1" :class="flag ? 'red':'' ">111</div>
<!-- :class綁定的樣式 和 class綁定的不衝突 ，:class的值可以時對象或者數組 -->
<div class="font2" :class="{font1:flag,green:true}">222</div>
<div class="font2" :class="{true:'font1 green',false:'blue'}[true]">333</div>
<!-- 對象： :class="{z:flag,y:true}" 注意{}放在“”裏，值true生效 -->
<div :class="[class1,class2,'blue']">444</div>
<div :class="[class1,class2,{red:false}]">555</div>
<!-- 數組： :class="[class1,class2,'m']" class1/class2是變量，m不是變量，就是類名 -->
<hr>
<!-- 隔行換色 -->
<ul>
<li v-for='(a,index) in 10' :class='{red:index%2}'>{{a}}</li>
</ul>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="shortcut icon" href="#" type="image/x-icon">
<style>
.red{
background: red;
}
.blue{
background: blue;
}
.green{
background: green;
}
.font1{
font-weight: 900;
}
.font2{
color:palevioletred;
}
</style>
</head>
<body>
<div id="app">
<!-- v-bind: 動態綁定'屬性',class 或style 使用兩種方式寫：對象 或 數組 -->
<div class="font1" :class="flag ? 'red':'' ">111</div>
<!-- :class綁定的樣式 和 class綁定的不衝突 ，:class的值可以時對象或者數組 -->
<div class="font2" :class="{font1:flag,green:true}">222</div>
<div class="font2" :class="{true:'font1 green',false:'blue'}[true]">333</div>
<!-- 對象： :class="{z:flag,y:true}" 注意{}放在“”裏，值true生效 -->
<div :class="[class1,class2,'blue']">444</div>
<div :class="[class1,class2,{red:false}]">555</div>
<!-- 數組： :class="[class1,class2,'m']" class1/class2是變量，m不是變量，就是類名 -->
<hr>
<!-- 隔行換色 -->
<ul>
<li v-for='(a,index) in 10' :class='{red:index%2}'>{{a}}</li>
</ul>
<!-- ------------style------------ -->
<div style='font-size:18px;' :style="{backgroundColor:'red',color:'#fff'}">style樣式</div>
<div :style="[style1,style1,{fontSize:'14px;'}]">style 222</div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
class1:'font1',
class2:'font2',
style1:{backgroundColor:'blue'},
style2:{color:'green'},
flag:true,
}
})
</script>
</body>
</html>
:style =“對象 / 數組”
- 屬性名要使用小駝峯命名
<div style='font-size:18px;' :style="{backgroundColor:'red',color:'#fff'}">style樣式</div>
<div :style="[style1,style1,{fontSize:'14px;'}]">style 222</div>