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>
