【Vue】Vue快速入门、Vue常用指令、Vue的生命周期
🐌个人主页: 🐌 叶落闲庭
💨我的专栏:💨
c语言
数据结构
javaEE
操作系统
Redis
石可破也,而不可夺坚;丹可磨也,而不可夺赤。
Vue
- 一、 Vue快速入门
- 二、Vue常用指令
- 2.1 v-bind&v-model
- 2.2 v-on
- 2.3 v-if
- 2.4 v-show
- 2.5 v-for
- 三、Vue的生命周期
一、 Vue快速入门
- 1.新建HTML页面,引入Vue.js文件
<script src="js/vue.js"></script>
- 2.在JS代码区域,创建Vue核心对象,进行数据绑定
<script>//1.创建vue对象new Vue({el:"#app",data() {return {username:""}}});
</script>
- 3.编写视图
<div id="app"><input v-model="username"><!-- 插值表达式 -->{{username}}</div>
二、Vue常用指令
- 指令:HTML标签上带有Vs前缀的特殊属性,不同指令具有不同含义。例如:V-if,V-for…
- 常用指令:
指令 | 作用 |
---|---|
v-bind | 为HTML标签绑定属性值,如设置href,css样式等 |
v-model | 在表单元素上创建双向数据绑定 |
v-on | 为HTML标签绑定事件 |
v-if | 条件性的渲染某元素,判定为true时渲染,否则不渲染 |
v-else | 条件性的渲染某元素,判定为true时渲染,否则不渲染 |
v-else-if | 条件性的渲染某元素,判定为true时渲染,否则不渲染 |
v-show | 根据条件展示某元素,区别在于切换的是display属性的值 |
v-for | 列表渲染,遍历容器的元素或者对象的属性 |
2.1 v-bind&v-model
<div id="app"><a v-bind:href="url">点击</a><input v-model="url"></div>
<script>//1.创建vue对象new Vue({el:"#app",data() {return {username:"",url:"http:www.baidu.com"}}});
</script>
2.2 v-on
<div id="app"><input type="button" value="按钮" v-on:click="show()"><br><input type="button" value="按钮" @click="show()"></div>
<script>//1.创建vue对象new Vue({el:"#app",methods:{show() {alert("我被点了");}}});
</script>
2.3 v-if
<div id="app"><div v-if="count==1">div1</div><div v-else-if="count==2">div2</div><div v-else>div3</div><input v-model="count">
</div>
<script>//1.创建vue对象new Vue({el:"#app",data(){return {username:"",count:3}}});
</script>
2.4 v-show
<div id="app"><input v-model="count"><div v-show="count==4">div4 v-show</div>
</div>
<script>//1.创建vue对象new Vue({el:"#app",data(){return {username:"",count:3}}});
</script>
2.5 v-for
- v-for内addr是自定义参数,addrs表示Vue返回的数组addrs[“北京”,“上海”,“广州”]
<div id="app"><div v-for="addr in addrs">{{addr}}<br>
</div>
<script>//1.创建vue对象new Vue({el:"#app",data(){return {username:"",count:3,addrs:["北京","上海","广州"]}}});
</script>
加索引:
<div id="app"><div v-for="(addr,i) in addrs">{{i + 1}} -- {{addr}}<br>
</div>
三、Vue的生命周期
- Vue的生命周期分为八个阶段,每触发一个生命周期事件,会自动执行一个生命周期的方法
状态 | 阶段周期 |
---|---|
beforeCreate | 创建前 |
created | 创建后 |
beforeMount | 载入前 |
mounted | 挂载完成 |
beforeUpdate | 更新前 |
updated | 更新后 |
beforeDestory | 销毁前 |
desoryed | 销毁后 |
- mounted:挂载完成,Vue初始化成功,HTML页面渲染成功。
-
- 发送异步请求,加载数据
相关文章:

【Vue】Vue快速入门、Vue常用指令、Vue的生命周期
🐌个人主页: 🐌 叶落闲庭 💨我的专栏:💨 c语言 数据结构 javaEE 操作系统 Redis 石可破也,而不可夺坚;丹可磨也,而不可夺赤。 Vue 一、 Vue快速入门二、Vue常用指令2.1 v…...
Pandas 数据处理 类别数据和数值数据
要是作深度学习的话,可以直接用tensoflow框架的预处理层,我试过,比PyTorch自己写出来的会好一点,主要是简单好用。处理CSV文件 它类别的处理逻辑是onehot,比较标准稀疏,数值的话就是归一化了。 有时候不需…...

