vue的常用指令

  1. v-bind:用于响应地更新 HTML 属性。

    html 复制代码
    <img v-bind:src="imageSrc">  
    <!-- 简写形式 -->  
    <img :src="imageSrc">
  2. v-on:用于监听 DOM 事件,并在触发时运行一些 JavaScript 代码。

    html 复制代码
    <button v-on:click="handleClick">点击我</button>  
    <!-- 简写形式 -->  
    <button @click="handleClick">点击我</button>

    v-model:创建双向数据绑定。它主要用于表单元素

    html 复制代码
    <input v-model="message" placeholder="edit me">  
    <p>Message is: {{ message }}</p>
  3. v-if:根据表达式的真假条件渲染元素。

    html 复制代码
    <div v-if="showMessage">Hello</div>
  4. v-else :与v-ifv-else-if一起使用,表示"否则"的情况。

html 复制代码
<div v-if="score >= 90">优秀</div>  
<div v-else-if="score >= 60">及格</div>  
<div v-else>不及格</div>

v-for:基于源数据多次渲染元素或模板块

html 复制代码
<div v-for="item in items" :key="item.id">  
  {{ item.text }}  
</div>

v-text :更新元素的textContent

html 复制代码
<span v-text="message"></span>
  1. v-html :更新元素的innerHTML

    html 复制代码
    <div v-html="rawHtml"></div>
  2. v-show :根据条件切换元素的 CSS 属性display

    html 复制代码
    <div v-show="isVisible">Hello</div>

    v-once:元素和组件只渲染一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能

    html 复制代码
    <span v-once>这个将不会改变: {{ message }}</span>

    v-pre

  3. 用途 :跳过元素和其子元素的编译过程。这可以用来显示原始的 Mustache 标签。当你只想显示原始的 {``{}} 标签而不是将其解析为数据时,这个指令会很有用。

    html 复制代码
    <span v-pre>{{ 这将不会被编译 }}</span>

    输出将是 {``{ 这将不会被编译 }} 而不是解析后的数据。

v-cloak

  • 用途:在元素加载之前保持隐藏。这通常用于解决在 Vue 实例编译结束前,可能会短暂地显示未编译的 Mustache 标签的问题。
html 复制代码
<div v-cloak>  
  {{ message }}  
</div>

配合 CSS:

html 复制代码
[v-cloak] {  
  display: none;  
}

当 Vue 实例准备好后,v-cloak 指令将被移除,此时 <div> 将变得可见。

v-memo

  • 用途:为 v-for 或 v-if 提供的元素或组件设置记忆,使得只有在相关响应式依赖发生变化时才会重新渲染。这有助于优化性能,避免不必要的渲染。
html 复制代码
<div v-for="item in list" :key="item.id" v-memo="[item.id]">  
  {{ item.text }}  
</div>

在这个例子中,只有当 item.id 发生变化时,对应的 <div> 才会重新渲染。

相关推荐
永乐春秋43 分钟前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿44 分钟前
【前端】CSS
前端·css
ggdpzhk1 小时前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
小曲曲2 小时前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•3 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS4 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜5 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点5 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow5 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o5 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app