Java实训第八天——2023.6.14

news2024/11/25 20:12:06

文章目录

  • 一、vue的环境搭建：
  • 二、文本数据绑定
  • 三、属性数据绑定
  • 四、事件绑定
  • 五、案例1——全选/全不选
  • 六、案例2——切换图片
        • 主要内容： v-if 、v-show指令
  • 七、表单数据绑定
  • 八、综合练习
        • 总结步骤：

一、vue的环境搭建：

官方文档：https://v2.cn.vuejs.org/v2/guide/index.html

1.将vue.min.js复制到js中：
在这里插入图片描述

2.在demo01.html中，引入js

<script src="./js/vue.min.js"></script>

3.将官方文档复制到demo01.html中
在这里插入图片描述

demo01.html代码如下：

<!DOCTYPE html>
<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>vue环境搭建</title>
  </head>
    
  <body>
    <div id="app">
      {{ message }}
    </div>
  </body>
</html>
<script src="./js/vue.min.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })
</script>

4.出现如下结果，则环境搭建成功！
在这里插入图片描述

二、文本数据绑定

html代码如下：

<!DOCTYPE html>
<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>文本数据绑定</title>
  </head>
  <body>
    <div id="app">
          <div>单个变量: {{message}} </div>
          <ul>普通数组:
              <li v-for="(city,index) in citys":key = "index">
                {{city}}
              </li>
          </ul>
          <div>单个对象： 姓名: {{person.name}}    --- 年龄:{{person.age}}   </div>
          <ul>对象数组
              <li v-for="(person,index) in persons":key="index">
              编号: {{person.id}}  姓名: {{person.name}}  --- 年龄:  {{person.age}}
            </li>
          </ul>
    </div>
  </body>
</html>
<script src="./js/vue.min.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: "hello vue!",
      citys: ["深圳", "广州", "兰州"],
      person: {
        name: "张三",
        age: 18,
      },
      persons: [
        { id:1,name: "张三", age: 18 },
        { id:2,name: "李四", age: 19 },
        { id:3,name: "王五", age: 19 },
      ],
    }
  })
</script>

运行结果：
在这里插入图片描述

三、属性数据绑定

html代码如下:

<!DOCTYPE html>
<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>属性数据绑定</title>
  </head>
  <body>
    <div id="app">
      <!-- 属性是不能写{{}}的 -->
      <img :src="imgObj.imgSrc" alt="" id="imgObj.id" /> 
    </div>
  </body>
</html>
<script src="./js/vue.min.js"></script>
<script>
  var app = new Vue({
  el: '#app',
  data: {  
    imgObj: {
        imgSrc: "./img/girl1.jpg",
        id: 1001,
      },
  }
})
</script>

运行结果如下：
在这里插入图片描述

四、事件绑定

<!DOCTYPE html>
<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>事件绑定</title>
    <style>
      #d1 {
        width: 300px;
        height: 300px;
        background-color: red;
      }
      #d2 {
        width: 300px;
        height: 300px;
        background-color: black;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div :id="color"></div>
      <input type="button" value="改变DIV背景颜色" @click="test01"/>
      <input type="button" value="测试有参数的方法" @click="test02(100)"/>
    </div>
  </body>
</html>
<script src="./js/vue.min.js"></script>
<script>
  var app = new Vue({
  el: '#app',
  data: {
    color:"d1"
  },
  methods:{
    test01(){
        this.color=(this.color == "d1"?"d2":"d1");
    },
    test02(num){
      console.log(num);
    }
  }
})
</script>

运行结果：

五、案例1——全选/全不选

代码如下：

<!DOCTYPE html>
<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>案例-全选全不选</title>
</head>

<body>
  <div id="root">
    <input type="checkbox" name="love" id="" value="cf" :checked="state"/>吃饭
    <input type="checkbox" name="love" id="" value="sj" :checked="state"/>睡觉
    <input type="checkbox" name="love" id="" value="sw" :checked="state"/>上网
    <input type="checkbox" name="love" id="" value="ddd" :checked="state"/>打豆豆
    <button @click="xz">选择</button>
  </div>
