vue(七) vue进阶

目录

第一课：Vue方法、计算机属性及侦听器

一、数组变化侦测

方法1：变更方法

方法2：替换一个数组

 例子：小Demo:合并两个数组

二、计算属性

1.基础（不推荐）

2.使用计算属性来完成案例

3.使用函数的方式去完成

计算机属性缓存 vs 方法

三、侦听器

例子：

第二课：Vue的表单绑定

1. 基本的表单绑定

文本输入框绑定

2. 处理复选框和单选框

单选框绑定

 复选框绑定

 3. 处理下拉框

 4. 处理文本区域

 5. 动态表单和验证

6.总结

第三课：v-model修饰符

第一课：Vue方法、计算机属性及侦听器

一、数组变化侦测

假设我们写了一个数组，现在想让该数组中新增一条数据,那么如何去实现呢？

给出例子如下： 

<template>
    <h3>数组变化侦听</h3>
    <button @click="addListHandler">添加数据</button>
    <ul>
        <li v-for="(item,index) of names" :key="index">{{ item }}</li>
    </ul>
</template>
<script>
    export default{
        data(){
            return{
                names:['张三','李四','王五']
            }
        },
        methods:{
            addListHandler(){
                
            }
        }
    }
</script>

现在要求在上述的数组中再添加一条，如何操作呢？

方法1：变更方法

Vue能够侦听响应式数组的变更方法，并在它们被调用时触发相关的更新。（变更方法，顾名思义，就是会对调用它们的原数组进行变更。）这些变更方法包括：

push()

pop()

shift()

unshift()

splice(）

sort()

reverse()

那么此时点击按钮就会更新：

 

方法2：替换一个数组

变更方法，顾名思义，就是会对调用它们的原数组进行变更。相对地，也有一些不可变(immutable)方法，例如fiter()，concat()和slice()，这些都不会更改原数组，而总是返回一个新数组。当遇到的是非变更方法时，我们需要将旧的数组替换为新的。

这样写的话不会引起ui的自动更新，但是当我们输出程序的时候发现数组已经合并了一个新元素

 那如果我想让UI发生变化呢？--无非就是重新赋值覆盖旧数组；

 例子：小Demo:合并两个数组

<template>
    <h3>数组变化侦听</h3>
    <button @click="addList">合并数组</button>
    <h3>数组1</h3>
    <p v-for="(item,index) of nums1" :key="index">{{ item }}</p>
    <h3>数组2</h3>
    <p v-for="(item,index) of nums2" :key="index">{{ item }}</p>
</template>
<script>
    export default{
        data(){
            return{
                names:['张三','李四','王五'],
                nums1:[1,2,3,4,5],
                nums2:[6,7,8,9,10]
            }
        },
        methods:{
            addList(){
              this.nums1 =   this.nums1.concat(this.nums2) 
            }
        }
    }
</script>

二、计算属性

模板中的表达式虽然方便，但也只能用来做简单的操作。如果在模板中写太多逻辑，会让模板变得臃肿，难以维护。因此我们推荐使用计算属性来描述依赖响应式状态的复杂逻辑。

（下面是一个简单的判断长度的判断-大于0返回Yes，否则返回No）

1.基础（不推荐）

<template>
    <div>
        <h3>{{ qcby.name }}</h3>
        <p>{{qcby.content.length > 0 ?'Yes' : "No" }}</p>
    </div>
</template>
<script>
    export default{
        data(){
            return{
                qcby:{
                    name:"计算属性",
                    content:['前端','Java','python'] 
                }
            }
        }
    }
</script>

2.使用计算属性来完成案例

<template>
    <div>
        <h3>{{ qcby.name }}</h3>
        <p>{{ qqqq }}</p>
    </div>
</template>
<script>
    export default{
        data(){
            return{
                qcby:{
                    name:"计算属性",
                    content:['前端','Java','python'] 
                }
            }
        },
        //计算属性
        computed:{
            qqqq(){
                return this.qcby.content.length > 0 ? 'Yes':'No'
            }
        }
    }
</script>

3.使用函数的方式去完成

<template>
    <div>
        <h3>{{ qcby.name }}</h3>
        <p>{{ yyyy() }}</p>
    </div>
</template>
<script>
    export default{
        data(){
            return{
                qcby:{
                    name:"函数",
                    content:['前端','Java','python'] 
                }
            }
        },
         //函数的方式去完成
         methods:{
            yyyy(){
                return this.qcby.content.length > 0 ? 'Yes':'No'
            }
         }
    }
</script>

那么既然可以使用函数的方式去完成，为什么要弄一个计算属性呢？

计算机属性缓存 vs 方法

你可能注意到我们在表达式中像这样调用一个函数也会获得和计算属性相同的结果

重点区别：

计算属性：计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算（即一次调用）

方法：方法调用总是会在重渲染发生时再次执行函数（即多次调用）

如上，在上述的显示中：

计算属性：只会计算一次

方法：会计算四次 

三、侦听器

我们可以使用watch选项在每次响应式属性发生变化时触发一个函数

例子：

<template>
    <h3>侦听器</h3>
    <p>{{ message }}</p>
    <button @click="clickHandle">修改数据</button>
</template>
<script>
    export default{
        data(){
            return{
                message:"前端"
            }
        },
        methods:{
            clickHandle(){
                this.message = 'python'
            }
        },
        watch:{
            //函数名称必须与侦听的数据对象保持一致
            // newVlaue：改变之后的数据
            // oldValue：改变之前的数据
            message(newVlaue,oldValue){
                console.log(newVlaue,oldValue);
            }
        }
    }
</script>

第二课：Vue的表单绑定

在 Vue 中，处理表单绑定主要是通过 v-model 指令来实现的。v-model 可以帮助我们在表单元素（如文本框、复选框、单选框、下拉框等）和 Vue 数据之间建立双向绑定，使得数据和视图可以自动同步。

下面我将详细介绍如何在 Vue 中处理表单绑定，包括常见的表单元素的绑定方式。

1. 基本的表单绑定

在 Vue 中，使用 v-model 可以方便地实现双向数据绑定。v-model 会自动处理用户输入和数据的同步更新。最常见的表单元素包括文本输入框、单选框、复选框和下拉框。

文本输入框绑定

文本框（<input>）是最基本的表单元素，通过 v-model 可以实现双向绑定。

<template>
  <div>
    <label for="username">用户名：</label>
    <input type="text" id="username" v-model="username" />
                                    <!-- 在这里获取-->
    <p>你输入的用户名是：{{ username }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: ''  //在这里返回
    };
  }
};
</script>
解释 ：
  • 通过 v-model="username"，输入框的值会绑定到 Vue 实例中的 username 数据属性。
  • 当用户在输入框中输入内容时，username 会自动更新，反之当 username 的值变化时，输入框的值也会同步变化。

