app设计开发团队_企业网站建设规划的基本原则有哪些_槐荫区网络营销seo_如何做好一个品牌推广

文章目录

- 1.案例需求
- 2.编程思路
- 3.案例源码
- 4.小结

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.创建appconst app = Vue.createApp({// data: option apidata: 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.挂载appapp.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 apidata: 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.挂载appapp.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><inputautofocus="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 的更多功能，例如组件化、路由、状态管理等，并开发更复杂的应用程序。