</body>

</html>
<script src="./js/vue.min.js"></script>
<script>
  var app = new Vue({
    el: "#root", //绑定DOM根元素
    data: {
      state: false
    },
    methods: {
      xz(){
        this.state = (this.state==true?false:true);
      },
    },
  });
</script>

初始页面：
在这里插入图片描述

点击选择后：
在这里插入图片描述
再点一次选择：
在这里插入图片描述

六、案例2——切换图片

主要内容： v-if 、v-show指令

最初版本可：Java实训第七天——四、DOM对象属性的操作案例

代码如下：

<!DOCTYPE html>
<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>案例2-切换图片</title>
  </head>
  <body>
    <div id="root">
      <button @click="prev" v-show="index>0">上一张</button>
      <button @click="next" v-if="index<7">下一张</button>        
      <br />
      <img :src="mvImg[index]" alt="" style="width: 200px; height: 400px" />
    </div>
  </body>
</html>
<script src="./js/vue.min.js"></script>
<script>
  var app = new Vue({
  el: '#root',
  data: {
    index:0,
    mvImg: ["./img/girl1.jpg", "./img/girl2.jpg", "./img/girl3.jpg", "./img/girl4.jpg",
     "./img/girl5.jpg", "./img/girl6.jpg", "./img/girl7.jpg", "./img/girl8.jpg"]
  },
  methods:{
    prev(){
      this.index--;
    },
    next(){
      this.index++;
    }
  },
})
</script>

七、表单数据绑定

代码如下：

<!DOCTYPE html>
<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>表单数据绑定</title>
</head>

<body>
  <div id="root">
    账号:
    <input type="text" name="username" v-model="userForm.username" />
    <br />
    密码：<input type="password" name="userpass" id="" v-model="userForm.userpass" />
    <br />
    性别：<input type="radio" name="sex" id="" value="M" v-model="userForm.sex" />男
    <input type="radio" name="sex" id="" value="F" v-model="userForm.sex" />女
    <br />
    爱好:<input type="checkbox" name="love" id="" value="cf" v-model="userForm.love" />吃饭
    <input type="checkbox" name="love" id="" value="sj" v-model="userForm.love" />睡觉
    <input type="checkbox" name="love" id="" value="sw" v-model="userForm.love" />上网
    <input type="checkbox" name="love" id="" value="ddd" v-model="userForm.love" />打豆豆
    <br />
    籍贯:
    <select name="city" id="city" v-model="userForm.city">
      <option value="深圳">深圳</option>
      <option value="广州">广州</option>
      <option value="长勺">长勺</option>
    </select>
    <br />
    备注：<textarea name="remark" id="remark" cols="30" rows="10" v-model="userForm.remark"></textarea>
    <br />
    注册的数据:
    <div> {{info}} </div>
    <div> {{info2}} </div>
    <button @click="reg">注册</button>
  </div>
</body>

</html>
<script src="./js/vue.min.js"></script>
<script>
  var app = new Vue({
    el: "#root", //绑定DOM根元素
    data: {
      info: undefined,
      info2:undefined,
      userForm: {
        username: undefined,
        userpass: undefined,
        sex: undefined,
        love: [],
        city: undefined,
        remark: undefined,
      }
    },
    methods: {
      reg() {
        this.info = this.userForm.username + "," + this.userForm.userpass + "," + this.userForm.sex 
        + "," + this.userForm.love + "," + this.userForm.city + "," + this.userForm.remark
        //console.log(this.userForm.love);
      }
    },
  });
</script>

初始页面：
在这里插入图片描述
运行结果：
在这里插入图片描述

八、综合练习

总结步骤：

  1. v-for渲染数据到表格和下拉框
  2. 添加功能
    2.1 准备 form对象 并在标签中用v-model绑定
    2.2 添加点击事件 利用js中数组的api push方法完成添加
  3. 删除功能
    3.1 删除按钮绑定事件并传入下标（要删除的数据的下标）
    3.2 方法中利用js中数组的api splice完成删除
  4. 优化表格显示
    添加一个tr 用v-show判断数组长度

