当前位置： 首页 > news >正文

测开 | Vue速查知识点

news 文章来源：https://blog.csdn.net/qq_52099094/article/details/133517411 2025/1/16 18:52:00

文章目录

    • Vue知识
      • 1. Vue 概述
      • 2. Vue 代码格式
      • 3. Vue 指令
        • 3.1 v-bind & v-model
        • 3.2 v-on
        • 3.3 v-if和v-show
        • 3.4 v-for
      • 4. 生命周期

Vue知识

1. Vue 概述

  • 简介：
    Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

  • 原理：
    MVVM:其实是Model-View-ViewModel的缩写，有3个单词，具体释义如下：

    • Model: 数据模型，特指前端中通过请求从后台获取的数据
    • View: 视图，用于展示数据的页面，可以理解成我们的html+css搭建的页面，但是没有数据
    • ViewModel: 数据绑定到视图，负责将数据（Model）通过JavaScript的DOM技术，将数据展示到视图（View）上

如图所示就是MVVM开发思想的含义：

1 - MVVM架构思想-2023-10-219:30:32.png

2. Vue 代码格式

  • 框架格式：
<!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><script src="js/vue.js"></script>
</head>
<body><!--视图区域--><div id="app"><input type="text" v-model="message">{{message}}</div></body>
<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{message: "Hello Vue"},methods:{}})
</script>
</html>

3. Vue 指令

  • Vue指令如下表：
指令作用
v-bind为HTML标签绑定属性值，如设置 href , css样式等
v-model在表单元素上创建双向数据绑定
v-on为HTML标签绑定事件
v-if条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else
v-else-if
v-show根据条件展示某元素，区别在于切换的是display属性的值
v-for列表渲染，遍历容器的元素或者对象的属性
3.1 v-bind & v-model
指令作用
v-bind为HTML标签绑定属性值，如设置 href , css样式等
v-model在表单元素上创建双向数据绑定
  • v-bind: 为HTML标签绑定属性值，如设置 href , css样式等。当vue对象中的数据模型发生变化时，标签的属性值会随之发生变化。
<a v-bind:href="url">链接1</a>

<a :href="url">链接2</a>

<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{message: "Hello Vue",url:"https://www.baidu.com"},methods:{}})
</script>

  • v-model： 在表单元素上创建双向数据绑定。什么是双向？

    • vue对象的data属性中的数据变化，视图展示会一起变化
    • 视图数据发生变化，vue对象的data属性中的数据也会随着变化。

    data属性中数据变化，我们知道可以通过赋值来改变，但是视图数据为什么会发生变化呢？只有表单项标签！所以双向绑定一定是使用在表单项标签上的。编写如下代码：

<a v-bind:href="url">链接1</a>

<input type="text" v-model="url">

<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{message: "Hello Vue",url:"https://www.baidu.com"},methods:{}})
</script>

表单项标签：

  1. <input>：用于创建一个表单输入框，可以输入文本、密码、日期、数字等。
  2. <textarea>：用于创建一个多行文本输入框。
  3. <select>：用于创建一个下拉选择框，用户可以从预定义的选项中选择一个或多个选项。
  4. <checkbox>：用于创建一个复选框，用户可以从多个选项中选择一个或多个选项。
  5. <radio>：用于创建一个单选按钮，用户可以从多个选项中选择一个选项。
  6. <button>：用于创建一个按钮，用户可以点击执行特定的操作。
  7. <submit>：用于创建一个提交按钮，用于提交整个表单内容。
  8. <reset>：用于创建一个重置按钮，用于将表单内容重置为初始状态。
  9. <label>：用于创建一个标签，用于描述表单字段的用途或说明。
  10. <fieldset>：用于创建一个字段集，用于将相关的表单字段组合在一起。
  11. <legend>：用于创建字段集的标题，描述字段集的内容。

4 - v-bind&v-model展览图-2023-10-312:22:49.png

3.2 v-on
指令作用
v-on用来给html标签绑定事件的
  • v-on语法给标签的事件绑定的函数，必须是vue对象种声明的函数
<input type="button" value="点我一下" v-on:click="demo()">

<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{},methods: {demo: function(){alert("你点我了一下...");}}})
</script>

3 - v-on展览图-2023-10-311:03:07.png

