Vue学习总结

声明:本文来源于黑马程序员PDF讲义

双向绑定:

修改表单项标签,发现vue对象data中的数据也发生了变化

双向绑定的作用可以获取表单的数据的值,然后提交给服务器

事件绑定

v-on: 用来给html标签绑定事件的。需要注意的是如下2点:

  • v-on语法给标签的事件绑定的函数,必须是vue对象种声明的函数
  • v-on语法绑定事件时,事件名相比较js中的事件名,没有on

同样,v-on也存在简写方式,即v-on: 可以替换成@,所以第二个按钮绑定单击事件的代码如下:

<input type="button" value="点我一下" @click="handle()">
判断

 

采用了双向绑定到age属性,意味着我们可以通过表单输入框来改变age的值。

需求是当我们改变年龄时,需要动态判断年龄的值,呈现对应的年龄的文字描述。年轻人,我们需要使 用条件判断 age35 && age<60 ,其他情况是老年人。所以通 过v-if指令编写如下代码:

年龄<input type="text" v-model="age">经判定,为:
<span v-if="age <= 35">年轻人(35及以下)</span>
<span v-else-if="age > 35 && age < 60">中年人(35-60)</span>
<span v-else>老年人(60及以上)</span>

v-show和v-if的作用效果是一样的,只是原理不一样。复制上述html代码,修改v-if指令为v-show 指令,代码如下:

年龄<input type="text" v-model="age">经判定,为:
<span v-show="age <= 35">年轻人(35及以下)</span>
<span v-show="age > 35 && age < 60">中年人(35-60)</span>
<span v-show="age >= 60">老年人(60及以上)</span>

 

        可以发现,浏览器呈现的效果是一样的,但是浏览器中html源码不一样。v-if指令,不满足条件的标 签代码直接没了,而v-show指令中,不满足条件的代码依然存在,只是添加了css样式来控制标签不去显示。

遍历

<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{addrs:["北京", "上海", "西安", "成都", "深圳"]},methods: {}})
</script>

然后分别编写2种遍历语法,来遍历数组,展示数据,代码如下:

<div id="app"><div v-for="addr in addrs">{{addr}}</div><hr><div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}</div>
</div>

生命周期

vue的生命周期:指的是vue对象从创建到销毁的过程。vue的生命周期包含8个阶段:每触发一个生命 周期事件,会自动执行一个生命周期方法,这些生命周期方法也被称为钩子方法。其完整的生命周期如 下图所示:

其中我们需要重点关注的是mounted,其他的我们了解即可。

mounted:挂载完成,Vue初始化成功,HTML页面渲染成功。以后我们一般用于页面初始化自动的 ajax请求后台数据

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【算法题】86. 分隔链表

题目 给你一个链表的头节点 head 和一个特定值 x &#xff0c;请你对链表进行分隔&#xff0c;使得所有 小于 x 的节点都出现在 大于或等于 x 的节点之前。 你应当 保留 两个分区中每个节点的初始相对位置。 示例 1&#xff1a; 输入&#xff1a;head [1,4,3,2,5,2], x 3 …

Zookeeper分布式队列实战

目录 Zookeeper分布式队列 普通方式实现 设计思路 具体实现 使用Curator实现 具体实现 注意事项 Zookeeper分布式队列 常见的消息队列有:RabbitMQ&#xff0c;RocketMQ&#xff0c;Kafka等。Zookeeper作为一个分布式的小文件管理系统&#xff0c;同样能实现简单的队列功…

PCB过孔过电流能力计算

PCB&#xff08;印刷电路板&#xff09;过孔的过电流能力计算通常基于以下几个关键参数&#xff1a; 过孔直径&#xff08;D&#xff09;&#xff1a;过孔的直径决定了其有效导电截面积&#xff0c;进而影响载流能力。 铜厚度&#xff08;t&#xff09;&#xff1a;内层或外层…

ImportError: You must install pydot (`pip install pydot`) and install graphviz

1、安装pydot pip install pydot2、安装cudnn 官方下载页面 下载解压后&#xff0c;复制bin、lib、include的三个文件夹到到cuda安装路径中&#xff0c;这是我的cuda路径&#xff1a; C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v11.5直接复制粘贴这三个文件夹&a…

从零学习Linux操作系统 第二十三部分 系统中火墙的管理及优化

1 、实验环境设定 第一台主机需要两个网卡 另一台主机一个网卡桥接到VMnet0上 第一台主机保证能够和windows保持连接 设定第一块儿网卡能够与Windows连接 设定第二台主机能够与第一台主机连接 二、火墙中的基本名词及知识 火墙就相当于是一个表格&#xff0c;这个表格里写…

svn 安装路径

SVN客户端安装&#xff08;超详细&#xff09; 一、SVN客户端安装 1、下载安装包地址&#xff1a;https://tortoisesvn.net/downloads.html 此安装包是英文版的&#xff0c;还可以下载一个语言包&#xff0c;在同界面的下方 一直点击下一步&#xff0c;直到弹出选择红框 然…

QuertWrapper and 和or 用法

1.使用 MyBatis Plus 实现上述 SQL 查询条件可以按照以下步骤进行&#xff1a; 创建一个 QueryWrapper 对象&#xff1a;QueryWrapper<Entity> queryWrapper new QueryWrapper<>();使用 eq 方法添加等于条件和 and 条件&#xff1a;queryWrapper.eq("age&qu…

jsonwebtoken使用HS256生成token失败