代码如下：

<!DOCTYPE html>
<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>学生信息维护</title>
</head>

<body>
  <div id="app">
    学号: <input type="text" v-model="studentForm.stuid"/> 
    姓名:<input type="text" v-model="studentForm.stuname"/> 
    年龄:<input type="number" v-model="studentForm.age"/>
    邮箱:<input type="email" v-model="studentForm.email"/> 
    所属班级:<select v-model="studentForm.classname">
      <option v-for="(c,index) in classes":key="index">
        {{c.classname}}
      </option>
    </select>
    <button @click="saveStudent">添加</button>
    <br />
    <br />
    <table width="400" border="1" cellspacing="0">
      <tr>
        <th>序号</th>
        <th>学号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>邮箱</th>
        <th>所属班级</th>
        <th>操作</th>
      </tr>

      <tr v-for="(student,index) in students":key="index" v-show="students.length>0">
        <th>{{index+1}}</th>
        <th>{{student.stuid}}</th>
        <th>{{student.stuname}}</th>
        <th>{{student.age}}</th>
        <th>{{student.email}}</th>
        <th>{{student.classname}}</th>
        <th><button @click="deleteStudent(index)">刪除</button></th>
      </tr>
      <tr v-show="students.length==0">
        <td colspan="7" align="center">暂无数据</td>
      </tr>
    </table>
  </div>
</body>

</html>
<script src="./js/vue.min.js"></script>
<script>
  var app = new Vue({
    el: "#app",
    data: {
      studentForm:{
        stuid:undefined,
        stuname: undefined,
        age: undefined,
        email: undefined,
        classname: undefined,
      },
      classes: [
        { classid: 1, classname: "st0730" },
        { classid: 2, classname: "st0731" },
      ],
      students: [
        {
          stuid: 1001,
          stuname: "张三",
          age: "10",
          email: "aaa@qq.com",
          classname: "st0730",
        },
        {
          stuid: 1002,
          stuname: "李四",
          age: "15",
          email: "bbb@qq.com",
          classname: "st0731",
        },
        {
          stuid: 1003,
          stuname: "王五",
          age: "23",
          email: "ccc@qq.com",
          classname: "st0731",
        },
      ],
    },
    methods: {
      deleteStudent(index){
        this.students.splice(index,1);
      },
      saveStudent(){
        let stu = JSON.parse(JSON.stringify(this.studentForm));
        this.students.push(stu);
      }
    },
  });
</script>

运行结果：
在这里插入图片描述
执行添加操作：
在这里插入图片描述
删除操作：
在这里插入图片描述
全部删除时显示：
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/647390.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Mysql数据库中的约束、用户管理与授权

Mysql数据库中的约束、用户管理与授权

文章目录 一、Mysql中常见的约束总结 二、数据表高级操作2.1克隆表&#xff0c;将数据表的数据记录生成到新的表中2.2清空表&#xff0c;删除表内的所有数据2.3创建临时表2.4创建外键约束&#xff0c;保证数据的完整性和一致性。 三、数据库用户管理3.1新建用户3.2查看用户信息…
阅读更多...
《设计模式》之适配器模式

《设计模式》之适配器模式

文章目录 1、定义2、动机3、应用场景4、类结构5、优缺点6、总结7、代码实现(C) 1、定义 把一个类的接口转换成客户端所期待的另一种接口&#xff0c;从而使原接口不匹配而无法再一起工作的两个类能在一起工作。 2、动机 在软件系统中&#xff0c;由于应用环境的变化&#xf…
阅读更多...
Spring源码解密--事务篇

Spring源码解密--事务篇

文章目录 一、事务的实现方式1、JDBC2、Spring基于xml配置编程式事务声明式事务 二、源码设计1、TransactionManager1&#xff09;TransactionManager2&#xff09;PlatformTransactionManager3&#xff09;ReactiveTransactionManager 2、TransactionDefinition3、Transaction…
阅读更多...
压缩感知入门——基于总体最小二乘的扰动压缩感知

