文章目录
- 人工智能福利文章
- 前言
- 1. v-text / {{ expression }}
- 2.v-html
- 3.v-bind
- 4.v-on
- 5. v-model
- 6.v-for
- 7.v-if / v-else-if / v-else
- 9.v-show
- 10.v-cloak
- 11.v-pre
- 12.组件注册指令
- 13.动态组件指令
- 14.自定义指令
- 15.过滤器指令
- 写在最后
人工智能福利文章
- 【分享几个国内免费可用的ChatGPT镜像】
- 【10几个类ChatGPT国内AI大模型】
- 【用《文心一言》1分钟写一篇博客简直yyds】
- 【用讯飞星火大模型1分钟写一个精美的PPT】
前言
Vue.js 是一款流行的前端框架,它通过指令(Directive)实现了对 DOM 元素的控制,使得开发者能够更加方便地管理页面的展示和交互。下面是 Vue.js 常用指令及其使用场景:
1. v-text / {{ expression }}
v-text 指令可以用来将元素的文本内容设置为指定的值,{{ expression }} 语法也可以实现同样的效果。
使用方式如下:
<template><div><span v-text="message"></span><span>{{ message }}</span></div>
</template><script>
export default {data() {return {message: 'Hello, Vue!',}},
}
</script>
在上面的代码中,使用 v-text 指令和 {{ expression }} 语法将 message 数据对象中的值显示在元素中。
2.v-html
v-html 指令可以用来将元素的 HTML 内容设置为指定的值。
使用方式如下:
<template><div v-html="htmlContent"></div>
</template><script>
export default {data() {return {htmlContent: '<h1>Hello, Vue!</h1>',}},
}
</script>
在上面的代码中,使用 v-html 指令将 htmlContent 数据对象中的值作为 HTML 内容渲染在元素中。
3.v-bind
v-bind 指令可以用来动态地绑定 HTML 特性,例如元素的 class、style、href 等。通过将值绑定到 Vue.js 组件实例中的数据,可以轻松地动态更新元素。
使用方式如下:
<template><div v-bind:class="{ active: isActive }">{{ message }}</div>
</template><script>
export default {data() {return {isActive: true,message: 'Hello, Vue!',}},
}
</script>
在上面的代码中,使用 v-bind:class 指令将组件实例中的 isActive 数据动态地绑定到 div 元素的 class 中,根据 isActive 的值动态地添加或删除 active 类。
除了简写的 v-bind:class,也可以写成 v-bind:style、v-bind:href 等形式,根据需要动态地绑定元素的不同特性。
同时,为了简化模板语法,Vue.js 还提供了缩写的语法形式,在指令名前加上冒号即可,例如 :class=“{ active: isActive }”,与 v-bind:class=“{ active: isActive }” 效果相同。
4.v-on
v-on 指令可以用来绑定元素的事件或组件的自定义事件。
使用方式如下:
<template><div><button v-on:click="onClick">点击</button><my-component v-on:custom-event="onCustomEvent"></my-component></div>
</template><script>
import MyComponent from './MyComponent.vue';export default {components: {'my-component': MyComponent,},methods: {onClick() {console.log('Button clicked');},onCustomEvent(payload) {console.log('Custom event triggered with payload:', payload);},},
}
</script>
在上面的代码中,使用 v-on 指令绑定了 button 元素的 click 事件和 my-component 组件的 custom-event 自定义事件,并通过 methods 属性定义了对应的事件处理函数。
5. v-model
v-model 指令可以用来在表单元素(如 input、select、textarea 等)和 Vue.js 组件实例中的数据之间建立双向绑定。这意味着当用户在表单元素中输入数据时,Vue.js 组件实例中的数据会自动更新;反之,当 Vue.js 组件实例中的数据更新时,表单元素中的数据也会自动更新。
使用方式如下:
<template><input v-model="message" /><div>{{ message }}</div>
</template><script>
export default {data() {return {message: 'Hello, Vue!',}},
}
</script>
在上面的代码中,使用 v-model 指令将 input 元素的值与组件实例中的 message 数据建立双向绑定。当用户在 input 元素中输入数据时,组件实例中的 message 数据会自动更新;反之,当组件实例中的 message 数据更新时,input 元素中的值也会自动更新。同时,div 元素中的文本内容也会随着 message 数据的更新而动态更新。
除了上面的例子中使用的 input 元素,v-model 指令还可以用在 select、textarea 等表单元素中,根据需要建立双向绑定。
6.v-for
v-for 指令可以用来根据数据对象中的属性循环渲染元素。
使用方式如下:
<template><ul><li v-for="item in items" :key="item.id">{{ item.text }}</li></ul>
</template><script>
export default {data() {return {items: [{ id: 1, text: 'Item 1' },{ id: 2, text: 'Item 2' },{ id: 3, text: 'Item 3' },],}},
}
</script>
在上面的代码中,使用 v-for 指令根据 items 数据对象中的属性循环渲染 li 元素。
7.v-if / v-else-if / v-else
v-if / v-else-if / v-else 指令可以用来根据条件判断动态地显示或隐藏元素。
使用方式如下:
<template><div><div v-if="isShown">This is shown</div><div v-else-if="isHidden">This is hidden</div><div v-else>This is default</div></div>
</template><script>
export default {data() {return {isShown: true,isHidden: false,}},
}
</script>
在上面的代码中,使用 v-if / v-else-if / v-else 指令根据条件动态地显示或隐藏了三个 div 元素。
9.v-show
v-show 指令可以用来根据条件判断动态地显示或隐藏元素,与 v-if 不同的是,v-show 是通过设置元素的 display 样式来实现的。
使用方式如下:
<template><div><div v-show="isShown">This is shown</div><div v-show="isHidden">This is hidden</div></div>
</template><script>
export default {data() {return {isShown: true,isHidden: false,}},
}
</script>
在上面的代码中,使用 v-show 指令根据条件动态地显示或隐藏了两个 div 元素。
10.v-cloak
v-cloak 指令可以用来在 Vue.js 加载时防止元素显示未编译的 Mustache 标签。
使用方式如下:
<template><div v-cloak>{{ message }}</div>
</template><style>
[v-cloak] {display: none;
}
</style><script>
export default {data() {return {message: 'Hello, Vue!',}},
}
</script>
在上面的代码中,使用 v-cloak 指令在 div 元素显示之前防止 Mustache 标签的未编译显示,并设置了 [v-cloak] 样式以使元素在 Vue.js 加载完成之前隐藏。
11.v-pre
v-pre 指令可以用来防止 Vue.js 将指令中的表达式进行编译,保留原始的文本内容。
使用方式如下:
<template><div v-pre>{{ message }}</div>
</template><script>
export default {data() {return {message: 'Hello, Vue!',}},
}
</script>
在上面的代码中,使用 v-pre 指令保留了 div 元素中的原始文本内容,而不进行编译。
12.组件注册指令
Vue.component
Vue.component 方法可以用来注册全局组件。
使用方式如下:
<template><div><my-component></my-component></div>
</template><script>
import MyComponent from './MyComponent.vue';export default {components: {'my-component': MyComponent,},
}
</script>
在上面的代码中,使用 Vue.component 方法注册了一个名为 my-component 的全局组件,并在模板中使用了该组件。
13.动态组件指令
keep-alive / component
keep-alive 和 component 指令可以用来动态地渲染组件,通过设置不同的组件名或组件实例来实现组件的动态切换。
使用方式如下:
<template><div><component v-bind:is="currentComponent"></component><button v-on:click="switchComponent">切换组件</button></div>
</template><script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';export default {data() {return {currentComponent: 'component-a',}},components: {'component-a': ComponentA,'component-b': ComponentB,},methods: {switchComponent() {this.currentComponent = this.currentComponent === 'component-a' ? 'component-b' : 'component-a';},},
}
</script>
在上面的代码中,通过设置 v-bind:is 属性来动态渲染组件,通过 v-on:click 事件来切换组件。
14.自定义指令
Vue.directive
Vue.directive 方法可以用来注册自定义指令。
使用方式如下:
<template><div v-my-directive>自定义指令</div>
</template><script>
export default {directives: {'my-directive': {inserted: function (el) {el.style.color = 'red';}}},
}
</script>
在上面的代码中,通过 Vue.directive 方法注册了一个名为 my-directive 的自定义指令,并在模板中使用了该指令。
15.过滤器指令
Vue.filter
Vue.filter 方法可以用来注册全局过滤器。
使用方式如下:
<template><div>{{ message | reverse }}</div>
</template><script>
export default {data() {return {message: 'Hello, Vue!',}},filters: {reverse: function (value) {return value.split('').reverse().join('');}},
}
</script>
在上面的代码中,通过 Vue.filter 方法注册了一个名为 reverse 的全局过滤器,并在模板中使用了该过滤器。
以上就是 Vue.js 中常用的指令及其使用场景。希望能够帮助你更好的理解vue指令。欢迎转发或在评论区交流讨论。
写在最后
✨ 原创不易,希望各位大佬多多支持。
👍 点赞,你的认可是我创作的动力。
⭐️ 收藏,感谢你对本文的喜欢。
✏️ 评论,你的反馈是我进步的财富。