vue前端框架课程笔记（三）

news2024/9/27 19:14:12

目录

  • 条件渲染
    • v-if
    • v-show
  • 列表渲染
    • 关于:key
    • 列表过滤
      • watch属性实现
      • computed属性
      • 列表排序
  • 表单数据收集
    • input是否配置value属性
  • 过滤器

本博客参考尚硅谷官方课程，详细请参考

  • 【尚硅谷bilibili官方】

本博客以vue2作为学习目标（请勿混淆v2与v3的代码规范，否则可能出现报错），详细教程请参考

  • 【 v2.x 官方文档】

条件渲染

v-if

  1. v-if=“表达式”
  2. v-else-if=“表达式”
  3. v-else=“表达式”

使用示例

<!--html代码-->
<div id="root">
  <div>list=[1,2,3],num={{num}}</div>
  <button @click="change_num">点我num+1</button>
  <div v-if="num === 1">num={{num}}</div>
  <div v-else-if="num === 2">num={{num}}</div>
  <div v-else-if="num === 3">num={{num}}</div>
  <div v-else>num not in list</div>
</div>

<!--js代码-->
<script>
  //js代码
  const vm = new Vue({
    el: "#root",
    data: {
      name: "数字计算",
      num: 0,
    },
    methods: {
      change_num() {
        this.num++;
        console.log(this.num);
      },
    },
  });
</script>

效果
在这里插入图片描述

注意：

  • v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。
  • 特点：不展示的DOM元素直接被移除，使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。
  • 适用于：切换频率较低的场景。
  • 常常使用<template></template>标签来包裹DOM元素，这样做可以不影响html结构，但不能与v-show结合使用

v-show

v-show=“表达式”

  • 不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
  • 切换频率较高的场景。

使用示例

<!--html代码-->
<div id="root">
  <!--使用v-show做条件渲染 -->
  <button @click="change_num">点我num+1</button>
  <h2 v-show="is_show">此时num的值为{{num}},显示</h2>
</div>

<!--js部分代码-->
<script>
  const vm = new Vue({
    el: "#root",
    data: {
      name: "条件渲染测试内容",
      num: 1,
    },
    computed: {
      //计算num是否能整除2
      is_show() {
        return this.num % 2 === 0 ? true : false;
      },
    },
    methods: {
      //函数每次点击按钮触发，使num值加1
      change_num() {
        this.num++;
        console.log(this.num);
      },
    },
  });
</script>

效果
在这里插入图片描述

列表渲染

示例

<!--html代码-->
<div id="root">
  <!-- 遍历数组 -->
  <h5>数组部分</h5>
  <ul>
    <li v-for="(info,index) in list1" :key="index">
      {{info.id}}--{{info.name}}
    </li>
  </ul>
  <!-- 遍历对象 -->
  <h5>对象部分</h5>
  <ul>
    <li v-for="(value,key) in obj1" :key="key">{{key}}--{{value}}</li>
  </ul>
  <!-- 遍历字符串 -->
  <h5>字符串部分</h5>
  <ul>
    <li v-for="(char,index) in str1" :key="index">{{char}}--{{index}}</li>
  </ul>
</div>

<!--js代码-->
<script>
const vm = new Vue({
  el: "#root",
  data: {
    list1: [
      { id: "001", name: "张三" },
      { id: "002", name: "李四" },
      { id: "003", name: "王五" },
    ],
    obj1: {
      name: "车站",
      address: "北京",
    },
    str1: "where is your home?",
  },
});
</script>

效果
在这里插入图片描述

  • v-for指令用于展示列表数据
  • 语法：v-for=“(item,index) in list” :key=“”
  • 可以进行数组、对象、字符串等遍历

关于:key

  • 虚拟DOM中key作为虚拟DOM对象的标识，当对象中的数据发生变化时，Vue根据新数据生成新的虚拟DOM，再由对比算法比较其出与旧的虚拟DOM的差异，最终完成DOM的更新
  • vue默认使用index作为key值，但是使用index作为key可能出现下面问题：1. 对数据进行逆序添加、删除等破坏顺序的操作时会产生没有必要的真实DOM更新。2. 若结构中还有输入类DOM将会产生错误的DOM更新
  • 应尽量选用每条数据的唯一标识如id、手机号、身份证号等作为key

