Vue学习笔记——内置指令与自定义指令（六）

2023-09-11 01:48:03

一、一些内置指令

1. v-text

v-text 指令用于将一个表达式渲染为文本内容，并插入到元素的 innerText 中。这与插值语法 {{expression}} 不同，后者会将表达式渲染为 HTML 代码。

<div id="app">
  <p>{{ message }}</p>
  <p v-text="message"></p>
</div>

const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, world!'
  }
});

上面的例子中，{{ message }} 会将 message 数据渲染为 HTML 代码 <p>Hello, world!</p>，而 v-text="message" 会将 message 数据渲染为纯文本 "Hello, world!"。

2. v-html

v-html 指令用于将一个表达式渲染为 HTML 代码，并插入到元素的 innerHTML 中。这与 v-text 指令不同，后者只渲染文本内容。

<div id="app">
  <p v-html="html"></p>
</div>

const app = new Vue({
  el: '#app',
  data: {
    html: '<p>Hello, world!</p>'
  }
});

上面的例子中，v-html="html" 会将 html 数据渲染为 HTML 代码 <p>Hello, world!</p>，并将其插入到 <p> 元素中。

3. v-model

v-model 指令用于在表单元素和 Vue 实例的数据之间创建双向绑定。这意味着当表单元素的值发生变化时，Vue 实例的数据也会随之更新，反之亦然。

<div id="app">
  <input v-model="message">
  <p>{{ message }}</p>
</div>

const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, world!'
  }
});

上面的例子中，v-model="message" 会在 <input> 元素和 message 数据之间建立双向绑定。这意味着当用户在 <input> 元素中输入内容时，message 数据也会随之更新，反之亦然。

4. v-bind

v-bind 指令用于将 Vue 实例的数据绑定到 HTML 元素的属性上。这与直接在 HTML 元素中设置属性值不同，后者不会响应 Vue 实例数据的变化。

<div id="app">
  <p v-bind:id="id"></p>
</div>

const app = new Vue({
  el: '#app',
  data: {
    id: 'my-id'
  }
});

上面的例子中，v-bind:id="id" 会将 id 数据绑定到 <p> 元素的 id 属性上。这意味着当 id 数据发生变化时，<p> 元素的 id 属性值也会随之更新。

5. v-on

v-on 指令用于在 HTML 元素上监听事件，并执行相应的回调函数。这与直接在 HTML 元素中设置事件监听器不同，后者不会响应 Vue 实例数据的变化。

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

const app = new Vue({
  el: '#app',
  methods: {
    handleClick() {
      console.log('你点击了按钮！');
    }
  }
});

上面的例子中，v-on:click="handleClick" 会在 <button> 元素上监听 click 事件，并执行 handleClick 方法。这意味着当用户点击 <button> 元素时，handleClick 方法就会被执行。

6. v-if

v-if 指令用于根据 Vue 实例数据的条件来决定是否渲染一个元素。这与直接在 HTML 元素中使用 if 语句不同，后者不会响应 Vue 实例数据的变化。

<div id="app">
  <p v-if="show">显示</p>
</div>

const app = new Vue({
  el: '#app',
  data: {
    show: true
  }
});

上面的例子中，v-if="show" 会根据 show 数据的值来决定是否渲染 <p> 元素。当 show 数据为 true 时，<p> 元素会被渲染，否则 <p> 元素不会被渲染。

7. v-for

v-for 指令用于遍历一个数组或对象，并为每个元素渲染一个模板。这与直接在 HTML 元素中使用 for 循环不同，后者不会响应 Vue 实例数据的变化。

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

const app = new Vue({
  el: '#app',
  data: {
    items: ['Apple', 'Orange', 'Banana']
  }
});

上面的例子中，v-for="item in items" 会遍历 items 数组，并为每个元素渲染一个 <li> 元素。每个 <li> 元素的内容为该元素的值。

二、自定义指令

自定义指令允许您创建自己的指令，并将其用于 Vue 组件中。这使您可以扩展 Vue 的功能，并创建自己的指令来满足您的特定需求。

要创建自定义指令，您需要使用 Vue.directive() 方法。该方法接受两个参数：指令名称和一个对象，该对象包含指令的定义。

Vue.directive('my-directive', {
  bind(el, binding, vnode) {
    // 指令绑定到元素时执行
  },
  inserted(el, binding, vnode) {
    // 指令已插入到 DOM 中时执行
  },
  update(el, binding, vnode, oldVnode) {
    // 指令值发生变化时执行
  },
  componentUpdated(el, binding, vnode, oldVnode) {
    // 组件更新时执行
  },
  unbind(el, binding, vnode) {
    // 指令解除绑定时执行
  }
});