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

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

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

相关文章:

  • React 教程
  • windows环境,gitbash可以连接拉取代码,但是idea没有权限
  • C#,红黑树(Red-Black Tree)的构造,插入、删除及修复、查找的算法与源代码
  • 离子束铣削(Ion Beam milling)
  • 惬意了解 —— 前端发展史
  • 【敬伟ps教程】视频动画
  • LeetCode 面试题08.04.幂集
  • FFmpeg开发笔记(十)Linux环境给FFmpeg集成vorbis和amr
  • 30个Linux性能问题诊断思路
  • 【构建部署_Docker介绍与安装】
  • 【框架学习 | 第六篇】SpringBoot基础篇(快速入门、自动配置原理分析、配置文件、整合第三方技术、拦截器、文件上传/下载、访问静态资源)
  • 使用yarn创建vite+vue3electron多端运行
  • 【C语言】人生重开模拟器
  • Elasticsearch使用Kibana进行基础操作
  • Python部署:将硬件(摄像头与热成像传感器)集成到实际应用中
  • 2017前端实习生面试总结
  • Android 控件背景颜色处理
  • axios 和 cookie 的那些事
  • CentOS7简单部署NFS
  • eclipse的离线汉化
  • GDB 调试 Mysql 实战(三)优先队列排序算法中的行记录长度统计是怎么来的(上)...
  • JavaScript设计模式与开发实践系列之策略模式
  • java中具有继承关系的类及其对象初始化顺序
  • Linux编程学习笔记 | Linux IO学习[1] - 文件IO
  • Mac 鼠须管 Rime 输入法 安装五笔输入法 教程
  • mysql_config not found
  • QQ浏览器x5内核的兼容性问题
  • Spring Boot快速入门(一):Hello Spring Boot
  • 算法-图和图算法
  • 7行Python代码的人脸识别
  • MyCAT水平分库
  • 从如何停掉 Promise 链说起
  • !!java web学习笔记(一到五)
  • $(document).ready(function(){}), $().ready(function(){})和$(function(){})三者区别
  • (06)Hive——正则表达式
  • (20050108)又读《平凡的世界》
  • (23)Linux的软硬连接
  • (cljs/run-at (JSVM. :browser) 搭建刚好可用的开发环境!)
  • (分布式缓存)Redis哨兵
  • (附源码)spring boot校园拼车微信小程序 毕业设计 091617
  • (附源码)ssm旅游企业财务管理系统 毕业设计 102100
  • (黑马C++)L06 重载与继承
  • (论文阅读30/100)Convolutional Pose Machines
  • (一)appium-desktop定位元素原理
  • (一)UDP基本编程步骤
  • (转)mysql使用Navicat 导出和导入数据库
  • (转)Sql Server 保留几位小数的两种做法
  • **PHP二维数组遍历时同时赋值
  • .bat文件调用java类的main方法
  • .NET 8.0 中有哪些新的变化?
  • .net framework profiles /.net framework 配置
  • .NET 常见的偏门问题
  • .NET和.COM和.CN域名区别
  • .NET面试题解析(11)-SQL语言基础及数据库基本原理
  • .net实现头像缩放截取功能 -----转载自accp教程网