在这里插入图片描述

虚拟DOM对比规则?

  1. 若新旧虚拟DOM有相同的key。内容不变则直接使用之前的真实DOM，内容改变则生成新的真实DOM随后替换掉页面中之前的真实DOM
  2. 若在旧的虚拟DOM中没有找到key。创建新的虚拟DOM随后渲染到页面中

在这里插入图片描述

列表过滤

效果
在这里插入图片描述
html代码

<div id="root">
  <h2>人员列表</h2>
  <input type="text" v-model="keyWord" />
  <ul>
    <li v-for="(person,index) in filperson" :key="index">
      {{person.name}}--{{person.age}}--{{person.sex}}
    </li>
  </ul>
</div>

watch属性实现

<script>
  new Vue({
    el: "#root",
    data: {
      keyWord: "",
      persons: [
        { name: "张三", age: 18, sex: "男" },
        { name: "张四丰", age: 18, sex: "男" },
        { name: "李三", age: 21, sex: "女" },
        { name: "李四水", age: 22, sex: "女" },
      ],
      filperson: [],
    },
    //watch实现
    watch: {
      //简写方式：初始进入界面时不会执行，不会显示列表
      //关键点：不要修改原数组
      // keyWord(val){
      //     this.filperson = this.persons.filter((p) => {
      //       return p.name.indexOf(val) !== -1;
      // }
      keyWord: {
        //关键点：indexOf()函数默认空字符串在每个字符串的头部，返回index=0
        immediate: true,
        handler(val) {
          this.filperson = this.persons.filter((p) => {
            return p.name.indexOf(val) !== -1;
          });
        },
      },
    },
  });
</script>

computed属性

<script>
  new Vue({
    el: "#root",
    data: {
      keyWord: "",
      persons: [
        { name: "张三", age: 18, sex: "男" },
        { name: "张四丰", age: 18, sex: "男" },
        { name: "李三", age: 21, sex: "女" },
        { name: "李四水", age: 22, sex: "女" },
      ],
    },
    computed: {
      filperson() {
        return this.persons.filter((p) => {
          return p.name.indexOf(this.keyWord) !== -1;
        });
      },
    },
  });
</script>

列表排序

效果
在这里插入图片描述

<div id="root">
  <h2>人员列表</h2>
  <input type="text" v-model="keyWord" />
  <button v-on:click="sortKey=2">升序</button>
  <button v-on:click="sortKey=1">降序</button>
  <button v-on:click="sortKey=0">原顺序</button>
  <ul>
    <li v-for="(person,index) in filperson" :key="index">
      {{person.name}}--{{person.age}}--{{person.sex}}
    </li>
  </ul>
</div>

<script>
  new Vue({
    el: "#root",
    data: {
      keyWord: "",
      sortKey: 0,
      persons: [
        { name: "张三", age: 18, sex: "男" },
        { name: "张四丰", age: 18, sex: "男" },
        { name: "李三", age: 21, sex: "女" },
        { name: "李四水", age: 22, sex: "女" },
      ],
    },
    computed: {
      filperson() {
        let arr = this.persons.filter((p) => {
          return p.name.indexOf(this.keyWord) !== -1;
        });
        if (this.sortKey) {
          arr.sort((p1, p2) => {
            return this.sortKey === 1 ? p2.age - p1.age : p1.age - p2.age;
          });
        }
        return arr;
      },
    },
  });
</script>

表单数据收集

