1. 自定义指令（Custom Directives） - asf - 沸点 - 掘金

1年前

1. 自定义指令（Custom Directives）
Vue.js中的指令可以帮助我们操作DOM元素，比如v-model指令可以将输入框和数据绑定起来，v-show指令可以根据条件显示或隐藏元素。但是Vue.js也允许我们创建自定义指令，从而扩展它的功能。自定义指令可以用来处理DOM事件、操作DOM属性、添加样式等等。

下面是一个例子，我们创建一个自定义指令v-delay，它可以延迟触发点击事件：

<template>
<button v-delay="500" @click="handleClick">点击我</button>
</template>

<script>
export default {
directives: {
delay: {
inserted: function (el, binding) {
el.addEventListener('click', function () {
setTimeout(function () {
binding.value()
}, binding.arg)
})
}
}
},
methods: {
handleClick: function () {
console.log('点击事件被延迟触发了')
}
}
}
</script>
在上面的代码中，我们定义了一个自定义指令v-delay并将它绑定到按钮上，它的参数是500，也就是延迟500ms触发点击事件。我们在指令的inserted钩子中监听点击事件，并使用setTimeout函数延迟触发binding.value()，也就是handleClick函数。

2. 动态组件（Dynamic Components）
Vue.js允许我们使用一个组件来动态渲染另一个组件，这使得我们可以根据需要动态地切换组件。
#挑战每日一条沸点#

3. 插槽（Slots）
Vue.js中的插槽是一种强大的功能，它允许我们将子组件的内容插入到父组件中，从而创建灵活的组件结构。

展开

青训营-快乐出发