2. 处理复选框和单选框

单选框绑定

单选框（<input type="radio">）用于从多个选项中选择一个，v-model 也能帮助你实现绑定。

<template>
  <div>
    <label>
      <input type="radio" value="Male" v-model="gender" /> 男
    </label>
    <label>
      <input type="radio" value="Female" v-model="gender" /> 女
    </label>
    <p>你选择的性别是：{{ gender }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      gender: 'Male' //默认是Male
    };
  }
};
</script>
解释 ：
  • v-model="gender" 使得 gender 与选中的单选框同步。当用户选择不同的性别时，gender 会自动更新为对应的值。

 复选框绑定

复选框（<input type="checkbox">）允许用户选择多个选项。通过 v-model，你可以将复选框的选中状态绑定到一个数组中。

<template>
  <div>
    <label>
      <input type="checkbox" value="Vue" v-model="skills" /> Vue
    </label>
    <label>
      <input type="checkbox" value="React" v-model="skills" /> React
    </label>
    <label>
      <input type="checkbox" value="Angular" v-model="skills" /> Angular
    </label>
    <p>你掌握的技能：{{ skills.join(', ') }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      skills: []
    };
  }
};
</script>
解释：
  • v-model="skills" 会将选中的复选框的值添加到 skills 数组中。数组中会包含用户选中的所有技能项。

 3. 处理下拉框

下拉框（<select>）也可以通过 v-model 来实现数据绑定，用户选择的选项会绑定到 Vue 实例中的数据属性。