<!--html代码-->
<div id="root">
	<form @submit.prevent="demo">
		账号：<input type="text" v-model.trim="userInfo.account"> <br/><br/>
		密码：<input type="password" v-model="userInfo.password"> <br/><br/>
		年龄：<input type="number" v-model.number="userInfo.age"> <br/><br/>
		性别：
		男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
		女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><br/>
		爱好：
		学习<input type="checkbox" v-model="userInfo.hobby" value="study">
		打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
		吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
		<br/><br/>
		所属校区
		<select v-model="userInfo.city">
			<option value="">请选择校区</option>
			<option value="beijing">北京</option>
			<option value="shanghai">上海</option>
			<option value="shenzhen">深圳</option>
			<option value="wuhan">武汉</option>
		</select><br/><br/>
		其他信息：
		<textarea v-model.lazy="userInfo.other"></textarea> <br/><br/>
		<input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.atguigu.com">《用户协议》</a>
		<button>提交</button>
	</form>
</div>
</body>

v-model的三个修饰符：

  • lazy：失去焦点再收集数据
  • number：输入字符串转为有效的数字
  • trim：输入首尾空格过滤
//js代码
new Vue({
	el:'#root',
	data:{
		userInfo:{
			account:'',
			password:'',
			age:18,
			sex:'female',
			hobby:[],
			city:'beijing',
			other:'',
			agree:''
		}
	},
	methods: {
		demo(){
			console.log(JSON.stringify(this.userInfo))
		}
	}
})

浏览器运行结果
在这里插入图片描述

输出值
在这里插入图片描述

收集表单数据

标签描述
文本框<input type=“text”/>v-model将会收集value值，用户输入的就是value值。
单选框<input type=“radio”/>v-model将会收集value值，且要给标签配置value值。
多选框<input type=“checkbox”/>

input是否配置value属性

否
收集的就是checked（勾选 or 未勾选，是布尔值）
是
(1)当v-model的初始值是非数组时，收集的是checked（勾选 or 未勾选，是布尔值）
(2)当v-model的初始值是数组时，收集的是value组成的数组。

过滤器

  • 作用：对数据进行特定的格式化后再进行显示
  • 注册：Vue.filter(name,callback)或者new Vue({filter:{}})
  • 使用：插值语法或数据绑定
  • 注意：过滤器可以接受额外参数，多个过滤器可以进行串联

示例

<!--html代码-->
<div id="root">
  <!-- 不带参数 -->
  <h5>当前时间：{{time|timeFormatter}}</h5>
  <!-- 带有参数 -->
  <h5>当前时间：{{time|timeFormatter('YYYY')}}</h5>
  <!-- 多个过滤器 -->
  <h5>当前时间：{{time|timeFormatter('YYYY-MM-DD HH-mm-ss')|filter2}}</h5>
</div>

<!--js代码-->
<script>
  //全局过滤器
  Vue.filter("filter2", function (value) {
    return value.slice(0, 4);
  });
  var vm = new Vue({
    el: "#root",
    data: {
      time: Date.now(),
      str1: "dangerous",
    },
    //局部过滤器
    filters: {
      timeFormatter(value, str = "YYYY-MM-DD") {
        return dayjs(value).format(str);
      },
    },
  });
</script>

效果
在这里插入图片描述

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

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

相关文章

Azure 语音用人工智能改变游戏开发的三种方式

Azure 语音用人工智能改变游戏开发的三种方式

通过 Azure 认知服务的智能语音功能[1]&#xff0c;用户可以使用语音 SDK 开发工具包快速构建支持语音交互的各种应用。将语音转录为准确的文本 &#xff08;STT&#xff0c;或语音识别&#xff09;或者将文本转换成生动的语音 &#xff08;TTS&#xff0c;或语言合成&#xff…
阅读更多...
大数据NiFi（十五）：NiFi入门案例二

大数据NiFi（十五）：NiFi入门案例二

文章目录 NiFi入门案例二 一、配置“GenerateFlowFile”处理器 1、拖拽“Processor”在弹框中输入“GenerateFlowFile” <
阅读更多...
如何解决缓存雪崩、击穿、穿透难题？

如何解决缓存雪崩、击穿、穿透难题？

缓存雪崩、缓存击穿和缓存穿透这三个问题是我们在使用redis做缓存的时候要面临的&#xff0c;一旦发生这三个问题&#xff0c;就会导致大量的请求都积压到了数据库层&#xff0c;有可能导致数据库宕机&#xff0c;进入导致整个系统不可用。 下边&#xff0c;具体看一下这三个问…
阅读更多...
Qt扫盲-Qt资源系统概述