Android攻城狮学鸿蒙 -- 点击事件
具体参考:华为官网学习地址 1、点击事件,界面跳转 对于一个按钮设置点击事件,跳转页面。但是onclick中,如果pages前边加上“/”,就没法跳转。但是开发工具加上“/”才会给出提示。不知道是不是开发工具的bug。&#…...

jmeter性能测试常见的一些问题
一、request 请求超时设置 timeout 超时时间是可以手动设置的,新建一个 http 请求,在“高级”设置中找到“超时”设置,设置连接、响应时间为2000ms。 1. 请求连接超时,连不上服务器。 现象: Jmeter表现形式为ÿ…...
利用国外 vps 为 switch 设置代理服务器加速游戏下载
switch 在国内通过 wifi 连网后如果直接下载游戏的话速度特别慢,据说要挂一个晚上才能下载成功一个游戏。当我尝试下载时发现进度条基本不动,怀疑软件源是在国外的原因,于是想到可以通过国外 vps 代理中转的方式。具体步骤如下(以…...

云计算安全的新挑战:零信任架构的应用
文章目录 云计算的安全挑战什么是零信任架构?零信任架构的应用1. 多因素身份验证(MFA)2. 访问控制和策略3. 安全信息和事件管理(SIEM)4. 安全的应用程序开发 零信任架构的未来 🎉欢迎来到云计算技术应用专栏…...

基于SSM的药房药品采购集中管理系统的设计与实现
末尾获取源码 开发语言:Java Java开发工具:JDK1.8 后端框架:SSM 前端:采用Vue技术开发 数据库:MySQL5.7和Navicat管理工具结合 服务器:Tomcat8.5 开发软件:IDEA / Eclipse 是否Maven项目&#x…...
【GIT版本控制】--远程仓库
一、连接远程仓库 连接到远程仓库是在GIT中进行协作和备份的关键步骤。以下是连接到远程仓库的基本步骤: 获取远程仓库的URL:首先,你需要获得远程仓库的URL。通常,这是远程仓库提供给你的,可以是HTTPS或SSH URL。例如…...
1:Allotment,2:FeeSell,3:混合Allotment+FreeSell
根据您的描述,这似乎是与酒店预订相关的三种不同的方式。下面是对这三种方式的解释: Allotment(配额):这是一种酒店预订方式,其中您可以与酒店签订协议,并购买其一定数量的房间或床位。在此之后…...

NFT Insider#110:The Sandbox与TB Media Global合作,YGG Web3游戏峰会阵容揭晓
引言:NFT Insider由NFT收藏组织WHALE Members、BeepCrypto出品,浓缩每周NFT新闻,为大家带来关于NFT最全面、最新鲜、最有价值的讯息。每期周报将从NFT市场数据,艺术新闻类,游戏新闻类,虚拟世界类࿰…...

在硅云上主机搭建wordpress并使用Astra主题和avada主题
目录 前言 准备 操作 DNS解析域名 云主机绑定域名 安装wordpress网站程序 网站内Astra主题设计操作 安装主题 网站内avada主题安装 上传插件 上传主题 选择网站主题 前言 一开始以为云虚拟主机和云服务器是一个东西,只不过前者是虚拟的后者是不是虚拟的…...

基于SSM+Vue的物流管理系统的设计与实现
末尾获取源码 开发语言:Java Java开发工具:JDK1.8 后端框架:SSM 前端:VueHTML 数据库:MySQL5.7和Navicat管理工具结合 服务器:Tomcat8.5 开发软件:IDEA / Eclipse 是否Maven项目:是 …...
【洛谷】P1114 “非常男女”计划
思路:思路和上一篇一模一样哒~(这里就不多解释啦) ACcode: #include <iostream> #include <cstring> #include <algorithm> using namespace std; const int N 2e510; int n,a[N],f[N]; int main() { ios::sync_with_st…...
list中符合 多条件中筛选符合条件的值
//查找身高在1.8米及以上的男生 // List<SsxlwdBean> boys list.stream().filter(s->s.getGender() && s.getHeight() > 1.8).collect(Collectors.toList()); xlseachitem list.stream().filter(list->list.xlname.contains(Upstrquery)||list.xlbm.…...
Amber中的信息传递——章节1.2-第三部分
程序列表 Amber 包含大量旨在帮助您进行化学系统计算研究的程序,而且发布的工具数量还在定期增加。 本节列出了 AmberTools 包含的主要程序。 这里列出了套件中包含的每个程序,并简要介绍了其主要功能,同时提供了相关文档参考。 对于大多数程…...

【嵌入式】常用串口协议与转换芯片详解
文章目录 0 前言1 一个通信的协议的组成2 常用协议名词解释2.1 UART2.2 RS-2322.3 RS-4852.4 RS-422 3 常用的芯片3.1 MAX2323.2 CP21023.3 CH3403.4 FT232 0 前言 最近有点想研究USB协议,正好也看到有评论说对如何选择USB转串口模块有些疑惑,其实我也一…...
缓存与数据库双写一致性问题解决方案
其实如果使用缓存,就会出现缓存和数据库的不一致问题,关键在于我们可以接受不一致的时间是多少,根据不同的需求采取不同的实现方案。 第一种:先更新数据库后更新缓存 做法简单,但是并发写情况下,会出现数…...
Java中的transient关键字是什么意思?
Java中的transient关键字是什么意思? 在Java中,transient 是一个关键字,用于修饰实例变量(成员变量)。当一个实例变量被声明为transient 时,它的值不会被持久化(即不会被序列化)。 …...

内存溢出和内存泄漏
内存溢出和内存泄漏 内存溢出 内存溢出相对于内存泄漏来说,尽管更容易被理解,但是同样的,内存溢出也是引发程序崩溃的罪魁祸首之一。由于GC一直在发展,所以一般情况下,除非应用程序占用的内存增长速度非常快…...

Java数组:没错,不装了我就是书架。
👑专栏内容:Java⛪个人主页:子夜的星的主页💕座右铭:前路未远,步履不停 目录 一、数组的概念1、什么是数组?2、数组的创建3、数组的初始化Ⅰ、动态初始化Ⅱ、静态初始化 二、数组的使用1、数组中…...

什么是库存周转?如何用进销存系统提高库存周转率?
你可能听说过这样一句话: “利润不是赚出来的,是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业,很多企业看着销售不错,账上却没钱、利润也不见了,一翻库存才发现: 一堆卖不动的旧货…...
高防服务器能够抵御哪些网络攻击呢?
高防服务器作为一种有着高度防御能力的服务器,可以帮助网站应对分布式拒绝服务攻击,有效识别和清理一些恶意的网络流量,为用户提供安全且稳定的网络环境,那么,高防服务器一般都可以抵御哪些网络攻击呢?下面…...

select、poll、epoll 与 Reactor 模式
在高并发网络编程领域,高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表,以及基于它们实现的 Reactor 模式,为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。 一、I…...
.Net Framework 4/C# 关键字(非常用,持续更新...)
一、is 关键字 is 关键字用于检查对象是否于给定类型兼容,如果兼容将返回 true,如果不兼容则返回 false,在进行类型转换前,可以先使用 is 关键字判断对象是否与指定类型兼容,如果兼容才进行转换,这样的转换是安全的。 例如有:首先创建一个字符串对象,然后将字符串对象隐…...
Hive 存储格式深度解析:从 TextFile 到 ORC,如何选对数据存储方案?
在大数据处理领域,Hive 作为 Hadoop 生态中重要的数据仓库工具,其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式,很多开发者常常陷入选择困境。本文将从底…...

Golang——7、包与接口详解
包与接口详解 1、Golang包详解1.1、Golang中包的定义和介绍1.2、Golang包管理工具go mod1.3、Golang中自定义包1.4、Golang中使用第三包1.5、init函数 2、接口详解2.1、接口的定义2.2、空接口2.3、类型断言2.4、结构体值接收者和指针接收者实现接口的区别2.5、一个结构体实现多…...
深入理解Optional:处理空指针异常
1. 使用Optional处理可能为空的集合 在Java开发中,集合判空是一个常见但容易出错的场景。传统方式虽然可行,但存在一些潜在问题: // 传统判空方式 if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...

AD学习(3)
1 PCB封装元素组成及简单的PCB封装创建 封装的组成部分: (1)PCB焊盘:表层的铜 ,top层的铜 (2)管脚序号:用来关联原理图中的管脚的序号,原理图的序号需要和PCB封装一一…...

高分辨率图像合成归一化流扩展
大家读完觉得有帮助记得关注和点赞!!! 1 摘要 我们提出了STARFlow,一种基于归一化流的可扩展生成模型,它在高分辨率图像合成方面取得了强大的性能。STARFlow的主要构建块是Transformer自回归流(TARFlow&am…...

【PX4飞控】mavros gps相关话题分析,经纬度海拔获取方法,卫星数锁定状态获取方法
使用 ROS1-Noetic 和 mavros v1.20.1, 携带经纬度海拔的话题主要有三个: /mavros/global_position/raw/fix/mavros/gpsstatus/gps1/raw/mavros/global_position/global 查看 mavros 源码,来分析他们的发布过程。发现前两个话题都对应了同一…...