<template>
  <div>
    <label for="language">选择你的语言：</label>
    <select v-model="language">
      <option value="English">英语</option>
      <option value="Chinese">中文</option>
      <option value="Spanish">西班牙语</option>
    </select>
    <p>你选择的语言是：{{ language }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      language: 'English'
    };
  }
};
</script>
解释：
  • v-model="language" 使得 language 与下拉框的选中值进行双向绑定。用户选择的语言会更新 language 的值。

 4. 处理文本区域（<textarea>）

如果表单中有文本区域（<textarea>），你同样可以使用 v-model 来绑定数据。

<template>
  <div>
    <label for="description">描述：</label>
    <textarea id="description" v-model="description"></textarea>
    <p>你的描述：{{ description }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      description: ''
    };
  }
};
</script>
解释：
  • v-model="description" 使得<textarea> 的值与 description 数据属性绑定。当用户修改文本框内容时，description 的值会自动更新。

 5. 动态表单和验证

在实际项目中，我们通常需要动态渲染表单元素，并且对用户输入进行验证。Vue 提供了强大的功能来支持这种需求。你可以结合 Vue 的表单验证库（如 VeeValidate）来进行表单验证，或者自行处理验证逻辑。

例如，创建一个简单的表单验证：

<template>
  <div>
    <label for="email">电子邮件：</label>
    <input type="email" id="email" v-model="email" />
    <p v-if="!isValidEmail">请输入有效的电子邮件地址。</p>

    <label for="password">密码：</label>
    <input type="password" id="password" v-model="password" />
    <p v-if="password.length < 6">密码长度不能少于 6 个字符。</p>

    <button :disabled="!isFormValid">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      password: ''
    };
  },
  computed: {
    isValidEmail() {
      const regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
      return regex.test(this.email);
    },
    isFormValid() {
      return this.isValidEmail && this.password.length >= 6;
    }
  }
};
</script>
解释：
  • 通过计算属性 isValidEmail 和 isFormValid 来验证表单输入。
  • 电子邮件和密码的输入字段分别使用 v-model 来绑定到 email 和 password 数据属性。
  • 提交按钮通过 :disabled 属性来禁用，直到表单验证通过。

6.总结

在 Vue 中，处理表单绑定非常简单，主要依赖 v-model 指令，它能自动处理表单元素和 Vue 数据的双向绑定。通过 v-model，你可以轻松地将数据与表单控件（如文本框、单选框、复选框、下拉框等）进行绑定，从而实现数据与视图的同步。

表单验证可以通过计算属性、方法和条件渲染来完成，确保表单的正确性和有效性。

通过这些基本的操作，你可以在 Vue 中高效地处理表单输入、更新和验证等任务。

第三课：v-model修饰符

v-model也提供了修饰符：lazy、number、trim .lazy

默认情况下，v-model会在每次input事件后更新数据。你可以添加lazy修饰符来改为在每次change事件后更新数据

<template>
   <input type="text" v-model.lazy="message">
   <p>{{ message }}</p>
</template>
<script>
  export default{
    data(){
      return{
        message:""
      }
    }
  }
</script>

number:只能接受数值类型的数据

trim:去掉前后空格

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Spring Boot 2 学习指南与资料分享

Spring Boot 2 学习指南与资料分享

Spring Boot 2 学习资料 Spring Boot 2 学习资料 Spring Boot 2 学习资料 在当今竞争激烈的 Java 后端开发领域&#xff0c;Spring Boot 2 凭借其卓越的特性&#xff0c;为开发者们开辟了一条高效、便捷的开发之路。如果你渴望深入学习 Spring Boot 2&#xff0c;以下这份精心…
阅读更多...
YangQG 面试题汇总

YangQG 面试题汇总

一、交叉链表 问题&#xff1a; 给你两个单链表的头节点 headA 和 headB &#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交节点&#xff0c;返回 null 。 解题思想&#xff1a; 双指针 备注&#xff1a;不是快慢指针&#xff0c;如果两个长度相…
阅读更多...
fastapi 使用

fastapi 使用

参考&#xff1a; https://fastapi.tiangolo.com/zh/tutorial/first-steps/https://fastapi.tiangolo.com/zh/tutorial/first-steps/ FastAPI 用于基于标准 Python 类型提示使用 Python 构建 API&#xff0c;使用 ASGI 的标准来构建 Python Web 框架和服务器。所有简单理解&a…
阅读更多...
2024年度漏洞态势分析报告，需要访问自取即可!(PDF版本)

