vue常用指令

Vue.js 提供了一些内置的指令,这些指令可以用来操作 DOM 或者添加一些特殊的响应式行为。以下是一些常用的 Vue 指令:

  1. v-bind:用于动态地绑定一个或多个属性,或者一个组件的 prop 到表达式。

    复制代码
    复制代码
    <!-- 绑定一个属性 -->
    <img v-bind:src="imageSrc">
    
    <!-- 简写 -->
    <img :src="imageSrc">
  2. v-model:在表单输入和应用状态之间创建双向数据绑定。

    复制代码
    复制代码
    <input v-model="message" placeholder="edit me">
  3. v-on:用于监听 DOM 事件,并在触发时执行一些 JavaScript 代码。

    复制代码
    复制代码
    <button v-on:click="doSomething">Click me</button>
    
    <!-- 简写 -->
    <button @click="doSomething">Click me</button>
  4. v-if:根据表达式的真假条件渲染元素。

    复制代码
    复制代码
    <p v-if="seen">Now you see me</p>
  5. v-else:与 v-if 结合使用,当 v-if 的条件为假时渲染元素。

    复制代码
    复制代码
    <p v-if="seen">Now you see me</p>
    <p v-else>Now you don't</p>
  6. v-show:根据表达式的真假值切换元素的 display CSS 属性。

    复制代码
    复制代码
    <p v-show="seen">Now you see me</p>
  7. v-for:基于一个数组来渲染一个列表。

    复制代码
    复制代码
    <ul>
      <li v-for="item in items">{{ item.text }}</li>
    </ul>
  8. v-text:更新元素的 textContent。

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

    复制代码
    复制代码
    <div v-html="rawHtml"></div>
  10. v-once:只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。

    复制代码
    复制代码
    <span v-once>This will never change.</span>
  11. v-pre:跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。

    复制代码
    复制代码
    <span v-pre>{{ This will not be compiled }}</span>
  12. v-cloak :这个指令将在 Vue 实例结束编译时从绑定的 HTML 元素上移除。通常结合 CSS 规则如 [v-cloak] { display: none; } 使用,以避免页面加载时出现未编译的 Mustache 标签直到实例准备完毕。

    复制代码
    复制代码
    <div v-cloak>
      {{ message }}
    </div>

这些指令是 Vue.js 中的基础,它们使得开发者能够以声明式的方式构建用户界面。随着 Vue.js 的发展,还可能会有新的指令被引入。

相关推荐
像是套了虚弱散1 小时前
DevEco Studio与Web联合开发:打造鸿蒙混合应用的全景指南
开发语言·前端·华为·harmonyos·鸿蒙
衬衫chenshan2 小时前
【CTF】强网杯2025 Web题目writeup
前端
飞翔的佩奇2 小时前
【完整源码+数据集+部署教程】【天线&水】舰船战舰检测与分类图像分割系统源码&数据集全套:改进yolo11-repvit
前端·python·yolo·计算机视觉·数据集·yolo11·舰船战舰检测与分类图像分割系统
哆啦A梦15883 小时前
点击Top切换数据
前端·javascript·vue.js
程序猿追3 小时前
Vue组件化开发
前端·html
艾德金的溪4 小时前
redis-7.4.6部署安装
前端·数据库·redis·缓存
小光学长4 小时前
基于Vue的2025年哈尔滨亚冬会志愿者管理系统5zqg6m36(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
@PHARAOH4 小时前
WHAT - 受控组件和非受控组件
前端·javascript·react.js
生莫甲鲁浪戴4 小时前
Android Studio新手开发第二十六天
android·前端·android studio
JH30735 小时前
B/S架构、HTTP协议与Web服务器详解
前端·http·架构