vue的生命周期有那些

1.v-text

相当于js的innerText

<div v-text="'姓名:'+name"></div>const name = ref('张三'); //声明

 2.v-html

相当于js的innerHTML

<div v-html="html"></div>const html = ref('<s>这是一段文字</s>')

 3.v-bind

动态绑定属性,简写是冒号( : )

<img v-bind:src="url">
<!-- v-bind简写(:) -->
<img :src="url">const url = ref('图片地址')

4.v-on

绑定事件,简写是@

<button v-on:click="changeName">点击更新姓名</button>
<!-- v-on简写(@) -->
<button @click="changeName">点击更新姓名</button>let changeName = () => {name.value = '李四'
}

事件传参(括号在传参是是必须加,不传参可加可不加;但以下场景必须加:获取event、子组件事件传参等)

<button @click="changeName('李四')">点击更新姓名</button>let changeName = (newName) => {name.value = newName
}

事件修饰符

5.v-model

可以用 v-model 指令在表单 <input><textarea>  <select> 元素上创建双向数据绑定

<input type="text" v-model="name">const name = ref('张三');

6.v-if  v-else-if v-else

v-if:条件性地渲染一块内容这块内容只会在指令的表达式返回 truthy[1] 值的时候被渲染。

v-elsev-else-if:是跟js中的if一样,v-if的else块和else-if块

[1]truthy(真值)指的是在布尔值上下文中,转换后的值为真的值。所有值都是真值,除非它们被定义为 假值(即除 false0""nullundefined  NaN 以外皆为真值)

7.v-show

根据条件展示元素, 不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display

 8.v-for

渲染数组列表, v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组,而 item 则是被迭代的数组元素的别名

v-for 还支持一个可选的第二个参数,即当前项的索引。

通过Key管理状态

默认模式是高效的,但只适用于列表渲染输出的结果不依赖子组件状态或者临时 DOM 状态 (例如表单输入值) 的情况

<ul><li v-for="(item,index) in list">{{index}}-{{item}}</li>
</ul>const list = ref([1, 2, 3, 4])

9.v-pre 

元素内具有 v-pre,所有 Vue 模板语法都会被保留并按原样渲染。最常见的用例就是显示原始双大括号标签及内容。

10.v-cloak

当网络较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题

<style>[v-cloak]{display:none;}
</style><div v-cloak>{{ message }}
</div>

11.v-once

只渲染元素和组件一次,随后的渲染,使用了此指令的元素/组件及其所有的子节点,都会当作静态内容并跳过,这可以用于优化更新性能。

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

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

相关文章

pytorch 函数整理

pytorch 函数整理 method_code.init.code.co_argcount&#xff1a;获取method_code.init 函数的输入变量的数目&#xff1b; input_params method_code.init.code.co_varnames&#xff1a;获取method_code.init 函数的输入变量的名称列表&#xff1b; __enter__和__exit__魔…

【Preprocessing数据预处理】之Information Leakage

在机器学习中&#xff0c;当使用来自训练数据集之外的信息来创建模型时&#xff0c;就会发生信息泄露。这可能导致在训练期间过于乐观的性能估计&#xff0c;并且可能导致模型在未见数据上表现不佳&#xff0c;因为它可能无法从训练数据泛化到现实世界。 信息泄露的示例 1. 使…

Element UI +Vue页面生成二维码的方法

目录 一、方法一 采用qrcodejs2生成1.1、安装二维码插件qrcodejs21.2、在vue文件中&#xff0c;引入生成二维码插件1.3、构建二维码对象qrCodeDiv 一、方法二 -采用qrcode生成2.1、安装qrcode2.2、页面引入2.3、方法里边使用2.4、options 三、方法三 vue-qr3.1、安装3.2、页面引…

【论文复现】摩尔线程版AnimateAnyone

code&#xff1a;MooreThreads/Moore-AnimateAnyone (github.com) paper&#xff1a;Animate Anyone (humanaigc.github.io) 1. Inference Inference没啥难度&#xff0c;按照readme来就行&#xff0c;就是分开下载权重比较慢&#xff0c;注意权重文件严格按照文档目录树来放…

自然语言处理: 第十五章RAG(Retrieval Augmented Generation)

论文地址: [2005.11401] Retrieval-Augmented Generation for Knowledge-Intensive NLP Tasks (arxiv.org) 代码地址: 可以参考百度文心一言为例子&#xff0c;与本文代码无关 本篇文章主要是介绍Retrieval Augmented Generation下文简称RAG技术的实现原理和代码实现以及大体…

【Springboot】--如何将springboot+vue项目部署到云服务器?

目录 一、准备工作 1、购买云服务器 2、获取面板地址 二、jdk和数据库 1、安装环境 2、配置jdk环境变量 3、java版本的问题 4、添加数据库 三、前端部署 1、vue 2、创建站点 ​编辑 四、后端部署 1、application.yml 2、idea打包 3、运行jar包 4、开放端口 五、…

扩散模型基础学习

