一、事件修饰符
1、.stop 阻止冒泡事件
- 给谁加了阻止冒泡事件，谁下面的盒子就不会执行了
<div id="app"><div class="parent" @click="log3"><div class="child" @click="log2"><button @click.stop="log1">我是按钮</button> // 输出1111</div></div>
</div>
<script>let vm = new Vue({el: "#app",data: {},methods: {log1() { console.log(11111111111); },log2() { console.log(222222222222); },log3() { console.log(3333333333); }},})
</script>
2、.capture 添加事件捕获
- 给谁加捕获事件，谁先触发
<div id="app"><div class="parent" @click="log3"><div class="child" @click.capture="log2"> //先输出22222 然后 1111 33333<button @click="log1">我是按钮</button> </div></div></div>
3 、.self 点击他的时候触发
- 只有在点击的时候才可以触发
<div id="app"><div class="parent" @click="log3">//点击2 触发222 333<div class="child" @click.self="log2"><button @click="log1">我是按钮</button>//点击1 触发 111 333</div></div>
</div>
4、.once只触发一次
<div id="app"><div id="one" @click="one"><!-- 给two盒子的点击事件添加.once修饰符 --><div id="two" @click.once="two"><div id="three" @click="three"></div></div></div>
</div>
<script>let vm = new Vue({el: "#app",data: {},methods: {one() { console.log('单击one盒子了'); },two() { console.log('单击two盒子了'); },three() { console.log('单击three盒子了'); }}})
</script>
5、.prevent 阻止默认事件
<div id="app"><!-- 给链接标签的点击事件添加.prevent修饰符 --><a href="#" @click.prevent="tap">点击链接</a>
</div>
<script>let vm = new Vue({el: "#app",data: {},methods: {tap() {console.log('阻止默认事件');}}})
</script>
二、v-model 数据双向绑定（表单控件）
- 原理：通过数据劫持结合订阅模式的方式来实现的，通过
Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。 - 指令
v-model
<div id="app"><input type="text" v-model:value=first> + <input type="text" v-model:value=second> <button @click="add">=</button> <input type="text" v-model:value=result>
</div>
<script>let vm = new Vue({el: "#app",data: {first: '',second: '',result: ''},methods: {add() {// 获取到的input框的value值都是字符串类型this.result = Number(this.first) + Number(this.second)}}})
</script>
三、样式的使用
<style>.red { color: red; }.fs30 { font-size: 30px; }</style>
1、class（4钟）
数组
<body><div id="app"><div :class="[class1,class2]">字体30px、红色字</div><!-- 等价于 --><div class="red fs30">字体30px、红色字</div></div>
</body>
<script>let vm = new Vue({el: "#app",data: {class1: 'red',class2: 'fs30'},methods: {}})
</script>
三目表达式
<div id="app">
<!-- age=10 满足age<18 所以class=class1 --><div :class="age<18?class1:class2">未成年人</div>
<!-- 等价于 --><div :class="age<18?'red':'fs30'">未成年人</div>
</div>
<script>let vm = new Vue({el: "#app",data: {age: 10,class1: 'red',class2: 'fs30'},methods: {}})
</script>
对象
<div id="app"><div :class="{red:true}">显示红色字体</div><div :class="{'red':true}">显示红色字体</div><div :class="{'red':flag}">显示红色字体</div><div :class="{'red':'flag'}">显示红色字体</div>
</div>
<script>let vm = new Vue({el: "#app",data: {flag: true},methods: {}})
</script>
数组内置对象
<div id="app"><div :class="[{red:true},{fs30:flag}]">红色字体、字号30px</div><div :class="[{'red':flag},{fs30:'flag'}]">红色字体、字号30px</div>
</div>
<script>let vm = new Vue({el: "#app",data: {flag: true},methods: {}})
</script>
2、style(3钟)
对象
<div id="app"><div :style=style1>红色字体</div><div :style=style2>字号30px、字体加粗</div></div>
<script>let vm = new Vue({el: "#app",data: {style1: 'color:red',style2: {fontSize: "30px","font-weight": 700}},methods: {}})
</script>
数组内置对象
<div id="app"><div :style='[style1,style2]'>红色字体、字号30px、字体加粗</div></div>
<script>let vm = new Vue({el: "#app",data: {style1: {'color': 'red'},style2: {fontSize: "30px","font-weight": 700}},methods: {}})
</script>
函数返回值
<body><div id="app"><div :style='getStyle()'>字号30px、字体红色</div></div>
</body>
<script>let vm = new Vue({el: "#app",data: {},methods: {getStyle() {return {color: 'red',fontSize: "30px",}}}})
</script>
3、v-for
遍历数组
<body><div id="app"><!-- item：数组的每一项 index：数组的索引（索引从0开始） --><div v-for="(item,index) in list" :key="item">{{item}}</div></div>
</body>
<script>let vm = new Vue({el: "#app",data: {list: [ 1, 2, 3, 4 ]},methods: {}})
</script>
遍历对象
<body><div id="app"><!-- value：值 key：键 index：索引 --><div v-for="(value,key,index) in obj" :key="value">{{value}}</div></div>
</body>
<script>let vm = new Vue({el: "#app",data: {obj: {name1: '小明',name2: '小红',name3: '小花',name4: '小亮',}},methods: {}})
</script>
遍历数字
<div v-for="num in 10">{{num}}</div>
- key
- 必须是唯一值
- 必须是数字或者字符串
- 作用：提高重排效率，就地复用
4、v-if 和 v-show
- 相同点：都可以进行元素的隐藏
- 不同点：
- v-if：通过删除DOM元素进行隐藏，v-show通过
display:none;进行隐藏
- v-if：通过删除DOM元素进行隐藏，v-show通过
- 应用场景：
- v-show：用于少次的切换，v-show应用于频繁的切换
<div id="app"><div v-if="isShow">v-if，变量为布尔值，为true才渲染Dom</div><div v-show="isShow">v-show，变量为布尔值，为true才渲染Dom</div><div v-if="false">v-if通过删除dom元素来实现</div><div v-show="false">v-show是设置display:none来实现</div><!-- v-if可以和v-else-if、v-else 一起结合使用，但是中间不能加dom内容 --><!-- age=35，满足age<30 显示青年 --><div v-if="age<18"> 少年</div><div v-else-if="age<30"> 青年</div><div v-else-if="age<60"> 中年</div><div v-else> 老年</div>
</div>
<script>let vm = new Vue({el: "#app",data: {isShow: true,age: 35},methods: {}})
</script>