压缩感知入门——基于总体最小二乘的扰动压缩感知

压缩感知系列博客&#xff1a;压缩感知入门①从零开始压缩感知压缩感知入门②信号的稀疏表示和约束等距性压缩感知入门③基于ADMM的全变分正则化的压缩感知重构算法 文章目录 1. Problem2. 仿真结果3. MATLAB算法4. 源码地址参考文献 1. Problem 一个经典的压缩感知重构问题可以…
阅读更多...
Git的原理与使用

Git的原理与使用

背景知识&#xff1a; 我们在编写各种文档时&#xff0c;为了防止文档丢失&#xff0c;更改失误&#xff0c;失误后能恢复到原来的版本&#xff0c;不得不复制出一个副本。每个版本有各自的内容&#xff0c;但最终会只有一份报告需要被我们使用 。但在此之前的工作都需要这些不…
阅读更多...
day10_类中成员之变量

day10_类中成员之变量

通过以前的学习&#xff0c;我们知道了成员变量是类的重要组成部分。对象的属性以变量形式存在&#xff0c;下面我们就来详解的学习一下类中的变量 成员变量 成员变量的分类 实例变量&#xff1a;没有static修饰&#xff0c;也叫对象属性&#xff0c;属于某个对象的&#xf…
阅读更多...
9k字长文理解Transformer: Attention Is All You Need

9k字长文理解Transformer: Attention Is All You Need

作者&#xff1a;猛码Memmat 目录 Abstract1 Introduction2 Background3 Model Architecture3.1 Encoder and Decoder Stacks3.2 Attention3.2.1 Scaled Dot-Product Attention3.2.2 Multi-Head Attention3.2.3 Applications of Attention in our Model 3.3 Position-wise Feed…
阅读更多...
Linux 数据库 MySQL

Linux 数据库 MySQL

Linux系统分类 ^ 数据库的分类 Linux系统 Centos(获取软件包使用yum、dnf) Ubuntu(获取软件包使用apt-get) Suse 国产系统 华为 欧拉 阿里 龙蜥 腾讯 tencentOS 麒麟&#xff08;银河麒麟、中标麒麟->基于centos 优麒麟-> 基于Ubuntu &#xff09; 统…
阅读更多...
流计算、Flink和图计算

流计算、Flink和图计算

流计算 流计算流计算概述静态数据和流数据批量计算和实时计算流计算概念流计算与Hadoop流计算框架 流计算处理流程数据处理流程数据实时采集数据实时计算实时查询服务 流计算的应用开源流计算框架StormStorm简介Storm的特点 FlinkFlink简介为什么选择Flink传统数据处理架构大数…
阅读更多...
三年 Android 开发的技术人生，浅谈自身面试的感悟

三年 Android 开发的技术人生，浅谈自身面试的感悟

文章素材来源于网友 本篇主要记录了一个 Android 菜瓜三年的面试之旅&#xff0c;希望对大家面试、跳槽有所帮助。 一些唠叨 从进入这行开始&#xff0c;就是听说Android端凉了&#xff0c;寒冬这又如何那又如何的事情&#xff0c;很多的风言风语缠绕着这个圈子。但是老弟觉得…
阅读更多...
电商系统架构设计系列（三）：关于「订单系统」有哪些问题是要特别考虑的？

电商系统架构设计系列（三）：关于「订单系统」有哪些问题是要特别考虑的？

订单系统是整个电商系统中最重要的一个子系统&#xff0c;订单数据也就是电商企业最重要的数据资产。 上篇文章中&#xff0c;我给你留了一个思考题&#xff1a;当系统在创建和更新订单时&#xff0c;如何保证数据准确无误呢&#xff1f; 今天这篇文章&#xff0c;主要聊一下&…
阅读更多...
DM8:达梦数据库开启SQL日志sqllog

DM8:达梦数据库开启SQL日志sqllog

