vue入门小练习
1.案例需求
- 一个简易的计算器，其效果如下：
- 图片切换，其效果如下：
- 简易记事本，其效果如下：
2.编程思路
1.这个Vue.js应用实现了一个简单的计算器，包含输入两个数值（通过v-model.number绑定为数字类型）、选择运算方式（加、减、乘、除），并有一个计算按钮。点击按钮后，通过sum方法根据所选运算方式计算结果，并将结果显示在页面上。Vue的响应式特性确保了输入变化时界面即时更新，同时利用计算属性sumplus展示了Vue计算属性的用法。整体通过Vue应用实例的创建、挂载以及与DOM的交互完成。
2.这是一个基于Vue.js的图片轮播程序。首先定义了一个Vue实例，其中包含图片的URL和图片编号。通过绑定点击事件，实现了点击左箭头时显示上一张图片，点击右箭头时显示下一张图片的功能。图片编号在0到10之间循环，当编号小于10时，图片URL中的编号前补0，以保持文件名的统一格式。最后，将Vue实例挂载到页面中的指定元素上。
3.这是一个基于Vue.js的简易记事本应用。程序定义了一个Vue实例，包含一个任务列表tasks和一个输入消息msg。用户在输入框中输入任务并按下回车时，down方法被触发，将输入的任务添加到任务列表中，并清空输入框。列表区域通过v-for指令渲染任务列表，每个任务都有一个删除按钮，点击时触发del方法删除对应任务。底部有一个统计任务数量的显示和一个清空所有任务的按钮，点击清空按钮时触发Clear方法，将任务列表清空。最后，Vue实例被挂载到页面中的#todoapp元素上。
3.案例源码
第一题源代码：
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<input type="text" v-model.number="num1" />
<select v-model="cal">
<option value="jia">+</option>
<option value="jian">-</option>
<option value="cheng">*</option>
<option value="chu">/</option>
</select>
<input type="text" v-model.number="num2" />
= {{sumplus}}
<!-- {{sum()}} -->
<!-- {{result}} -->
<button @click="sum">计算</button>
</div>
<script type="text/javascript" src="../js/vue.global.js"></script>
<script>
// 1.创建app
const app = Vue.createApp({
// data: option api
data: function () {
return {
message: "Hello Vue",
num1: "",
num2: "",
cal: "jia",
result: "",
};
},
methods: {
/* sum() {
if (this.cal == "jia") {
return this.num1 + this.num2;
} else if (this.cal == "jian") {
return this.num1 - this.num2;
} else if (this.cal == "cheng") {
return this.num1 * this.num2;
} else {
return this.num1 / this.num2;
}
}, */
sum() {
if (this.cal == "jia") {
this.result = this.num1 + this.num2;
} else if (this.cal == "jian") {
this.result = this.num1 - this.num2;
} else if (this.cal == "cheng") {
this.result = this.num1 * this.num2;
} else {
this.result = this.num1 / this.num2;
}
return this.result;
},
},
computed: {
sumplus() {
if (this.cal == "jia") {
return this.num1 + this.num2;
} else if (this.cal == "jian") {
return this.num1 - this.num2;
} else if (this.cal == "cheng") {
return this.num1 * this.num2;
} else {
return this.num1 / this.num2;
}
},
},
});
// 2.挂载app
app.mount("#app");
</script>
</body>
</html>
2.第二题源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>图片切换</title>
<link rel="stylesheet" href="./css/index.css" />
</head>
<body>
<div id="mask">
<div class="center">
<h2 class="title">
<img src="" alt="" />
</h2>
<!-- 图片 -->
<img v-bind:src="url" alt="" />
<!-- 左箭头 -->
<a href="javascript:void(0)" class="left">
<img src="./images/prev.png" alt="" v-on:click="pre" />
</a>
<!-- 右箭头 -->
<a href="javascript:void(0)" class="right">
<img src="./images/next.png" alt="" v-on:click="next" />
</a>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript" src="../../js/vue.global.js"></script>
<script>
const app = Vue.createApp({
// data: option api
data: function () {
return {
url: "./images/00.jpg",
num: 0,
};
},
methods: {
pre() {
this.num--;
if (this.num < 0) {
this.num = 0;
}
this.url = `./images/0${this.num}.jpg`;
},
next() {
this.num++;
if (this.num >= 10) {
this.num = 10;
this.url = `./images/${this.num}.jpg`;
} else {
this.url = `./images/0${this.num}.jpg`;
}
},
},
});
// 2.挂载app
app.mount("#mask");
</script>
</body>
</html>
3、第三题源代码：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>小度记事本</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="googlebot" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="./css/index.css" />
</head>
<body>
<!-- 主体区域 -->
<section id="todoapp">
{{tasks}}
<!-- 输入框 -->
<header class="header">
<h1>小度记事本</h1>
<input
autofocus="autofocus"
autocomplete="off"
placeholder="请输入任务"
class="new-todo"
v-model="msg"
@keydown.enter="down"
/>
</header>
<!-- 列表区域 -->
<section class="main">
<ul class="todo-list">
<li class="todo" v-for="(task,index) in tasks">
<div class="view">
<span class="index">{{index+1}}</span> <label>{{task}}</label>
<button class="destroy" @click="del(index)"></button>
</div>
</li>
</ul>
</section>
<!-- 统计和清空 -->
<footer class="footer">
<span class="todo-count">
<strong>{{tasks.length}}</strong> items left
</span>
<button class="clear-completed" @click="Clear">Clear</button>
</footer>
</section>
<!-- 底部 -->
<footer class="info"></footer>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript" src="../js/vue.global.js"></script>
<script>
const app = Vue.createApp({
data: function () {
return {
tasks: [],
msg: "",
};
},
methods: {
down() {
this.tasks.push(this.msg);
this.msg = "";
},
del(index) {
console.log(index);
this.tasks.splice(index, 1);
},
Clear() {
this.tasks = [];
},
},
});
app.mount("#todoapp");
</script>
</body>
</html>
4.小结
主要用到的知识点如下：
- 数据绑定: 使用 v-model 实现双向数据绑定，将用户输入和应用程序状态连接起来。
- 事件处理: 使用 @click等指令处理用户交互事件，例如点击按钮、按键操作等。
- 条件渲染: 虽然文档中没有明确展示，但可以通过 v-if、v-else等指令实现根据条件渲染不同的内容。
- 列表渲染: 使用 v-for 指令遍历数据并渲染列表，例如图片切换中的图片列表和记事本中的任务列表。
- 计算属性: 在计算器应用中使用了计算属性 sumplus，根据输入值和运算符自动计算结果，体现了 Vue.js 响应式的特性。
通过学习这些案例，可以进一步探索 Vue.js 的更多功能，例如组件化、路由、状态管理等，并开发更复杂的应用程序。
原文地址：https://blog.csdn.net/wu1113_/article/details/142426274
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！