2024年度漏洞态势分析报告，需要访问自取即可!(PDF版本)

2024年度漏洞态势分析报告&#xff0c;需要访问自取即可!(PDF版本),大家有什么好的也可以发一下看看
阅读更多...
泛目录和泛站有什么差别

泛目录和泛站有什么差别

啥是 SEO 泛目录&#xff1f; 咱先来说说 SEO 泛目录是啥。想象一下&#xff0c;你有一个巨大的图书馆&#xff0c;里面的书架上摆满了各种各样的书&#xff0c;每一本书都代表着一个网页。而 SEO 泛目录呢&#xff0c;就像是一个超级图书管理员&#xff0c;它的任务就是把这些…
阅读更多...
k8s基础(6)—Kubernetes-存储

k8s基础(6)—Kubernetes-存储

Kubernetes-存储概述 k8s的持久券简介 Kubernetes的持久卷&#xff08;PersistentVolume, PV&#xff09;和持久卷声明&#xff08;PersistentVolumeClaim, PVC&#xff09;为用户在Kubernetes中使用卷提供了抽象。PV是集群中的一块存储&#xff0c;PVC是对这部分存储的请求。…
阅读更多...
深度学习-卷积神经网络反向传播梯度公式推导

深度学习-卷积神经网络反向传播梯度公式推导

这篇文章非常棒&#xff0c;单样本单通道的反向传播梯度公式推导我都理解了。为了防止找不到原网页&#xff0c;所以特复制于此 参考&#xff1a; https://zhuanlan.zhihu.com/p/640697443
阅读更多...
论文笔记（四十七）Diffusion policy: Visuomotor policy learning via action diffusion（下）

论文笔记（四十七）Diffusion policy: Visuomotor policy learning via action diffusion（下）

Diffusion policy: Visuomotor policy learning via action diffusion&#xff08;下&#xff09; 文章概括5. 评估5.1 模拟环境和数据集5.2 评估方法论5.3 关键发现5.4 消融研究 6 真实世界评估6.1 真实世界Push-T任务6.2 杯子翻转任务6.3 酱汁倒入和涂抹任务 7. 实际双臂任务…
阅读更多...
C#学习笔记 --- 简单应用

C#学习笔记 --- 简单应用

1.operator 运算符重载&#xff1a;使自定义类可以当做操作数一样进行使用。规则自己定。 2.partial 分部类&#xff1a; 同名方法写在不同位置&#xff0c;可以当成一个类使用。 3.索引器&#xff1a;使自定义类可以像数组一样通过索引值 访问到对应的数据。 4.params 数…
阅读更多...
汽车基础软件AutoSAR自学攻略(四)-AutoSAR CP分层架构(3) (万字长文-配21张彩图)

汽车基础软件AutoSAR自学攻略(四)-AutoSAR CP分层架构(3) (万字长文-配21张彩图)

汽车基础软件AutoSAR自学攻略(四)-AutoSAR CP分层架构(3) (万字长文-配21张彩图) 前面的两篇博文简述了AutoSAR CP分层架构的概念&#xff0c;下面我们来具体到每一层的具体内容进行讲解&#xff0c;每一层的每一个功能块力求用一个总览图&#xff0c;外加一个例子的图给大家进…
阅读更多...
【2024年华为OD机试】 (CD卷,100分)- 最大N个数与最小N个数的和（Java JS PythonC/C++）

【2024年华为OD机试】 (CD卷,100分)- 最大N个数与最小N个数的和（Java JS PythonC/C++）

一、问题描述 题目描述 给定一个数组&#xff0c;编写一个函数来计算它的最大N个数与最小N个数的和。你需要对数组进行去重。 说明&#xff1a; 数组中数字范围 [0, 1000]最大N个数与最小N个数不能有重叠&#xff0c;如有重叠&#xff0c;输入非法返回 -1输入非法返回 -1 …
阅读更多...
WINFORM - DevExpress -＞ DevExpress总结[安装、案例]

WINFORM - DevExpress -＞ DevExpress总结[安装、案例]