DM8:达梦数据库开启SQL日志sqllog 环境介绍1 修改配置文件sqllog.ini2 开启与关闭 DMSQLLOG2.1 开启 sql 日志记录功能2.2 查询 sql 日志记录是否开启&#xff1a;0 关闭&#xff0c;1/2/3开启);2.3 关闭 sql 日志记录功能 3 sqllog.ini 详细介绍4 更多达梦数据库使用经验总结 …
阅读更多...
辅助驾驶功能开发-功能算法篇(3)-ACC-弯道速度辅助

辅助驾驶功能开发-功能算法篇(3)-ACC-弯道速度辅助

1、功能架构：ACC弯道速度辅助(CSA) 2、CSA功能控制 2.1 要求 2.1.1 CSA ASM：弯道速度辅助 1. 模式管理器：驾驶员应能够激活/关闭功能 应存在处理 CSA 功能的模式管理器。模式管理器由驾驶员输入和系统状态控制。 模式管理器有两个由 CSAStatus 定义的状态。状态转换定义…
阅读更多...
ubuntu 系统解决GitHub无法访问问题

ubuntu 系统解决GitHub无法访问问题

先后试了网上两个教程，终于解决。通过修改host文件实现访问。 教程1： 1）终端输入： sudo gedit /etc/hosts 打开hosts文件； 2）使用ip查找工具查询 http://github.com和IP:http://github.global.ssl.fastly.net的ip地址并添加到hosts文件末尾； 3）关掉hosts文件，在终端…
阅读更多...
HTTPS协议-保障数据安全【安全篇】

HTTPS协议-保障数据安全【安全篇】

我们都知道由于HTTP是明文的&#xff0c;整个传输过程完全透明&#xff0c;任何人都能够在链路中监听、修改、伪造请求/响应报文。所以不能满足我们的安全要求。比我如我们上网的信息会被轻易的截获&#xff0c;所浏览的网站真实性也无法验证。黑客可以伪装成银行、购物网站来盗…
阅读更多...
接口测试常见接口类型？

接口测试常见接口类型？

常见接口类型 1.根据协议区分 1、webService接口:是走soap协议通过http传输请求报文和返回报文都是xml格式的&#xff0c;我们在测试的时候都用通过工具才能进行调用&#xff0c;测试。可以使用的工具有Soapul、jmeter、loadrunner等; 2、http接口:是走http协议&#xff0c;…
阅读更多...
Vue向pdf文件中添加二维码

Vue向pdf文件中添加二维码

这两天刚看到一个需求&#xff0c;简单描述一下&#xff0c;就是我们拿到一个pdf文件流&#xff08;文件流可以是后端返回的&#xff0c;也可以是从自己本地选的&#xff09;和一个url链接 &#xff0c;现在要将url链接生成二维码&#xff0c;并将这个二维码添加到这个pdf文件中…
阅读更多...
一元线性回归分析

一元线性回归分析

一元线性回归分析&#xff1a; &#xff08;1&#xff09;假设X与Y有线性相关关系&#xff0c;求Y与X样本回归直线方程&#xff0c;并求 的无偏估计&#xff1b; &#xff08;2&#xff09;检验Y和X之间的线性关系是否显著(α0.05)&#xff1b; &#xff08;3&#xff09;当Xx0…
阅读更多...
通过电脑屏幕传输文件

通过电脑屏幕传输文件

简介 本文介绍一套用于通过屏幕传输文件信息的软件。 通过屏幕传输文件&#xff0c;即非接触式&#xff0c;非插入式传递文件&#xff0c;是除了常用的网络传输&#xff0c;硬盘类介质拷贝之外的文件信息传输方式&#xff0c;基本原理就是将待传输的文件转换为二维码&#xf…
阅读更多...
SkipList（跳表）

SkipList（跳表）

基本概述 SkipList&#xff08;跳表&#xff09;首先是链表&#xff0c;但与传统链表相比有几点差异&#xff1a; 元素按照升序排列存储节点可能包含多个指针&#xff0c;指针跨度不同【根据元素个数不同&#xff0c;可以建立多级指针&#xff08;最多可以建立32级指针&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023