3.3 v-if和v-show
指令描述
v-if条件性的渲染某元素，判定为true时渲染,否则不渲染
v-if-else
v-else
v-show根据条件展示某元素，区别在于切换的是display属性的值
  • 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>

<script>// 定义 Vue 对象new Vue({el: "#app",data: {age: 20}})
</script>

2 - v-if 展览图-2023-10-311:01:48.png

  • 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>

<script>// 定义 Vue 对象new Vue({el: "#app",data: {age: 20}})
</script>

2 - v-if 展览图-2023-10-311:01:48.png

3.4 v-for
指令描述
v-for列表渲染，遍历容器的元素或者对象的属性
  • 格式：
<标签 v-for="变量 in 列表">{{变量名}}</标签>

<标签 v-for="(变量名,索引变量) in 列表">{{索引变量 + 1}} {{变量名}}</标签>
  • 模板：
<div id="app"><div v-for="addr in addrs">{{addr}}</div><hr><div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}</div>
</div>

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

5 - v-for展览图-2023-10-313:00:43.png

4. 生命周期

  • vue的生命周期：指的是vue对象从创建到销毁的过程。vue的生命周期包含8个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为（钩子方法）。
状态阶段周期
beforeCreate创建前
created创建后
beforeMount挂载前
mounted挂载完成
beforeUpdate更新前
updated更新后
beforeDestroy销毁前
destroyed销毁后
  • Vue渲染流程：

1668867134683-2023-10-313:09:04.png

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

  • 模板：
<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{},methods: {},mounted () {alert("vue挂载完成,发送请求到服务端")}})
</script>

相关文章：

测开 | Vue速查知识点

文章目录 Vue知识1. Vue 概述2. Vue 代码格式3. Vue 指令3.1 v-bind & v-model3.2 v-on3.3 v-if和v-show3.4 v-for 4. 生命周期 Vue知识 1. Vue 概述 简介&#xff1a; Vue.js&#xff08;读音 /vjuː/, 类似于 view&#xff09; 是一套构建用户界面的 渐进式框架。与其他…...

编程日记 2023/10/3 14:32:01

数据结构——二叉树的基本概念及顺序存储（堆）

目录 一.前言 二.树概念及结构 2.1 树的概念 2.2 树的相关概念 2.3 树的表现 2.4 树在实际中的应用&#xff08;表示文件系统的目录树结构&#xff09; 三.二叉树的概念及结构 3.1 概念 3.2 特殊的二叉树 3.3 二叉树的性质 3.4 二叉树的存储结构 3.4.1 顺序存储 3…...

编程日记 2023/10/3 14:31:01

acwing算法基础之基础算法--整数二分算法

目录 1 知识点2 代码模板 1 知识点 有单调性一定可以二分&#xff0c;但在某些情况下&#xff0c;不具有单调性也可以二分。 单调性也可以抽象成某类性质&#xff0c;分界点左边不满足此性质&#xff0c;而右边满足此性质。当然也可以分界点左边满足此性质&#xff0c;而右边不…...

编程日记 2023/10/3 14:28:58

windows C 开发

在win下用C/C开发 非图形界面 应用程序 基础环境包括3个内容1. API : 一般是系统(包括c标准库和其他dll)提供的2. 编译器 : 可以是gnu的,可以是微软提供的3. 编辑器 : 随意都可以 // 不再考虑范围开发方式(API编译器) 原生windows API 使用 Windows API 来编写非视窗代码。…...

编程日记 2023/10/3 14:26:56

C语言——动态内存管理详解（内存结构、动态内存函数、易错题、柔性数组）

本篇概要 本篇文章从基本出发讲述为什么要存在动态内存分配&#xff0c;动态内存函数有哪些&#xff0c;常见的动态内存错误&#xff0c;一些关于内存分配的练习题以及柔性数组的相关知识。 文章目录 本篇概要1.为什么存在动态内存分配1.1为什么要动态分配内存1.2内存结构 2.常…...

编程日记 2023/10/3 14:24:54

2023年全国控制科学与工程学科评估结果 - 自动化考研

考研选择学校时&#xff0c;控制科学与工程考研学校排名情况怎样是广大考研学子十分关心的问题&#xff0c;以下是我们自动化考研联盟为大家整理得最新控制科学与工程学科评估结果情况&#xff0c;还比较权威&#xff0c;供大家参考。 最后祝大家一战成硕,有其他问题欢迎评论区…...

