wap网站制作动态,烟台开发区做网站,wordpress建站属于前端,wordpress文章推荐插件文章目录 一、Vue3 指令二、注册-自定义指令三、常见自定义指令1. 聚焦指令#xff08;v-focus#xff09;2. 高亮指令#xff08;v-highlight#xff09;3. 防抖指令#xff08;v-debounce#xff09;4. 限制输入指令#xff08;v-limit#xff09;使用注意事项 四、相… 文章目录 一、Vue3 指令二、注册-自定义指令三、常见自定义指令1. 聚焦指令v-focus2. 高亮指令v-highlight3. 防抖指令v-debounce4. 限制输入指令v-limit使用注意事项 四、相关链接 一、Vue3 指令
Vue 3 指令是 Vue 模板中用于与 DOM 进行交互的特殊属性。指令以 v- 为前缀后面跟着指令名称。Vue 3 提供了一系列内置指令同时你也可以创建自定义指令。下面是一些 Vue 3 中常用的内置指令
v-bind 用于属性绑定将表达式的结果绑定到一个元素的属性上。
img v-bind:srcimageSrc altVue logo简写形式为 :
img :srcimageSrc altVue logov-model 用于在表单元素上创建双向数据绑定。
input v-modelmessage placeholderedit me
pMessage is: {{ message }}/pv-on 用于监听 DOM 事件并在触发时执行一些 JavaScript 代码。
button v-on:clickincrementIncrement/button简写形式为
button clickincrementIncrement/buttonv-if、v-else-if、v-else 用于条件渲染。根据表达式的值来决定是否渲染一个元素。
div v-iftype ARender A
/div
div v-else-iftype BRender B
/div
div v-elseRender Others
/divv-for 用于列表渲染。基于源数据多次渲染一个元素或模板块。
div v-foritem in items :keyitem.id{{ item.text }}
/divv-show 根据表达式的值的真假切换元素的 display CSS 属性。
p v-showisVisibleHello when visible/pv-pre 跳过这个元素和它的子元素的编译过程。可以用来显示原始的 Mustache 标签。
div v-pre{{ this will not be compiled }}
/divv-cloak 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
div v-cloak{{ message }}
/div[v-cloak] {display: none;
}v-once 将元素和组件标记为只渲染一次。
span v-onceThis will only be rendered once./spanv-text 更新元素的 textContent。
span v-textmessage/spanv-html 更新元素的 innerHTML。
div v-htmlhtmlContent/div除了这些内置指令Vue 3 还允许你注册自定义指令。自定义指令可以扩展 Vue 的基本功能用于执行复杂的 DOM 操作或处理特定的业务逻辑。
二、注册-自定义指令
注册自定义指令有两种方式全局注册和局部注册。全局注册的指令可以在任何 Vue 实例中使用而局部注册的指令只能在特定的 Vue 实例或组件中使用。
注册自定义指令的基本语法如下
// 全局注册
Vue.directive(focus, {// 当被绑定的元素插入到 DOM 中时……inserted: function (el) {// 聚焦元素el.focus()}
})// 局部注册
const app Vue.createApp({})app.directive(focus, {// 定义指令
})app.mount(#app)三、常见自定义指令
在 Vue 3 中自定义指令允许你注册一些可以在模板中重复使用的行为。这些行为可以附加到任何元素上并在元素的特定生命周期钩子中执行自定义逻辑。以下是一些 Vue 3 中常见的自定义指令及其案例代码
1. 聚焦指令v-focus
当页面加载时自动将焦点聚焦到指定的元素上。
// main.js 或其他初始化文件
import { createApp } from vue
import App from ./App.vueconst app createApp(App)// 全局注册自定义指令 v-focus
app.directive(focus, {mounted(el) {el.focus()}
})app.mount(#app)!-- App.vue --
templatedivinput v-focus typetext placeholder自动聚焦到这个输入框/div
/template2. 高亮指令v-highlight
将匹配的文本在元素中进行高亮显示。
// main.js 或其他初始化文件
import { createApp } from vue
import App from ./App.vueconst app createApp(App)// 全局注册自定义指令 v-highlight
app.directive(highlight, {beforeMount(el, binding) {el.innerHTML el.innerHTML.replace(new RegExp(binding.value, gi), function(matched) {return span stylebackground-color: yellow;${matched}/span})}
})app.mount(#app)!-- App.vue --
templatedivp v-highlightvue在这里vue 会被高亮显示。/p/div
/template3. 防抖指令v-debounce
对事件处理函数进行防抖处理减少不必要的计算或请求。
// main.js 或其他初始化文件
import { createApp } from vue
import App from ./App.vueconst app createApp(App)// 全局注册自定义指令 v-debounce
app.directive(debounce, {beforeMount(el, binding) {let timer nullel.addEventListener(input, function() {clearTimeout(timer)timer setTimeout(() {binding.value()}, binding.arg || 500)})}
})app.mount(#app)!-- App.vue --
templatedivinput v-debouncesearch typetext placeholder防抖处理输入后延迟500ms执行/div
/templatescript
export default {methods: {search() {console.log(执行搜索)}}
}
/script4. 限制输入指令v-limit
限制输入框中字符的数量。
// main.js 或其他初始化文件
import { createApp } from vue
import App from ./App.vueconst app createApp(App)// 全局注册自定义指令 v-limit
app.directive(limit, {mounted(el, binding) {el.addEventListener(input, function() {if (el.value.length binding.value) {el.value el.value.slice(0, binding.value)}})}
})app.mount(#app)!-- App.vue --
templatedivinput v-limit10 typetext placeholder最多输入10个字符/div
/template使用注意事项
在使用自定义指令时要确保指令名称不与 Vue 的内置指令名称冲突。在自定义指令的钩子函数中el 参数是绑定指令的元素binding 参数是一个对象包含了一些有用的属性如 name指令名、value指令的绑定值、oldValue指令绑定的前一个值、arg指令的参数、modifiers包含修饰符的对象。如果需要监听多个事件或进行更复杂的 DOM 操作可以考虑
四、相关链接
Vue3官方地址Vue3中文文档「Vue3系列」Vue3简介及安装「Vue3系列」Vue3起步/创建项目