扩散模型基础学习 AIGC是什么扩散模型的发展VAEGANDDPMstable Diffusion 基于transformer架构的Diffusion模型transformer 参考 AIGC是什么 AIGC&#xff0c;全称AI generated content (人工智能生产内容)&#xff0c;是一种利用AI自动生产内容的生产方式。 其发展依赖以下三个…

25-3 SQL 注入 - 二阶注入

环境准备:构建完善的安全渗透测试环境:推荐工具、资源和下载链接_渗透测试靶机下载-CSDN博客 一、二阶注入介绍 二次注入是一种常见于Web应用程序中的安全漏洞,也被称为SQL二阶注入。相对于一次注入漏洞,二次注入更不易被察觉,但却具有同样危险的攻击潜力。简而言之,二次…

20240309web前端_第一周作业_完成用户注册界面

作业一&#xff1a;完成用户注册界面 成果展示&#xff1a; 完整代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-…

java SSM二手交易网站系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

一、源码特点 java SSM厂房管理系统是一套完善的web设计系统&#xff08;系统采用SSM框架进行设计开发&#xff0c;springspringMVCmybatis&#xff09;&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S…

C++day2——引用、结构体、类

思维导图&#xff1a; 2、自己封装一个矩形类(Rect)&#xff0c; 拥有私有属性&#xff1a;宽度(width)、高度(height)&#xff0c; 定义公有成员函数初始化函数:void init(int w, int h) 更改宽度的函数:set_w(int w)更改高度的函数:set_h(int h) 输出该矩形的周长和面积函…

Mac上使用M1或M2芯片的设备安装Node.js时遇到一些问题,比如卡顿或性能问题

对于Mac上使用M1或M2芯片的设备可能会遇到在安装Node.js时遇到一些问题&#xff0c;比如卡顿或性能问题。这可能是因为某些软件包或工具在M1或M2芯片上的兼容性不佳。为了解决这个问题&#xff0c;您可以尝试以下方法&#xff1a; 1. 使用Rosetta模式 对于一些尚未适配M1或M2…

剧本杀小程序开发:解锁推理乐趣,畅享剧情盛宴

在繁忙的生活中&#xff0c;我们总是期待一份不期而遇的惊喜。今天&#xff0c;就让我们一起打开“盲盒一番赏”小程序&#xff0c;探索那份属于你的独特惊喜吧&#xff01; “盲盒一番赏”小程序&#xff0c;是一个集合了丰富多样的盲盒商品的线上平台。无论你是盲盒控&#…

20240312-1-Graph(图)

Graph(图) 在面试的过程中,一般不会考到图相关的问题,因为图相关的问题难,而且描述起来很麻烦. 但是也会问道一下常见的问题,比如,最短路径,最小支撑树,拓扑排序都被问到过. 图常用的表示方法有两种: 分别是邻接矩阵和邻接表. 邻接矩阵是不错的一种图存储结构,对于边数相对顶点…

Vue3全家桶 - Vue3 - 【4】侦听器

侦听器 一、 组合式API&#xff1a; 1.1 watch()函数 创建侦听器: 语法:// 先导入 watch 函数 import { watch } from vue watch(source, callback, options)source&#xff1a; 需要侦听的数据源&#xff0c;可以是 ref&#xff08;包括计算属性&#xff09;、一个响应式对…

Linux内核介绍and下载

Linux内核介绍and下载 介绍下载下载历史版本 我是将军我一直都在&#xff0c;。&#xff01; 介绍 ● Linux是c语言写成的 ● 符合POSIX标准 ● 作者是芬兰的Linus Torvalds ● 发展依赖于五个重要支柱: unix操作系统、minix操作系统、 GNU计划、POSIX标准和互联网 ● 2.6之后…

打卡--MySQL8.0 二 (用户权限管理)

一、mysql8修改了安全规则&#xff0c;不能像mysql5.7 一次性创建用户并授权&#xff0c;需要分批创建。 1、注意在MySQL8.0版本中创建用户一定要在配置文件中增加如下内容&#xff0c;来兼容旧的程序运行。 default_authentication_pluginmysql_native_password 2、创建用户…

全景解析 Partisia Blockchain:以用户为中心的全新数字经济网络

在区块链世界中&#xff0c;以比特币、以太坊网络为代表的主流区块链奠定了该领域早期的基础&#xff0c;并让去中心化、点对点、公开透明以及不可逆成为了该领域固有的意识形态。事实上&#xff0c;过于透明正在成为区块链规模性采用的一大障碍&#xff0c;我们看到 90% 以上的…

【Attribute】Inspector视图枚举字段范围限定特性

简介 为了提升枚举的复用性&#xff0c;有时候我们可以通过限定枚举字段的范围来避免定义新的枚举类型&#xff0c;例如有一个代表方向的枚举&#xff08;包括None&#xff0c;Left&#xff0c;Up&#xff0c;Right&#xff0c;Down&#xff09;&#xff0c;全局方向&#xff0…

C++基础知识(二)

C输入输出&#xff1a; cin代表标准输入&#xff1b;操作符>>用来表示输入。输入使用cin>>&#xff1a;数值类型的数据输入时必须以空格、Tab键或回车来间隔开。 cout代表标准输出&#xff1b;<<用来表示输出&#xff0c;cout<<使变量或字符串输出到…