编程日记 2023/10/3 14:22:53

React wangEditor5 使用说明

1、支持包安装 yarn add wangeditor/editor # 或者 npm install wangeditor/editor --saveyarn add wangeditor/editor-for-react # 或者 npm install wangeditor/editor-for-react --save2、使用 import wangeditor/editor/dist/css/style.css // 引入 cssimport { useState…...

编程日记 2023/10/3 14:18:48

vue 实现数字验证码功能

需求&#xff1a;写了一个 手机发送验证码后 输入固定验证码的功能 封装成一个组件,如下: <template><div class"conts"><div class"box"><div class"code_list"><div :class"[ code_item, hideIndex 0 ? co…...

编程日记 2023/10/3 14:15:45

【计算机网络】HTTP协议详解（举例解释，超级详细）

文章目录 一、HTTP协议简单介绍 1、1 什么是HTTP协议 1、2 再次理解“协议” 二、HTTP请求 2、1 HTTP的工作过程 2、1、1 demo代码 2、2 URL 介绍 2、2、1 urlencode 和 urldecode 2、3 HTTP 请求格式 三、HTTP响应 3、1 响应demo 3、2 HTTP 响应格式 四、HTTP 请求和响应中的…...

编程日记 2023/10/3 14:14:43

PCB放置过孔技巧

合理的放置过孔能有效的节约面积。 我们根据嘉立创的pcb工艺能力中写出单双面板最小过孔为0.3mm(内径)/0.5mm(外径) 设置过孔尺寸外直径为24mil&#xff08;0.61mm&#xff09;&#xff09;内直径为12mil&#xff08;0.305mm&#xff09; 嘉立创PCB工艺加工能力范围说明-嘉立…...

编程日记 2023/10/3 14:13:43

淘宝商品详情接口数据采集用于上货，无货源选品上货，采集淘宝天猫商品详情数据

淘宝商品详情接口数据采集可用于上货。先通过关键字搜索接口&#xff0c;抓取到批量的商品ID&#xff0c;再将商品ID传入商品详情数据采集接口的请求参数中&#xff0c;从而达到批量抓取商品详情数据的功能。 接口名称&#xff1a;item_get&#xff0c;获取商品详情数据&#…...

编程日记 2023/10/3 14:10:40

DoS和DDos攻攻击

介绍 DDoS 和 DoS 攻击是我们最常见的网络攻击之一&#xff0c;而且历史相当悠久&#xff0c;算是很经典的两种攻击方式&#xff0c;但它们实际上是如何运作的呢&#xff1f; 虽然两者基本上都能够让工作停摆&#xff0c;但其中有很大的差异&#xff0c;接下来我们将逐一说明&a…...

编程日记 2023/10/3 14:05:35

Python实时采集Windows CPU\MEMORY\HDD使用率

文章目录 安装psutil库在Python脚本中导入psutil库获取CPU当前使用率&#xff0c;并打印结果获取内存当前使用率&#xff0c;并打印结果获取磁盘当前使用情况&#xff0c;并打印结果推荐阅读 要通过Python实时采集Windows性能计数器的数据&#xff0c;你可以使用psutil库。psut…...

编程日记 2023/10/3 14:04:34

【改造中序遍历算法】1038. 从二叉搜索树到更大和树

1038. 从二叉搜索树到更大和树 解题思路 改造中序遍历算法先遍历右子树 然后累加当前节点的值 再遍历左子树 /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* TreeNode() {}* TreeNode…...

编程日记 2023/10/3 14:03:33

克服网络安全压力：如何掌控无限的云数据

管理云中的数字风险比以往任何时候都更加重要。数字化转型引发的云数据呈指数级增长&#xff0c;为安全分析师创造了一个更大的威胁环境。随着威胁行为者继续危害组织最敏感的数据&#xff0c;这一挑战将会加剧。 预计未来五年全球网络犯罪成本将激增&#xff0c;从 2022 年的…...

编程日记 2023/10/3 14:02:32

【数据结构和算法】--N叉树中，返回某些目标节点到根节点的所有路径

