main.ts
// 自定义指令
app.directive('color',(el,binding) => {el.style.color = binding.value
})
- 这段代码定义了一个名为
color
的自定义指令,并将其注册到Vue应用实例app
上。 - 自定义指令接收两个参数:
el
和binding
。el
是绑定指令的元素,而binding
是一个包含指令信息的对象,比如指令的值(value
)、参数(arg
)、修饰符(modifiers
)等。 - 在这个自定义指令中,直接修改了元素
el
的style.color
属性,将其设置为binding.value
,即指令绑定的值。由于color
是响应式的,并且与指令绑定,因此当color
的值变化时,元素的颜色也会自动更新。
html
<div v-color="color" @click="color = 'red'">自定义指令
</div>
v-color="color"
: 这里使用了自定义指令v-color
,并将其值绑定到Vue组件中的color
响应式引用上。这个指令的作用是将元素的文本颜色设置为color
变量的值。@click="color = 'red'"
: 这是一个事件监听器,当点击这个div
元素时,会将color
变量的值更改为'red'
。由于color
是响应式的,这种变化会自动触发Vue的更新机制,从而更新页面上绑定了color
的元素。
js
<script lang="ts" setup>
import { ref } from 'vue'let color = ref('orange')</script>
<script lang="ts" setup>
: 这是Vue 3 Composition API的语法糖,允许你在<script>
标签内使用TypeScript编写Vue组件,并且可以直接使用从vue
导入的Composition API函数(如ref
),而不需要在组件的setup
函数中显式地定义它们。import { ref } from 'vue'
: 从vue
包中导入ref
函数,用于创建一个响应式的引用。let color = ref('orange')
: 使用ref
函数创建一个响应式的引用color
,并初始化为'orange'
。这个引用可以被Vue组件的模板和Composition API的其他部分访问和修改。
自定义指令 | Vue.js (vuejs.org)
示例:封装数据加载中提示(v-loading)
main.ts
// 自定义指令
app.directive('loading',(el,binding) => {binding.value ? el.classList.add('loading') : el.classList.remove('loading')
})
html
<!-- 自定义指令 --><div v-loading="isLoading">加载完成</div>
js
let isLoading = ref(true)
css(全局使用可放入main.css中,父级元素记得使用绝对定位:position: relative;)
.loading::before {content: '加载中';font-size: 100px;font-weight: 600;width: 100%;height: 100%;position: absolute;top: 0;left: 0;background-color: pink;
}