Qt扫盲-Qt资源系统概述

Qt资源系统概述一、概述二、资源文件(.qrc)三、外部二进制资源四、内嵌资源五、压缩资源文件六、在应用中使用资源七、使用Library 库中的资源一、概述 Qt资源系统是一种独立于平台的机制&#xff0c;用于在应用程序的可执行文件中存储二进制文件。如果您的应用程序总是需要一…
阅读更多...
Spring Boot学习之集成Dubbo+Zookeeper小案例

Spring Boot学习之集成Dubbo+Zookeeper小案例

文章目录一 框架搭建1. [Dubbozookeeper下载和安装](https://blog.csdn.net/yang2330648064/article/details/128790320)二 项目创建2.1 服务者部分2.2 消费者部分2.3 注意点2.3.1 在service的实现类中配置服务注解&#xff0c;发布服务&#xff01;注意导包问2.3.2 服务接口的…
阅读更多...
[Vulnhub] DC-8

[Vulnhub] DC-8

下载链接&#xff1a;https://download.vulnhub.com/dc/DC-8.zip 知识点&#xff1a; sqlmap 注入出用户名密码msfvenom 生成脚本msf反弹shellsuid-exim 提权 目录 <1> 信息搜集 <2> 反弹shell (1) 利用kali自带webshell代码 (2) msfvenom制作反弹shell脚本…
阅读更多...
SaaS平台数据表单组件设计技巧分享

SaaS平台数据表单组件设计技巧分享

SaaS平台数据表单组件设计技巧分享&#xff0c;数据表单方法&#xff1a;固定表头、固定侧栏、自定义栏、分页器、过滤器、数据排序、多选项同时操作、简单且简约、普通的字体样式、项目链接、鼠标悬停设计指南&#xff0c;为大家提供有关数据表单设计的实用性建议。在实际的数…
阅读更多...
20克拉默法则、逆矩阵、体积

20克拉默法则、逆矩阵、体积

本节是关于行列式的最后一课&#xff0c;主要包括按各方面&#xff1a;求逆矩阵、克莱姆法则和体积 求逆矩阵 A-1 早在之前&#xff0c;就已经了解过求解逆矩阵的方法&#xff1a;高斯-若尔当求逆法。高斯-若尔当求逆法对于数值计算无懈可击&#xff0c;但很难想象这是如何做…
阅读更多...
Hadoop基础之《（6）—Hadoop单机伪集群安装》

Hadoop基础之《（6）—Hadoop单机伪集群安装》

一、安装JDK yum install java-1.8* 二、关闭防火墙 systemctl status firewalld systemctl stop firewalld systemctl disable firewalld 三、配置ip地址和主机名映射 vi /etc/hosts 加入&#xff1a; 192.168.1.1 hadoop001 四、配置免密登录 1、生成公私钥 ssh-key…
阅读更多...
设计模式第5式：装饰器模式

设计模式第5式：装饰器模式

前言 当我们初学编程时&#xff0c;扩展程序功能一般习惯使用继承&#xff0c;使用继承有一些缺点&#xff0c;那就是容易造成类爆炸&#xff0c;并且容易继承一些不需要的特性。当我们学习完装饰器模式后&#xff0c;会发现善用组合会有比继承更好的效果。 正文 1、咖啡馆案…
阅读更多...
全志A40i＋Logos FPGA开发板（4核ARM Cortex-A7）硬件说明书（上）

全志A40i＋Logos FPGA开发板（4核ARM Cortex-A7）硬件说明书（上）

前 言 本文档主要介绍TLA40iF-EVM工业评估板硬件接口资源以及设计注意事项等内容。 核心板的ARM端和FPGA端的IO电平标准一般为3.3V，上拉电源一般不超过3.3V，当外接信号电平与IO电平不匹配时，中间需增加电平转换芯片或信号隔离芯片。按键或接口需考虑ESD设计，ESD器件选型时需…
阅读更多...
深入Java自动化探针技术的原理和实践

深入Java自动化探针技术的原理和实践

转至作者 蒋志伟&#xff1a;深入Java自动化探针技术的原理和实践 前言建议阅读时间 30~40分钟读者需要对Java JVM 一定了解&#xff0c;文章会系统的介绍Java 探针核心原理和技术实现&#xff0c;总结目前一些主流的框架方案。同时&#xff0c;接下来我会分享一篇关于 OpenTel…
阅读更多...
你是如何学会正则表达式的？

你是如何学会正则表达式的？

前言 前言 正则表达式作为对字符串操作的一种逻辑公式&#xff0c;它使用一些特定字符及其组合组成“规则字符串”来对字符串进行过滤的操作&#xff0c;如在注册验证的时候我们就经常会用到正则表达式&#xff0c;但正则表达式的变式太多&#xff0c;我们不用完全的去记住每一…
阅读更多...
XSSed通关教程

XSSed通关教程

XSSed通关教程 首先整体浏览网站 进入Level1 Basic XSS 首先整体浏览网站 对源码进行分析 漏洞产生于如下代码段&#xff1a; echo($_GET[‘q’]); 直接将用户输入插入了html页面&#xff0c;没有任何过滤。 构造普通payload&#xff1a; <script>alert(/xss/)<…
阅读更多...
剑指 Offer II 004. 只出现一次的数字

剑指 Offer II 004. 只出现一次的数字

题目链接 剑指 Offer II 004. 只出现一次的数字 mid 题目描述 给你一个整数数组 nums&#xff0c;除某个元素仅出现 一次 外&#xff0c;其余每个元素都恰出现 三次 。请你找出并返回那个只出现了一次的元素。 示例 1&#xff1a; 输入&#xff1a;nums [2,2,3,2] 输出&…
阅读更多...
LeetCode042之接雨水(相关话题：动态规划，单调栈)

LeetCode042之接雨水(相关话题：动态规划，单调栈)

题目描述 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 示例 1&#xff1a; 输入&#xff1a;height [0,1,0,2,1,0,1,3,2,1,2,1] 输出&#xff1a;6 解释&#xff1a;上面是由数组 [0,1,0,2,1,0,1,3,…
阅读更多...
vue复习+vuex

vue复习+vuex

一、vue.js的基本指令1、Vue的作用&#xff1a;快速的构建前端页面&#xff08;封装了html、css、js&#xff09;,以工程化的方式进行前端的开发2、Vue的核心&#xff1a;&#xff08;1&#xff09;组件化&#xff1a;&#xff08;2&#xff09;数据双向绑定&#xff08;3&…
阅读更多...
linux基本功系列之sudo命令实战一

linux基本功系列之sudo命令实战一

文章目录一.sudo命令介绍二. 语法格式及常用选项三. sudo配置文件详解3.1 sudo的配置文件3.2 配置文件注释3.3 sudo授权规则四. sudo常用参数实战 参考案例4.1 查看当前用户有哪些被sudo服务授权的命令4.2 结束密码的有效期4.3 限制用户的权限总结前言&#x1f680;&#x1f68…
阅读更多...
3分钟解读ISO27001信息安全管理体系

3分钟解读ISO27001信息安全管理体系

一、什么是ISO27001 ISO27001是信息安全管理体系认证&#xff0c;对应国标号GB/T22080-2016&#xff0c;企业建立ISO27001体系能有效保证企业在信息安全领域的可靠性&#xff0c;降低企业泄密风险&#xff0c;更好的保存核心数据和重要信息。 信息安全对每个企业都是非常重要的…
阅读更多...
Spring Cloud 高频面试题25连环炮！

Spring Cloud 高频面试题25连环炮！

今天给大家分享SpringCloud高频面试题。 Spring Cloud核心知识总结 下面是一张Spring Cloud核心组件关系图&#xff1a; 从这张图中&#xff0c;其实我们是可以获取很多信息的&#xff0c;希望大家细细品尝。 话不多说&#xff0c;我们直接开始 Spring Cloud 连环炮。 连环…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023