项目场景&#xff1a; 用户登入将token返回给用户 问题描述 在koa中使用jsonwebtoken库生成token失败&#xff0c;找了很多原因。 const jwt require("jsonwebtoken"); const { PRIVATE_KEY } require("../config/screct");class LoginController {as…

3. Mybatis的XML配置文件(重点)

目录 1 Mybatis的XML配置文件 1.1 XML配置文件规范 1.2 XML配置文件实现 1.3 MybatisX的使用 2. Mybatis动态SQL 2.1 什么是动态SQL 2.2 动态SQL-if 2.2.1 条件查询 2.2.2更新 2.3 动态SQL-foreach 2.4 动态SQL-sql&include 1.mybatis入门 2.mybatis基本操作 1…

AI智能分析+明厨亮灶智慧管理平台助力“舌尖上的安全”

春节是中国最重要的传统节日之一&#xff0c;在春节期间&#xff0c;人们聚餐需求激增&#xff0c;餐饮业也迎来了高峰期。在这个时期&#xff0c;餐饮企业需要更加注重食品安全和卫生质量&#xff0c;以保证消费者的健康和权益&#xff0c;明厨亮灶智慧管理成为了餐饮业中备受…

记一次复杂左连接的优化之路

慢执行分析 create table t3 as select t_1.lon as lon, t_1.lat as lat, t_1.label as label, t_1.is_core as is_core, t_2.grid_id as grid_id, t_2.mid_jd as mid_jd, t_2.mid_wd as mid_wd, t_2.zs_jd as zs_jd, t_2.zs_wd as zs_wd, t_2.yx_jd as yx_jd, t_2.yx_wd as y…

基于单片机温度控制系统的研究

摘 要&#xff1a;笔者基于单片机的温度控制系统&#xff0c;从单片机选择、传感器选择、系统框架设计等方面概述了单片机的温度控制系统内涵&#xff0c;分析了其运行原理&#xff0c;列举了单片机温度控制系统设计的实操方法&#xff0c;从硬件系统、软件系统、温度检测方法…

windows 11安装跳过联网,使用本地账户登陆

windows 11安装跳过联网&#xff0c;使用本地账户登陆 第一步 断开网络&#xff0c;拔网线 第二步 安装windows11 第三步 shiftF10调出命令行 第四步 输入命令&#xff1a; OOBE\BYPASSNRO回车自动重启&#xff0c;随后继续安装选择我没有网络&#xff0c;即可跳过win…

springboot144基于mvc的高校办公室行政事务管理系统设计与实现

简介 【毕设源码推荐 javaweb 项目】基于springbootvue 的 适用于计算机类毕业设计&#xff0c;课程设计参考与学习用途。仅供学习参考&#xff0c; 不得用于商业或者非法用途&#xff0c;否则&#xff0c;一切后果请用户自负。 看运行截图看 第五章 第四章 获取资料方式 **项…

二叉搜索树操作题目:删除二叉搜索树中的结点

文章目录 题目标题和出处难度题目描述要求示例数据范围进阶 解法一思路和算法代码复杂度分析 解法二思路和算法代码复杂度分析 题目 标题和出处 标题&#xff1a;删除二叉搜索树中的结点 出处&#xff1a;450. 删除二叉搜索树中的结点 难度 5 级 题目描述 要求 给定二叉…

Ubuntu Linux 下安装和卸载cmake 3.28.2版本

一、安装cmake 1.首先&#xff0c;先从cmake官网下载cmake-3.28.2-linux-x86_64.tar.gz 2.用FinalShell 等文件上传工具&#xff0c;将这个压缩包上传到 虚拟机的某个路径去&#xff08;自选&#xff09; 3. cd /usr/local/bin/&#xff0c;然后创建cmake文件夹&#xff0c;…

pnpm : 无法加载文件 D:\tool\nvm\nvm\node_global\pnpm.ps1,因为在此系统上禁止运行脚本

你们好&#xff0c;我是金金金。 场景 新创建的项目&#xff0c;在vscode编辑器终端输入 pnpm i&#xff0c;显示报错如上 解决 在终端输入get-ExecutionPolicy(查看执行策略/权限) 输出Restricted(受限的) 终端再次输入Set-ExecutionPolicy -Scope CurrentUser命令给用户赋予…

STM32低功耗模式

一、低功耗模式介绍 STM32 的低功耗模式有 3 种&#xff1a; 1)睡眠模式&#xff08;CM3 内核停止&#xff0c;外设仍然运行&#xff09; 2)停止模式&#xff08;所有时钟都停止&#xff09; 3)待机模式&#xff08;1.8V 内核电源关闭&#xff09; 在这三种低功耗模式中&#…

Vue3项目封装一个Element-plus Pagination分页

前言:后台系统分页肯定是离不开的,但是ui框架都很多,我们可以定义封装一种格式,所有项目按到这个结构来做. 实例: 第一步:在项目components组件新建一个分页组件,用来进行封装组件. 第二步:根据官方的进行定义,官方提供的这些,需要我们封装成动态模式 第三步:代码改造 <!-…

软件工程知识梳理0-概述

学好软件工程就必须理解软件工程到底是干什么的&#xff0c;为什么需要软件工程&#xff0c;以及怎么干的&#xff01;只有理解了软件工程的本质&#xff0c;才能更好的理解软件工程中各种工程手段和方法的目的。 个人开发模式 —> 小作坊开发模式 —> 软件工程开发模式 …