目录 一、前言二、具体实现及拓展2.1、递归-目标节点到根节点的路径数据2.2、list转换为tree结构2.3、tree转换为list结构 一、前言 这么多年工作经历中&#xff0c;“数据结构和算法”真的是超重要&#xff0c;工作中很多业务都能抽象成某种数据结构问题。下面是项目中遇到的…...

编程日记 2023/10/3 14:01:31

进程和线程的区别 线程之间共享的资源

线程和进程都是操作系统中的执行单位&#xff0c;但它们在以下几个方面存在区别&#xff1a; 相同处&#xff1a; 1.执行环境&#xff1a;线程和进程都有自己的执行上下文&#xff0c;包括程序计数器、寄存器和栈&#xff0c;可以独立执行指令。 2.并发性&#xff1a;线程和进…...

编程日记 2023/10/3 14:00:30

基于Matlab实现logistic方法（源码+数据）

Logistic回归是一种常用的分类算法&#xff0c;适用于二分类问题。本文将介绍如何使用Matlab实现Logistic回归方法&#xff0c;并通过一个示例演示其应用。 文章目录 引言实现步骤1. 数据准备2. 特征缩放3. 模型训练4. 模型评估 源码数据下载 引言 Logistic回归是一种广泛应用…...

编程日记 2023/10/3 13:59:29

leetCode 121. 买卖股票的最佳时机 贪心算法

给定一个数组 prices &#xff0c;它的第 i 个元素 prices[i] 表示一支给定股票第 i 天的价格。 你只能选择 某一天 买入这只股票&#xff0c;并选择在 未来的某一个不同的日子 卖出该股票。设计一个算法来计算你所能获取的最大利润。 返回你可以从这笔交易中获取的最大利润。…...

编程日记 2023/10/3 13:56:27

《Oracle系列》Oracle 索引使用情况查看

查询用户的索引 select index_name,table_name,tablespace_name,index_type,uniqueness,statusfrom dba_indexeswhere owner <用户名>;查询用户的索引列 select index_name,table_name,column_name,index_owner,table_ownerfrom dba_ind_columnswhere table_owner &l…...

编程日记 2023/10/3 13:53:23

解决Invalid bound statement (not found)错误~

报错如下所示&#xff1a; 找了好久&#xff0c;刚开始以为是名称哪里写的有问题&#xff0c;但仔细检查了好多遍都不是 最后发现了问题如下所示&#xff1a; UserMapper里面的内容被我修改了&#xff0c;但classes中的内容还是原来的内容&#xff0c;所以才导致了编译器报错n…...

编程日记 2023/10/3 13:52:22

基于SpringBoot的反诈宣传平台设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09;有保障的售后福利 代码参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作…...

编程日记 2023/10/3 13:50:20

【改进哈里鹰算法(NCHHO)】使用混沌和非线性控制参数来提高哈里鹰算法的优化性能，解决车联网相关的路由问题（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

编程日记 2023/10/3 13:48:18

【C语言】宏定义

&#x1f6a9; WRITE IN FRONT&#x1f6a9; &#x1f50e; 介绍&#xff1a;"謓泽"正在路上朝着"攻城狮"方向"前进四"&#x1f50e;&#x1f3c5; 荣誉&#xff1a;2021|2022年度博客之星物联网与嵌入式开发TOP5|TOP4、2021|2222年获评百大博…...

编程日记 2023/10/3 13:47:17

库存三层模型概述

库存分层 &#xff08;1&#xff09;电商库存体系分为三层&#xff1a;销售层、调度层、仓库层。 库存三层模型&#xff1a;销售库存&#xff0c;调度层属于订单领域-履约。实物库存属于库存领域 WMS的库存跟调度层是一致的。 但是销售库存跟调度层可能不一致&#xff0c;因为…...

编程日记 2023/10/3 13:46:16

SNERT预备队招新CTF体验赛-Web（SWCTF）

目录 1、F12 2、robots 3、game1-喂青蛙 4、game 2 - flap bird 5、game 3 - Clash 6、Get&Post 7、sql &#xff08;1&#xff09;手工注入 &#xff08;2&#xff09;工具注入 8、命令执行漏洞 9、文件上传漏洞 10、文件泄露 11、php反序列化漏洞 12、PHP绕…...

编程日记 2023/10/3 13:44:14

OpenGLES：绘制一个彩色、旋转的3D圆柱

