Table of contents
1. Today’s learning goals
1. Instruction supplement
- directive modifier
- v-bind operation on style enhancement
- v-model applied to other form elements
2. Instruction modifiers
1. What are instruction modifiers?
The so-called instruction modifier refers to specifying some instruction suffixes through "." . Different suffixes encapsulate different processing operations—> Simplify the code
2.Key modifier
- @keyup.enter —>Only triggered when the enter key is clicked, the keyboard presses Enter to monitor
Code demo:
<div id="app">
<h3>@keyup.enter → 监听键盘回车事件</h3>
<input v-model="username" type="text">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
username: ''
},
methods: {
}
})
</script>
3.v-model modifier
- v-model.trim —>Remove the first space
- v-model.number —>convert to number
4. Event modifiers
- @eventname.stop —> prevent bubbling
- @eventname.prevent —>Prevent default behavior
- @Event name.stop.prevent —>Can be used together to prevent event bubbling and prevent default behavior
<style>
.father {
width: 200px;
height: 200px;
background-color: pink;
margin-top: 20px;
}
.son {
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
<div id="app">
<h3>v-model修饰符 .trim .number</h3>
姓名：<input v-model="username" type="text"><br>
年纪：<input v-model="age" type="text"><br>
<h3>@事件名.stop → 阻止冒泡</h3>
<div @click="fatherFn" class="father">
<div @click="sonFn" class="son">儿子</div>
</div>
<h3>@事件名.prevent → 阻止默认行为</h3>
<a @click href="http://www.baidu.com">阻止默认行为</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
username: '',
age: '',
},
methods: {
fatherFn () {
alert('老父亲被点击了')
},
sonFn (e) {
// e.stopPropagation()
alert('儿子被点击了')
}
}
})
</script>
3. Enhancement of style control by v-bind - operation class
In order to facilitate developers to control styles, Vue has extended the syntax of v-bind, which can control the class name and style inline style .
1. Grammar:
<div> :class = "对象/数组">这是一个div</div>
2. Object syntax
When a class is dynamically bound to an object , the key is the class name and the value is a Boolean value . If the value is true , there is this class, otherwise there is no such class.
<div class="box" :class="{ 类名1: 布尔值, 类名2: 布尔值 }"></div>
Applicable scenarios: a class name, switching back and forth
3. Array syntax
When the class is dynamically bound to an array → all classes in the array will be added to the box, which is essentially a class list
<div class="box" :class="[ 类名1, 类名2, 类名3 ]"></div>
Usage scenario: Add or delete classes in batches
4. Code practice
<style>
.box {
width: 200px;
height: 200px;
border: 3px solid #000;
font-size: 30px;
margin-top: 10px;
}
.pink {
background-color: pink;
}
.big {
width: 300px;
height: 300px;
}
</style>
<div id="app">
<!--绑定对象-->
<div class="box">程序员</div>
<!--绑定数组-->
<div class="box">程序员</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
}
})
</script>
4. Jingdong flash sale - tab bar switching navigation highlight
1. Requirements:
When we click on a tab, that tab will be highlighted.
2. Prepare the code:
<style>
* {
margin: 0;
padding: 0;
}
ul {
display: flex;
border-bottom: 2px solid #e01222;
padding: 0 10px;
}
li {
width: 100px;
height: 50px;
line-height: 50px;
list-style: none;
text-align: center;
}
li a {
display: block;
text-decoration: none;
font-weight: bold;
color: #333333;
}
li a.active {
background-color: #e01222;
color: #fff;
}
</style>
<div id="app">
<ul>
<li><a class="active" href="#">京东秒杀</a></li>
<li><a href="#">每日特价</a></li>
<li><a href="#">品类秒杀</a></li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
list: [
{
id: 1, name: '京东秒杀' },
{
id: 2, name: '每日特价' },
{
id: 3, name: '品类秒杀' }
]
}
})
</script>
3. Ideas:
1. Based on data, dynamically render tabs (v-for)
2. Prepare a subscript to record which tab is highlighted.
3. Dynamically switch the class name of the class based on the subscript
5. v-bind enhances style control - operating style
1. Grammar
<div class="box" :style="{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }"></div>
2. Code practice
<style>
.box {
width: 200px;
height: 200px;
background-color: rgb(187, 150, 156);
}
</style>
<div id="app">
<div class="box"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
}
})
</script>
3. Progress bar case
<style>
.progress {
height: 25px;
width: 400px;
border-radius: 15px;
background-color: #272425;
border: 3px solid #272425;
box-sizing: border-box;
margin-bottom: 30px;
}
.inner {
width: 50%;
height: 20px;
border-radius: 10px;
text-align: right;
position: relative;
background-color: #409eff;
background-size: 20px 20px;
box-sizing: border-box;
transition: all 1s;
}
.inner span {
position: absolute;
right: -20px;
bottom: -25px;
}
</style>
<div id="app">
<div class="progress">
<div class="inner">
<span>50%</span>
</div>
</div>
<button>设置25%</button>
<button>设置50%</button>
<button>设置75%</button>
<button>设置100%</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
}
})
</script>
6. Use of v-model in other form elements
1.Explanation content:
Common form elements can be bound using v-model → quickly get or set the value of the form element
It will automatically select the correct method to update the element based on the control type
输入框 input:text ——> value
文本域 textarea ——> value
复选框 input:checkbox ——> checked
单选框 input:radio ——> checked
下拉菜单 select ——> value
...
2. Code preparation
<style>
textarea {
display: block;
width: 240px;
height: 100px;
margin: 10px 0;
}
</style>
<div id="app">
<h3>小黑学习网</h3>
姓名：
<input type="text">
<br><br>
是否单身：
<input type="checkbox">
<br><br>
<!--
前置理解：
1. name: 给单选框加上 name 属性 可以分组 → 同一组互相会互斥
2. value: 给单选框加上 value 属性，用于提交给后台的数据
结合 Vue 使用 → v-model
-->
性别:
<input type="radio">男
<input type="radio">女
<br><br>
<!--
前置理解：
1. option 需要设置 value 值，提交给后台
2. select 的 value 值，关联了选中的 option 的 value 值
结合 Vue 使用 → v-model
-->
所在城市:
<select>
<option>北京</option>
<option>上海</option>
<option>成都</option>
<option>南京</option>
</select>
<br><br>
自我描述：
<textarea></textarea>
<button>立即注册</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
}
})
</script>
