25.项目day06
2024-04-21 08:09:20
2 课堂案例练习
2.1 事件操作
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>VUE中事件学习</title></head><body><div id="app"><h1 v-text="num"></h1><br><button v-on:click="num++">自增</button><!-- 简化操作 --><button @click="num++">自增</button><!-- VUE中调用函数方法 --><button @click="addNum">方法自增</button><button @click="addNum2">方法自增</button></div><script src="../js/vue.js"></script><script>const app = new Vue({el: "#app",data: {num: 1},methods: {//key: valueaddNum: function(){this.num++},//方法的简化操作addNum2(){this.num = this.num + 2//this.num += 2} }})</script></body>
</html>2.2 按键修饰符
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>事件修饰符</title></head><body><div id="app"><!-- 事件冒泡:如果事件有嵌套关系, 执行完成内部事件之后,执行外部事件.这种现象称之为事件冒泡.1.阻止事件冒泡:语法:1.v-on:click.stop="xxx"2.@click.stop--><div @click="addNum2"><h3>{{num}}</h3><button @click.stop="addNum">增1</button></div><hr /><!-- 2.阻止默认行为 如果需要阻止标签的默认的行为 则添加 @click.prevent--><div><h3>阻止默认行为</h3><a href="http://www.baidu.com" @click.prevent="baidu">百度</a></div><hr /><div><h3>特殊按键字符说明</h3><!-- 需求:要求用户按回车键出发 事件函数 .enter .tab .delete (捕获“删除”和“退格”键).esc .space .up .down .left .right-->回车键触发: <input name="username" type="text" v-on:keyup.enter="handler"/> <br>删除键触发: <input name="age" type="text"v-on:keyup.delete="handler"/> <br>space键触发: <input name="sex" type="text"@keyup.space="handler"/> <br><!-- tab有效 使用keydown操作 -->tab键触发: <input name="sex" type="text"@keydown.tab="handler"/></div></div><script src="../js/vue.js"></script><script>const app = new Vue({el: "#app",data: {num: 1},methods: {addNum(){this.num++},addNum2(){this.num = this.num + 2},baidu(){console.log("点击百度的按钮")},handler(){console.log("函数被执行")}}})</script></body>
</html>2.3 计算器练习
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>计算器练习</title></head><body><div id="app"><!-- 要求:输入完B之后,回车键触发计算 加法操作 -->数据A: <input type="text" v-model="num1" />数据B: <input type="text" v-model="num2" @keyup.enter="addNum"/>总数: <span v-text="count"></span></div><script src="../js/vue.js"></script><script>const app = new Vue({el: "#app",data: {num1: '',num2: '',count: ''},methods: {addNum(){//parseInt() 将字符串转化为数值this.count = parseInt(this.num1) + parseInt(this.num2) }}})</script></body>
</html>2.4 属性绑定
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>属性绑定案例</title><!-- 定义样式 --><style>.red {background-color: chocolate;color: red;font-size: 20px;}</style></head><body><div id="app"><h3>v-bind学习</h3><!-- 1.入门案例 --><a href="http://www.baidu.com">百度</a><br><!-- 属性绑定语法 --><a v-bind:href="url">百度-vue1</a><br><!-- 简化操作 --><a :href="url">百度-vue2</a><hr /><h3>类型绑定</h3><!-- 需求: 控制red是否展现 --><div class="red">aaaaaa</div><!-- vue的语法: {red类型名称: 布尔类型数据}{red: true} red样式展现{red: false} red样式不展现--><div :class="{red: flag}">bbbbb</div><!-- 在vue中可以进行简单的数据计算 --><button @click="flag = !flag">切换</button><!-- 小结: v-on 事件处理 函数定义v-bind 事件绑定 class style--></div><script src="../js/vue.js"></script><script>const app = new Vue({el: "#app",data: {url: "http://www.baidu.com",flag: true},methods: {}})</script></body>
</html>2.5 分支结构
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>分支结构</title></head><body><div id="app"><!-- 分支语法说明v-if 如果条件为真,则展现数据v-else-if if与else中间的判断v-else 一般与v-if同时出现 v-else不能单独出现 --> <h1>根据分数评级</h1>用户考试成绩: <input type="text" v-model="score"/><br>等级:<!-- 如果从多个数据中挑选一个时 使用v-if判断 --><span v-if="score>=90">优秀</span> <span v-else-if="score>=80">良</span><span v-else-if="score>=70">中</span><span v-else-if="score>=60">及格</span><span v-else>不及格</span></div><script src="../js/vue.js"></script><script>const app = new Vue({el: "#app",data: {score: 0},methods: {}})</script></body>
</html>2.6 循环结构
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>循环结构</title></head><body><div id="app"><!-- vue中的循环 v-for1.循环获取数据的内容2.可以循环复制标签参数说明:item: 变量名称 名称任意in: 关键字 固定写法array: 要遍历的数据--><h1 v-for="item in array">{{item}}</h1><hr /><!-- v-for语法2: 获取数据/下标 --><h1 v-for="(item,index) in array">{{item}}++++++{{index}}</h1><hr /><!-- 循环遍历集合信息 --><div v-for="item in userList"><p>ID号:{{item.id}}</p><p>名称:{{item.name}}</p></div><hr /><!-- 如果直接遍历对象,则输出的value值 参数说明: 1.value 对象的值 2.对象的key 3.数据的下标--><div v-for="(value,key,index) in user"><span v-text="key"></span>---<span v-text="value"></span>---<span v-text="index"></span></div></div><script src="../js/vue.js"></script><script>const app = new Vue({el: "#app",data: {array: ["安琪拉","孙悟空","诸葛亮"],userList: [{id: 100,name: "鲁班七号"},{id: 200,name: "铠"},{id: 300,name: "瑶"}],//定义user对象user: {id: 200,name: "貂蝉",age: 18}},methods: {}})</script></body>
</html>2.7 表单数据提交
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>表单数据</title></head><body><div id="app"><!-- 1.定义表单 练习form标签与vue对象形成数据绑定--><form action="http://www.baidu.com">用户名: <input type="text" v-model="user.username"/><br>用户详情: <textarea v-model="user.info"></textarea><br><!-- 定义下拉框 --><select name="book" v-model="user.book"><option value="java编程思想">java编程思想</option><option value="java疯狂讲义">java疯狂讲义</option><option value="java技术卷">java技术卷</option></select><br><!-- 单选框练习 name名称相同 -->性别: <input type="radio" value="男" name="gender" v-model="user.gender"/> 男<input type="radio" value="女" name="gender"v-model="user.gender"/> 女<br><!-- 多选框练习 值有多个 数组接收 -->爱好: <input type="checkbox" name="hobby" value="吃"v-model="user.hobby"/>吃<input type="checkbox" name="hobby" value="喝"v-model="user.hobby" />喝<!-- 阻止标签的默认行为 采用其他方式提交 --><input type="submit" value="提交" @click.prevent="addForm"/></form></div><script src="../js/vue.js"></script><script>const app = new Vue({el: "#app",data: {user: {username: '',info: '',book: 'java技术卷',gender: '女',hobby: ["吃"]}},methods: {addForm(){console.log("input标签:"+this.user.username)console.log("文本域标签:"+this.user.info)}}})</script></body>
</html>
/*** URL: http://localhost:8090/servlet?id=100&name=tomcat* @return* request: 用户提交请求时的请求头信息.* response: 服务器响应用户的数据封装的对象*/@RequestMapping("/servlet")public String servlet(HttpServletRequest request, HttpServletResponse response){//servlet动态接收参数 所有的数据都是String数据类型String id = request.getParameter("id");int idInt = Integer.parseInt(id);String name = request.getParameter("name");//SpringMVC将上述的操作封装return null;}@RequestMapping("/servlet")public String servlet(Integer id,String name){return null;}
25.项目day06相关推荐
- #边学边记 必修5 高项:对人管理 第2章 项目沟通管理和干系人管理 2-5 项目干系人管理
导学 重要知识点:干系人分析,干系人分类.分析技术.项目干系人管理过程的输入.工具与技术.输出等.下午的案例题可能会涉及与项目干系人管理知识点相关的简答题. 干系人管理的过程 1. 识别干系人 识别能 ...
- 21/4/25 项目二：客户信息管理软件
1.创建CMUtility工具类 package com.aiguigu.p2.util;import java.util.*; /***CMUtility工具类*将不同的功能封装为方法,就是可以直接 ...
- CGB2009-京淘项目DAY06
1.商品详情设计 1.1 商品详情表设计说明 1.2 编辑ItemDesc POJO对象 1.3 富文本编辑器 1.3.1 入门案例 富文本编辑器效果 1.4 重构商品的新增 1.4.1 编辑Item ...
- raspberry pi_尝试8个有趣的Raspberry Pi项目
raspberry pi 对于我们中的许多人来说,2016年过去了,我们还没有完成新年的所有决议,也没有将所有事情标记在" 2016年待办事项"列表中. 今年我没有足够的时间来玩R ...
- 【项目】 基于BOOST的站内搜索引擎
目录 1. 简介 建立搜索引擎的宏观体系 技术栈和项目环境 正排索引 and 倒排索引 2. 数据去标签与数据清洗模块 -- Parser 数据去标签 parser.cc parser.cc 的代码结 ...
- python项目之杠子老虎鸡虫
python项目之杠子老虎鸡虫 本项目我们尝试用Python语言设计一个计算机程序来模拟"杠子老虎鸡虫"游戏.程序的文件名称为HitChopsticks.py,程序将使用impor ...
- Java实战项目开发视频教程分享
第01项目 oa_赵庆轩(有代码) 2018-09-02 14:30:49 第02项目:CRM客户关系管理项目(两套) 2018-09-02 14:30:48 第03项目:宅急送项目 201 ...
- mysql数据库技术与项目李锡辉_《MySQL数据库技术与项目应用教程 李锡辉 ,王樱 9787115474100 人》李锡辉，王樱著【摘要 书评 在线阅读】-苏宁易购图书...
商品参数 作者: 李锡辉,王樱著 出版社:人民邮电出版社 出版时间:人民邮电出版社 版权提供:人民邮电出版社 基本信息 书名:MySQL数据库技术与项目应用教程 定价:45.00元 作者:李锡辉 ,王 ...
- commvault备份mysql数据库_CommVault备份项目实施方案.docx
仅供XXXX和CommVault所有 XXXX CommVault集中备份项目实施方案 CommVault 中国咨询服务部 TIME \@ "yyyy年M月" 2017年10月 版 ...
最新文章
- 协防差_西班牙男篮的投篮比美国还差 为什么在2019年世界杯夺冠
- SpringMVC无法获取请求中的参数的问题的调查与解决(1)
- 利用partial快乐驱动开发
- 前后端分离模式下的权限设计方案
- ISO13485 相关
- C++学习基础三——迭代器基础
- ttl接地是高电平还是低电平_功放技术参数1——高电平
- cdn需要备案吗_cdn需要备案么
- 程序员怎样获取更多的劳动收入
- Linux输入子系统：事件的编码 -- event-codes.txt
- 选择开还是关 pxe_商用披萨（53）开披萨店是选择加盟还是自创品牌呢？
- 云计算入门科普系列：基于Docker部署LNMP架构
- centos7查看路由的命令_centos7系统设置***客户端及查看设置路由表router
- android studio 2.2.3 ndk 添加 C 和 C++ 代码
- Rtsp之H265解析
- PHP报错Warning: Unknown: Input variables exceeded 1000
- Swift4-有妖气漫画精仿框架部分
- 手机APP测试，个人整理（Android和IOS）
- asp.net pdf如何转换成tif_PDF如何转换成PPT格式？PDF转PPT软件使用方法分享
- 【 力扣（LeetCode）刷题详细介绍】