vue常用指令

简介: vue常用指令

Vue.js 提供了许多指令,这些指令用于在模板中绑定数据、事件、属性等。以下是一些常用的 Vue 指令及其示例代码:

1.v-bind:用于绑定属性。


<template>
<div>
<img v-bind:src="imageUrl" alt="My Image">
</div>
</template>


<script>
export default {
data() {
return {
imageUrl: 'https://example.com/image.jpg'
}
}
}
</script>

2.v-model:用于在表单元素上创建双向数据绑定。

<template>
<div>
<input v-model="message" placeholder="Enter something...">
<p>Message is: {{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: ''
}
}
}
</script>

3.v-ifv-else-ifv-else:用于条件渲染。

<template>
<div>
<p v-if="score > 90">Excellent</p>
<p v-else-if="score > 60">Pass</p>
<p v-else>Fail</p>
</div>
</template>
<script>
export default {
data() {
return {
score: 85
}
}
}
</script>

4.v-for:用于列表渲染。

<template>
<div>
<ul>
<li v-for="item in items" :key="item.id">
{{ item.name }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' }
]
}
}
}
</script>

5.v-on:用于监听 DOM 事件。

<template>
<div>
<button v-on:click="increment">Click me</button>
<p>Count: {{ count }}</p>
</div>
</template>


<script>
export default {
data() {
return {
count: 0
}
},
methods: {
increment() {
this.count++
}
}
}
</script>

6.v-show:用于根据条件显示或隐藏元素。

<template>
<div>
<p v-show="isVisible">This is visible</p>
</div>
</template>


<script>
export default {
data() {
return {
isVisible: true
}
}
}
</script>

7.v-pre:跳过该元素及其子元素的编译过程。

<template>
<div>
<p v-pre>{{ mustache will not be compiled }}</p>
</div>
</template>

8.v-cloak:在元素加载之前,隐藏未编译的 Mustache 标签。

<template>
<div v-cloak>
{{ message }}
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello Vue!'
}
},
mounted() {
// 延迟显示消息
setTimeout(() => {
this.message = 'Hello Vue!'
}, 1000)
}
}
</script>
<style>
[v-cloak] {
display: none;
}
</style>

这只是 Vue 指令的一部分,Vue 还提供了许多其他有用的指令和特性。为了更深入地了解这些指令和特性,建议查阅 Vue 的官方文档。


相关文章
|
2天前
|
JavaScript
|
3天前
|
存储 JavaScript API
Vue状态管理深度剖析:Vuex vs Pinia —— 从原理到实践的全面对比
Vue状态管理深度剖析:Vuex vs Pinia —— 从原理到实践的全面对比
11 2
|
5天前
|
JavaScript 前端开发 测试技术
使用 Vue CLI 脚手架生成 Vue 项目
通过 Vue CLI 创建 Vue 项目可以极大地提高开发效率。它不仅提供了一整套标准化的项目结构,还集成了常用的开发工具和配置,使得开发者可以专注于业务逻辑的实现,而不需要花费大量时间在项目配置上。
60 7
使用 Vue CLI 脚手架生成 Vue 项目
|
6天前
|
JavaScript 算法
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
8 1
|
6天前
|
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【已解决】
15 1
|
8天前
|
JavaScript 前端开发 Java
【vue实战项目】通用管理系统:作业列表
【vue实战项目】通用管理系统:作业列表
22 0
|
8天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
23 2
|
8天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息录入
【vue实战项目】通用管理系统:信息列表,信息录入
15 3
|
8天前
|
JavaScript 前端开发 API
【vue实战项目】通用管理系统:学生列表
【vue实战项目】通用管理系统:学生列表
31 2
|
8天前
|
缓存 JavaScript
【vue实战项目】通用管理系统:首页
【vue实战项目】通用管理系统:首页
14 2