适合后端程序员的Vue教程_part3_Vue列表渲染和修饰符

v-for的使用

v-for:作用就是用来对对象进行遍历的(数组也是对象的一种)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<div id="app">
<span>{{user.name}} {{user.age}}</span><br>
<!--
通过v-for遍历
-->
<span v-for="(value,key,index) in user">
{{index}} : {{key}} : {{value}}
</span>

<!--
通过v-for遍历数组
-->
<ul>
<li v-for="a,index in arr">
{{index}}:{{a}}
</li>
</ul>

<!--
通过v-for遍历数组中的对象
:key 便于vue内部做重用和排序
-->
<ul>
<li v-for="user,index in users" :key="user.id">
{{index+1}} === {{user.name}} === {{user.age}} === {{user.content}}
</li>
</ul>

</div>

<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
user: {name:"小王",age:25},
arr:[
"炒面",
"炒饭",
"馄饨"
],
users:[
{id:"1",name:"小明", age:27,content:"吃饭时不喜欢说话"},
{id:"2",name:"小红", age:25,content:"能吃五斤馄饨"},
{id:"3",name:"小绿", age:25,content:"能吃八两饺子"}
]
},
methods: {},
components: {}
});
</script>
1
2
总结:
- 使用v-for时注意加入:key用来给vue内部提供重用和排序的唯一key(尤大推荐的做法)

v-model双向绑定

v-model:作用用来绑定标签元素的值与vue实例对象中data数据保持一致,从而实现双向的数据绑定机制

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="app">
<input v-model="message" type="text"><br>
<span>{{message}}</span>
<hr>
<input type="button" value="改变data中的值" @click="changeValue">
</div>

<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message:""
},
methods: {
changeValue() {
this.message = '双向绑定针棒!';
}
},
components: {}
});
</script>
1
2
3
4
5
6
7
8
9
10
总结:

- 使用v-model指令可以实现数据的双向绑定
- 所谓双向绑定,表单中数据变化导致vue实例data数据变化&vue实例中data数据的变化导致表单中数据变化,称之为双向绑定

MVVM架构:双向绑定机制

- Model:数据 vue实例中绑定的数据
- VM:viewModel 监听器
- View:页面 页面展示的数据

事件修饰符

修饰符:用来和事件连用,用来决定事件触发条件或者是阻止事件的触发机制

常用的事件修饰符:

  • .stop
  • .prevent
  • .capture
  • .self
  • .once
  • .passive

stop事件修饰符

用来阻止事件冒泡

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<div id="app">
<div class="aa" @click="divClick">
<!--.stop用来阻止事件冒泡-->
<input type="button" value="按钮" @click.stop="btnClick">
</div>
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {},
methods: {
btnClick() {
alert("button被点击了");
},
divClick() {
alert("div被点击了")
},
aClick() {
alert("a被点击了");
},
btnClick1() {
alert("btn1被点击了");
}
},
components: {}
});
</script>
1
2
总结:
.stop可以阻止事件冒泡,从而使div点击事件不触发

prevent事件修饰符

1
2
<!--.prevent用来阻止事件默认行为-->
<a href="http://www.prchen.com/" @click.prevent="aClick">发记现</a>
1
2
总结:
.prevent阻止事件默认行为,点击后不会跳转超链接url

self事件修饰符

用来针对于当前标签的事件触发=====>只触发自己标签上特定动作的事件,只关心自己标签上触发的事件,不监听冒泡

1
2
3
4
5
6
<!--.self只触发标签自身的事件-->
<div class="aa" @click.self="divClick">
<!--.stop用来阻止事件冒泡-->
<input type="button" value="按钮" @click.stop="btnClick">
<input type="button" value="按钮1" @click="btnClick1">
</div>

once事件修饰符

让指定事件只触发一次

1
2
3
4
5
<!--
.prevent:用来阻止事件默认行为
.once :用来只执行一次特定事件
-->
<a href="http://www.prchen.com/" @click.prevent.once="aClick">发记现</a>

按键修饰符

用来与键盘中按键事件绑定在一起,用来修饰特定的按键事件的修饰符

  • .enter
  • .tab
  • .delete (捕获“删除”和“退格”键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

enter回车键

用来在触发回车按键之后触发的事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div id="app">
<!--
enter 按键修饰符 在回车之后触发的事件
-->
<input type="text" v-model="msg" @keyup.enter="keyUps">
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
msg:""
},
methods: {
keyUps() {
console.log(this.msg);
}
},
components: {}
});
</script>

tab 键

用来捕获到tab键执行到当前标签时才触发

1
<input type="text" @keyup.tab="keyTabs">
0%