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 的发展,还可能会有新的指令被引入。

相关推荐
蓝婷儿8 分钟前
每天一个前端小知识 Day 28 - Web Workers / 多线程模型在前端中的应用实践
前端
琹箐8 分钟前
Ant ASpin自定义 indicator 报错
前端·javascript·typescript
小小小小小惠13 分钟前
Responsetype blob会把接口接收的二进制文件转换成blob格式
前端·javascript
爱电摇的小码农13 分钟前
【深度探究系列(5)】:前端开发打怪升级指南:从踩坑到封神的解决方案手册
前端·javascript·css·vue.js·node.js·html5·xss
kymjs张涛38 分钟前
零一开源|前沿技术周报 #7
android·前端·ios
爱编程的喵43 分钟前
React入门实战:从静态渲染到动态状态管理
前端·javascript
Tttian6221 小时前
npm init vue@latestnpm error code ETIMEDOUT
前端·vue.js·npm
患得患失9491 小时前
【前端】【组件库开发】【原理】【无框架开发】现代网页弹窗开发指南:从基础到优化
前端
唐叔在学习1 小时前
不用装插件!3轮对话,我用油猴脚本+AI复刻了掘金闪念笔记,真香!
javascript·浏览器
AliciaIr1 小时前
深入React事件机制:解密“合成事件”与“事件委托”的底层奥秘
javascript·react.js