网页设计第七周

原创已于 2024-12-08 11:05:24 修改 · 229 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #javascript

于 2024-12-08 10:59:50 首次发布

本周学习vue

<body>
<div id="container">
<h1>{{ title }}</h1>
<span>{{ desc.username }}</span>
<span>{{ desc.password }}</span>
<div>
<li>{{ arr[0] }}</li>
<li>{{arr[1]}}</li>
<li>{{arr[2]}}</li>
</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#container",
data: {
title: "登录",
desc: {
username: "账号：cyk",
password: "密码：111"
},
arr: ["性别", "年龄", "学号"]
}
});
</script>

v-text 中也支持写表达式，例如通过 "+" 进行字符串或 data 的拼接.

v-on 指令就是为元素绑定事件的，也可以将 v-on 简写为 @. 绑定的方法定义在 methods 属性中，方法内部必须通过 this 关键字访问到定义在 data 中的数据.
常用绑定如下：
v-on:click="方法"：点击事件.
v-on:dblclick="方法"：双击事件.
v-on:monseenter="方法"：鼠标移入事件.
也可以简写为：
@click="方法"：点击事件
@dblclick="方法"：双击事件.
@monseenter="方法"：鼠标移入事件.

用来对键盘按键事件进行修饰，例如 keyup（按下键盘立即触发），keydown（抬起键盘立即触发）.
语法如下：
@按键事件按键修饰符="事件处理函数"

例如：@keyup.enter="test"
主要有以下修饰符：
.enter：对键盘回车键修饰.
.tab：对键盘切换 tab 按键修饰.
.delete：捕获 "删除" 和 "退格" 键.
.esc：对键盘的 esc 按键修饰.
.space：捕获空格按键.
.up：上.
.down：下.
.left：左.
.right：右.

案例：实现一个计数器

需求：
点击加1 按钮，计数器 +1；
点击减1 按钮，计数器 -1.
计数器上限为 10，下限为 0.
代码如下：
<body>

<div id="app">
<h1 v-text="num"></h1>
<input type="button" value="减1" @click="sub">
<input type="button" value="加1" @click="add">
<div>
<input type="button" value="双击归零" @dblclick="ret">
</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data: {
num: 0
},
methods: {
sub: function () {
if (this.num > 0) {
this.num--;
} else {
alert("当前以及是最小值了!");
return;
}
},
add: function () {
if (this.num < 10) {
this.num++;
} else {
alert("当前以及是最大值了!");
return;
}
},
ret: function () {
this.num = 0;
}

}
});
</script>
</body>

效果如下：