vue的常用指令

简介: vue的常用指令
  1. v-bind:用于响应地更新 HTML 属性。
<img v-bind:src="imageSrc">  
<!-- 简写形式 -->  
<img :src="imageSrc">
  1. v-on:用于监听 DOM 事件,并在触发时运行一些 JavaScript 代码。
<button v-on:click="handleClick">点击我</button>  
<!-- 简写形式 -->  
<button @click="handleClick">点击我</button>
  1. v-model:创建双向数据绑定。它主要用于表单元素
<input v-model="message" placeholder="edit me">  
<p>Message is: {{ message }}</p>
  1. v-if:根据表达式的真假条件渲染元素。
<div v-if="showMessage">Hello</div>
  1. v-else:与v-ifv-else-if一起使用,表示“否则”的情况。
<div v-if="score >= 90">优秀</div>  
<div v-else-if="score >= 60">及格</div>  
<div v-else>不及格</div>

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

<div v-for="item in items" :key="item.id">  
  {{ item.text }}  
</div>

v-text:更新元素的textContent

<span v-text="message"></span>
  1. v-html:更新元素的innerHTML
<div v-html="rawHtml"></div>
  1. v-show:根据条件切换元素的 CSS 属性display
<div v-show="isVisible">Hello</div>
  1. v-once:元素和组件只渲染一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能
<span v-once>这个将不会改变: {{ message }}</span>
  1. v-pre
  2. 用途:跳过元素和其子元素的编译过程。这可以用来显示原始的 Mustache 标签。当你只想显示原始的 {{}} 标签而不是将其解析为数据时,这个指令会很有用。
<span v-pre>{{ 这将不会被编译 }}</span>
  1. 输出将是 {{ 这将不会被编译 }} 而不是解析后的数据。

v-cloak

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

配合 CSS:

[v-cloak] {  
  display: none;  
}

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

v-memo

  • 用途:为 v-for 或 v-if 提供的元素或组件设置记忆,使得只有在相关响应式依赖发生变化时才会重新渲染。这有助于优化性能,避免不必要的渲染。

 

<div v-for="item in list" :key="item.id" v-memo="[item.id]">  
  {{ item.text }}  
</div>

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

相关文章
|
6天前
|
JavaScript 前端开发 测试技术
使用 Vue CLI 脚手架生成 Vue 项目
通过 Vue CLI 创建 Vue 项目可以极大地提高开发效率。它不仅提供了一整套标准化的项目结构,还集成了常用的开发工具和配置,使得开发者可以专注于业务逻辑的实现,而不需要花费大量时间在项目配置上。
63 7
使用 Vue CLI 脚手架生成 Vue 项目
|
3天前
|
JavaScript
|
1天前
|
JavaScript
vue知识点
vue知识点
10 3
|
4天前
|
存储 JavaScript API
Vue状态管理深度剖析:Vuex vs Pinia —— 从原理到实践的全面对比
Vue状态管理深度剖析:Vuex vs Pinia —— 从原理到实践的全面对比
11 2
|
7天前
|
JavaScript 算法
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
10 1
|
7天前
|
JavaScript
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
20 1
|
9天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息录入
【vue实战项目】通用管理系统:信息列表,信息录入
17 3
|
9天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
26 2
|
1天前
|
前端开发 JavaScript
Vue底层实现原理总结
Vue底层实现原理总结
|
9天前
|
JavaScript 前端开发 Java
【vue实战项目】通用管理系统:作业列表
【vue实战项目】通用管理系统:作业列表
22 0