安装devexpress软件 路径尽量不换&#xff0c;后面破解不容易出问题 vs工具箱添加控件例如: ①使用控制台进入DevExpress安装目录: cd C:\Program Files (x86)\DevExpress 20.1\Components\Tools ②添加DevExpress控件&#xff1a; ToolboxCreator.exe/ini:toolboxcreator…
阅读更多...
cursor+deepseek构建自己的AI编程助手

cursor+deepseek构建自己的AI编程助手

文章目录 准备工作在Cursor中添加deepseek 准备工作 下载安装Cursor &#xff08;默认安装在C盘&#xff09; 注册deepseek获取API key 在Cursor中添加deepseek 1、打开cursor&#xff0c;选择设置 选择Model&#xff0c;添加deepseek-chat 注意这里去掉其他的勾选项&…
阅读更多...
《零基础Go语言算法实战》【题目 2-7】defer 关键字特性

《零基础Go语言算法实战》【题目 2-7】defer 关键字特性

《零基础Go语言算法实战》 【题目 2-7】defer 关键字特性 下面代码的输出是什么&#xff1f;请说明原因。 package main import ( "fmt" ) func main() { deferFunc() func deferFunc() { defer func() { fmt.Println("value1") }() defer func() {…
阅读更多...
如何规模化实现完全自动驾驶？Mobileye提出解题“新”思路

如何规模化实现完全自动驾驶？Mobileye提出解题“新”思路

在CES 2025上&#xff0c;Mobileye展示了端到端自动驾驶系统Mobileye Drive™&#xff0c;通过高度集成的传感器、算法和计算平台&#xff0c;可以实现自动驾驶功能的全覆盖。 Mobileye创始人兼首席执行官Amnon Shashua教授 期间&#xff0c;Mobileye创始人兼首席执行官Amnon …
阅读更多...
腾讯云AI代码助手编程挑战赛-智能聊天助手

腾讯云AI代码助手编程挑战赛-智能聊天助手

作品简介 本作品开发于腾讯云 AI 代码助手编程挑战赛&#xff0c;旨在体验腾讯云 AI 代码助手在项目开发中的助力。通过这一开发过程&#xff0c;体验到了 AI 辅助编程的高效性。 技术架构 前端: 使用 VUE3、TypeScript、TDesign 和 ElementUI 实现。 后端: 基于 Python 开发…
阅读更多...
超大规模分类（三）：KNN softmax

超大规模分类（三）：KNN softmax

传统的分类损失计算输入数据和每个类别中心的距离&#xff0c;来优化模型的训练。KNN softmax通过选择和输入数据最相关的top-K个类别&#xff0c;仅计算输入数据和top-K个类别中心的距离&#xff0c;以减小计算量。 KNN softmax首次诞生于达摩院机器智能技术实验室发表的SIGKD…
阅读更多...
MySQL素材怎么导入Navicat？？？

MySQL素材怎么导入Navicat？？？

不管用什么方法都要先关掉MySQL服务&#xff0c;并且提前备份数据&#xff01; 1.有sql文件时候。 打开navicat&#xff0c;运行sql文件 然后点击后面三个点&#xff0c;选中要运行的sql文件&#xff0c;开始。 鼠标右键刷新一下&#xff0c;就能看到sql文件中的表了 2.没有s…
阅读更多...
程序员独立开发竞品分析：确定网站使用什么建站系统

程序员独立开发竞品分析：确定网站使用什么建站系统

要确定一个网站使用的建站系统&#xff0c;可以通过以下几种方法尝试分析&#xff1a; 查看页面源代码&#xff1a; 打开网站&#xff0c;右键点击页面并选择“查看页面源代码”。在代码中查找一些常见的建站系统标志&#xff0c;例如&#xff1a; WordPress 的迹象&#xff1a…
阅读更多...
Linux(Centos7)安装Mysql/Redis/MinIO

Linux(Centos7)安装Mysql/Redis/MinIO

安装Mysql 安装Redis 搜索Redis最先版本所在的在线安装yum库 查看以上两个组件是否是开机自启 安装MinIO 开源的对象存储服务&#xff0c;存储非结构化数据&#xff0c;兼容亚马逊S3协议。 minio --help #查询命令帮助minio --server --help #查询--server帮助minio serve…
阅读更多...
最新文章

Copyright @ 2022~2023