一.概述 上一篇博文讲解了怎么绘制一个彩色旋转的立方体 这一篇讲解怎么绘制一个彩色旋转的圆柱 圆柱的顶点创建主要基于2D圆进行扩展&#xff0c;与立方体没有相似之处 圆柱绘制的关键点就是将圆柱拆解成&#xff1a;两个Z坐标不为0的圆 一个长方形的圆柱面 绘制2D圆的…...

编程日记 2023/10/3 13:43:13

【QT开发（6）】0926-QT 中加入 fastDDS 通信库的程序使用说明

在智能驾驶中&#xff0c;DDS有可能被广泛使用&#xff0c;因此推出这篇说明教程。 1、基于【QT开发&#xff08;5&#xff09;】教程的项目文档进行开发 2、安装DDS 查看《【eProsima Fast DDS&#xff08;1&#xff09;】安装eProsima Fast DDS》 至少安装: foonathan_m…...

编程日记 2023/10/3 13:37:07

js 判断字符串中是否包含某个字符串

方法一(推荐使用): indexOf() indexOf() 方法&#xff1a;返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现&#xff0c;则该方法返回 -1。 var str "LiHeErNAN"; console.log(str.indexOf("A") ! -1 ); // true方法二:m…...

编程日记 2023/10/3 13:35:05

部署在阿里云ECS服务器上的微服务项目中获取到的时间和windows的时间不一样的问题

继上一篇文章《阿里云ECS服务器无法发送邮件问题解决方案》之后&#xff0c;又发现登录的时候发送邮件中的时间和自己windows上的时间不一样&#xff0c;大概找了一下原因&#xff0c;是LocaDateTime使用的时区不一样导致的远程服务器和本机时间不一致。 只需要在LocaDateTime…...

编程日记 2023/10/3 13:34:04

云南 网站建设网站/百度收录规则

某条消息发布后&#xff0c;距离当前时间多久的时间显示 1 //显示发布时间的函数2 function pastTime(_createTime) {3 //var createTime _createTime.substr(0, _createTime.lastIndexOf(" ")) //不能包含毫秒&#xff0c;如果有毫秒&#xff0c;进行截取4 …...

编程日记 2025/1/16 17:38:08

有没有专门做翻译的网站/最近的重要新闻

原文地址&#xff1a;http://jason61719.blog.163.com/blog/static/11417604120106325114274/ 一、Eclipse,MyEclipse安装插件方法大全(dropins) 使用eclipse&#xff0c;最看重的还是它的插件数量比较多&#xff0c;使用起来比较方便&#xff0c;但是大多数人对eclipse的插件…...

编程日记 2025/1/16 16:13:23

网站开发单位/武汉seo人才

数据类型及长度 char 字符型&#xff0c;占用一个字节 int 整型&#xff0c;通常代表特定机器中整数的自然长度 short 16位 int 16位或32位 long 32位 各编译器可根据硬件特性自主选择合适的类型长度&#xff0c;但要遵循下列限制&#xf…...

编程日记 2025/1/16 14:47:06

国外建设工程网站/系统优化软件十大排名

AI派在读学生小姐姐BeyonceJava实战项目练习群长按识别下方二维码&#xff0c;按需求添加扫码添加Beyonce小姐姐扫码关注进Java学习大礼包今天是机器学习100天学习计划的第2天&#xff0c;我们将实现一个简单的线性回归模型。线性回归模型就是基于单一特征&#xff08;X&#x…...

编程日记 2025/1/16 14:14:36

做网站应规避的风险/媒体推广

本文同步发表在我的个人博客中&#xff1a;沧沧凉凉​www.cclliang.com随着前端的飞速发展&#xff0c;现在制作界面时出现了非常多的好看的样式&#xff0c;比如说全屏滚动效果&#xff0c;能够带来很舒服的视觉体验。先来看一下什么是全屏滚动&#xff1a;这是fullpage.js的官…...

编程日记 2025/1/16 9:41:01

自己做网站和凡科的区别/青岛seo建站

名字 strstr, strcasestr - 在字符串中定位一个子串概要 #include <string.h>char *strstr(const char *haystack, const char *needle);char *strcasestr(const char *haystack, const char *needle); // 是GNU的扩展描述 strstr()函数在haysta…...

编程日记 2025/1/16 4:17:21