Vue内置指令学习

原创已于 2023-06-28 18:45:30 修改 · 509 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #学习 #前端

于 2023-06-28 18:11:50 首次发布

前端专栏收录该内容

178 篇文章

订阅专栏

1. v-bind：

用于绑定数据到HTML元素的属性上。常见应用包括：

动态绑定图片的src属性：

<img v-bind:src="imageSrc">

动态绑定CSS类名：

<div v-bind:class="{ active: isActive }"></div>

动态绑定样式：

<div v-bind:style="{ color: textColor, fontSize: fontSize }"></div>

2. v-model：

用于实现双向数据绑定，常见应用包括：

表单输入框的双向绑定：

<input v-model="message">

复选框的双向绑定：

<input type="checkbox" v-model="isChecked">

单选框的双向绑定：

<input type="radio" v-model="selectedOption" value="option1">
<input type="radio" v-model="selectedOption" value="option2">

3. v-for：

用于循环渲染列表数据，常见应用包括：

渲染数组：

<ul>
  <li v-for="item in items">{{ item }}</li>
</ul>

渲染对象的属性：

<ul>
  <li v-for="(value, key) in object">{{ key }}: {{ value }}</li>
</ul>

4. v-if / v-else：

用于条件渲染，常见应用包括：

根据条件显示不同的内容：

<p v-if="showMessage">显示的消息</p>
<p v-else>隐藏的消息</p>

根据数组长度决定是否渲染列表：

<ul v-if="items.length > 0">
  <li v-for="item in items">{{ item }}</li>
</ul>
<p v-else>列表为空</p>

5. v-on：

用于绑定事件监听器，常见应用包括：

绑定点击事件：

<button v-on:click="handleClick">点击我</button>

绑定键盘事件：

<input v-on:keyup.enter="handleEnterKey">

绑定自定义事件：

<custom-component v-on:custom-event="handleCustomEvent"></custom-component>

6. v-show：

用于根据条件显示或隐藏元素，常见应用包括：

根据条件显示或隐藏元素：

<p v-show="showMessage">显示的消息</p>

根据数组长度决定是否显示列表：

<ul v-show="items.length > 0">
  <li v-for="item in items">{{ item }}</li>
</ul>

这些是Vue.js内置指令的详细说明和常见应用示例。通过使用这些指令，可以轻松地实现数据绑定、条件渲染、循环渲染等常见的页面交互功能。

自定义指令

在Vue.js中，可以通过自定义指令来扩展其功能。自定义指令可以用于操作DOM、监听事件、修改样式等。下面是自定义指令的详细说明：

1. 注册自定义指令：

Vue.directive('directiveName', {
  // 指令的生命周期钩子函数
  bind: function (el, binding, vnode) {
    // 指令绑定到元素时调用
  },
  inserted: function (el, binding, vnode) {
    // 元素插入到父节点时调用
  },
  update: function (el, binding, vnode, oldVnode) {
    // 元素更新时调用，可能发生在子组件更新之前
  },
  componentUpdated: function (el, binding, vnode, oldVnode) {
    // 元素和子组件更新后调用
  },
  unbind: function (el, binding, vnode) {
    // 指令从元素上解绑时调用
  }
});

2. 指令钩子函数的参数说明：

el：指令绑定的元素。

binding：一个对象，包含指令的信息，如指令的值、修饰符等。
vnode：Vue编译生成的虚拟节点。
oldVnode：上一个虚拟节点，仅在update和componentUpdated钩子函数中可用。

3. 使用自定义指令：

在HTML中使用自定义指令，可以通过v-前缀加上指令名的方式进行绑定：

<div v-directiveName="value"></div>

4. 指令的值和修饰符：

在指令绑定时，可以传递一个值和一些修饰符。指令的值可以是一个表达式，修饰符用于改变指令的行为。例如：

<div v-directiveName:modifier1.modifier2="value"></div>

在自定义指令中，可以通过binding.value获取指令的值，通过binding.modifiers获取修饰符。

通过自定义指令，可以实现一些特定的功能，例如自动聚焦、滚动加载、拖拽等。自定义指令可以根据实际需求添加相应的逻辑和操作DOM的方法来实现特定的功能。

下面是自定义copy和paste指令的详细说明：

copy自定义

1. 自定义`copy`指令：

Vue.directive('copy', {
  bind: function (el, binding, vnode) {
    el.addEventListener('copy', function (event) {
      event.preventDefault();
      const text = binding.value;
      if (text) {
        event.clipboardData.setData('text/plain', text);
        console.log('Text copied:', text);
      }
    });
  }
});

bind钩子函数会在指令绑定到元素时调用。
在copy事件监听器中，通过binding.value获取传递给指令的值。
使用event.clipboardData.setData方法将文本设置到剪贴板中。

在HTML中使用`v-copy`指令：

<div v-copy="copyText">点击复制</div>

paste自定义

1. 自定义`paste`指令：

Vue.directive('paste', {
  bind: function (el, binding, vnode) {
    el.addEventListener('paste', function (event) {
      event.preventDefault();
      const text = event.clipboardData.getData('text/plain');
      console.log('Text pasted:', text);
      vnode.context[binding.expression] = text;
    });
  }
});