一、事件修饰符
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>
