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

【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的生命周期

&#x1f40c;个人主页&#xff1a; &#x1f40c; 叶落闲庭 &#x1f4a8;我的专栏&#xff1a;&#x1f4a8; c语言 数据结构 javaEE 操作系统 Redis 石可破也&#xff0c;而不可夺坚&#xff1b;丹可磨也&#xff0c;而不可夺赤。 Vue 一、 Vue快速入门二、Vue常用指令2.1 v…...

Pandas 数据处理 类别数据和数值数据

要是作深度学习的话&#xff0c;可以直接用tensoflow框架的预处理层&#xff0c;我试过&#xff0c;比PyTorch自己写出来的会好一点&#xff0c;主要是简单好用。处理CSV文件 它类别的处理逻辑是onehot&#xff0c;比较标准稀疏&#xff0c;数值的话就是归一化了。 有时候不需…...

Android攻城狮学鸿蒙 -- 点击事件

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

jmeter性能测试常见的一些问题

一、request 请求超时设置 timeout 超时时间是可以手动设置的&#xff0c;新建一个 http 请求&#xff0c;在“高级”设置中找到“超时”设置&#xff0c;设置连接、响应时间为2000ms。 1. 请求连接超时&#xff0c;连不上服务器。 现象&#xff1a; Jmeter表现形式为&#xff…...

利用国外 vps 为 switch 设置代理服务器加速游戏下载

switch 在国内通过 wifi 连网后如果直接下载游戏的话速度特别慢&#xff0c;据说要挂一个晚上才能下载成功一个游戏。当我尝试下载时发现进度条基本不动&#xff0c;怀疑软件源是在国外的原因&#xff0c;于是想到可以通过国外 vps 代理中转的方式。具体步骤如下&#xff08;以…...

云计算安全的新挑战:零信任架构的应用

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

基于SSM的药房药品采购集中管理系统的设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用Vue技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…...

【GIT版本控制】--远程仓库

一、连接远程仓库 连接到远程仓库是在GIT中进行协作和备份的关键步骤。以下是连接到远程仓库的基本步骤&#xff1a; 获取远程仓库的URL&#xff1a;首先&#xff0c;你需要获得远程仓库的URL。通常&#xff0c;这是远程仓库提供给你的&#xff0c;可以是HTTPS或SSH URL。例如…...

1:Allotment,2:FeeSell,3:混合Allotment+FreeSell

根据您的描述&#xff0c;这似乎是与酒店预订相关的三种不同的方式。下面是对这三种方式的解释&#xff1a; Allotment&#xff08;配额&#xff09;&#xff1a;这是一种酒店预订方式&#xff0c;其中您可以与酒店签订协议&#xff0c;并购买其一定数量的房间或床位。在此之后…...

NFT Insider#110:The Sandbox与TB Media Global合作,YGG Web3游戏峰会阵容揭晓

引言&#xff1a;NFT Insider由NFT收藏组织WHALE Members、BeepCrypto出品&#xff0c;浓缩每周NFT新闻&#xff0c;为大家带来关于NFT最全面、最新鲜、最有价值的讯息。每期周报将从NFT市场数据&#xff0c;艺术新闻类&#xff0c;游戏新闻类&#xff0c;虚拟世界类&#xff0…...

在硅云上主机搭建wordpress并使用Astra主题和avada主题

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

基于SSM+Vue的物流管理系统的设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;VueHTML 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 …...

【洛谷】P1114 “非常男女”计划

思路&#xff1a;思路和上一篇一模一样哒~&#xff08;这里就不多解释啦&#xff09; 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 包含大量旨在帮助您进行化学系统计算研究的程序&#xff0c;而且发布的工具数量还在定期增加。 本节列出了 AmberTools 包含的主要程序。 这里列出了套件中包含的每个程序&#xff0c;并简要介绍了其主要功能&#xff0c;同时提供了相关文档参考。 对于大多数程…...

【嵌入式】常用串口协议与转换芯片详解

文章目录 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协议&#xff0c;正好也看到有评论说对如何选择USB转串口模块有些疑惑&#xff0c;其实我也一…...

缓存与数据库双写一致性问题解决方案

其实如果使用缓存&#xff0c;就会出现缓存和数据库的不一致问题&#xff0c;关键在于我们可以接受不一致的时间是多少&#xff0c;根据不同的需求采取不同的实现方案。 第一种&#xff1a;先更新数据库后更新缓存 做法简单&#xff0c;但是并发写情况下&#xff0c;会出现数…...

Java中的transient关键字是什么意思?

Java中的transient关键字是什么意思&#xff1f; 在Java中&#xff0c;transient 是一个关键字&#xff0c;用于修饰实例变量&#xff08;成员变量&#xff09;。当一个实例变量被声明为transient 时&#xff0c;它的值不会被持久化&#xff08;即不会被序列化&#xff09;。 …...

内存溢出和内存泄漏

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

Java数组:没错,不装了我就是书架。

&#x1f451;专栏内容&#xff1a;Java⛪个人主页&#xff1a;子夜的星的主页&#x1f495;座右铭&#xff1a;前路未远&#xff0c;步履不停 目录 一、数组的概念1、什么是数组&#xff1f;2、数组的创建3、数组的初始化Ⅰ、动态初始化Ⅱ、静态初始化 二、数组的使用1、数组中…...

什么是库存周转?如何用进销存系统提高库存周转率?

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

高防服务器能够抵御哪些网络攻击呢?

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

.Net Framework 4/C# 关键字(非常用,持续更新...)

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容,如果兼容将返回 true,如果不兼容则返回 false,在进行类型转换前,可以先使用 is 关键字判断对象是否与指定类型兼容,如果兼容才进行转换,这样的转换是安全的。 例如有:首先创建一个字符串对象,然后将字符串对象隐…...

Hive 存储格式深度解析:从 TextFile 到 ORC,如何选对数据存储方案?

在大数据处理领域&#xff0c;Hive 作为 Hadoop 生态中重要的数据仓库工具&#xff0c;其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式&#xff0c;很多开发者常常陷入选择困境。本文将从底…...

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开发中&#xff0c;集合判空是一个常见但容易出错的场景。传统方式虽然可行&#xff0c;但存在一些潜在问题&#xff1a; // 传统判空方式 if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...

AD学习(3)

1 PCB封装元素组成及简单的PCB封装创建 封装的组成部分&#xff1a; &#xff08;1&#xff09;PCB焊盘&#xff1a;表层的铜 &#xff0c;top层的铜 &#xff08;2&#xff09;管脚序号&#xff1a;用来关联原理图中的管脚的序号&#xff0c;原理图的序号需要和PCB封装一一…...

高分辨率图像合成归一化流扩展

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

【PX4飞控】mavros gps相关话题分析,经纬度海拔获取方法,卫星数锁定状态获取方法

使用 ROS1-Noetic 和 mavros v1.20.1&#xff0c; 携带经纬度海拔的话题主要有三个&#xff1a; /mavros/global_position/raw/fix/mavros/gpsstatus/gps1/raw/mavros/global_position/global 查看 mavros 源码&#xff0c;来分析他们的发布过程。发现前两个话题都对应了同一…...