第十七节——指令

最新推荐文章于 2024-05-10 15:47:34 发布

爱在你心中

最新推荐文章于 2024-05-10 15:47:34 发布

阅读量210

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_57017198/article/details/134063951

版权

vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一、概念

在Vue.js中，指令（Directives）是一种特殊的语法，用于为HTML元素添加特定的行为和功能。指令以v-作为前缀，通过在HTML标签中使用这些指令来操作DOM，修改元素的属性、样式或行为。

Vue.js提供了一组内置的指令，如v-model、v-bind、v-if、v-for等。此外，你也可以自定义指令来满足特定的需求。

二、常见指令

1、v-model

用于实现表单元素与Vue实例数据的双向绑定。

2、v-bind

用于动态地将Vue实例的数据绑定到HTML元素的属性或表达式。

3、v-if / v-else / v-else-if

根据条件控制元素的显示与隐藏。

4、v-for

用于根据数据源循环渲染元素列表。

5、v-on / @

用于监听DOM事件，并在触发时执行Vue实例中的方法。

6、v-show

根据条件控制元素的显示与隐藏，通过修改元素的CSS属性display。

7、v-text

将Vue实例的数据绑定到元素的文本内容。

8、v-html

将Vue实例的数据作为HTML内容动态渲染到元素中

三、v-model

1、概念

v-model指令在Vue.js中用于实现表单元素与Vue实例数据的双向绑定。当使用v-model指令绑定一个表单元素时，它会在底层自动为元素添加一个value属性和一个input事件监听器

2、绑定过程

对于表单元素（如<input>、<textarea>、<select>），v-model会将value属性与Vue实例中的一个数据属性进行绑定。

在初始化时，Vue会根据v-model指令的绑定值（通常是Vue实例的一个属性）将表单元素的初始值赋给该属性。

当用户与绑定了v-model的表单元素进行交互（输入、选择等）时，元素的input事件会被触发。

Vue会捕获到该事件，并根据表单元素的类型（<input>的type属性）来获取新的值。

Vue会将新的值赋给绑定的数据属性，实现从表单元素到Vue实例数据的单向绑定。

同时，Vue会将绑定的数据属性的值反过来赋给表单元素的value属性，实现从Vue实例数据到表单元素的单向绑定。

这样，无论是表单元素的值变化还是Vue实例数据的变化，都会相互影响，实现了双向绑定

3、例子

<template>
  <div>
    <div>{{ msg }}</div>
    <!-- <input type="text" :value="msg" @input="inputChange" /> -->
    <!-- 
      监听表单控件变化,同步每次变化的值到value上
     -->
    <input type="text" v-model="msg" />
    <button @click="msg = '张三'">填入张三</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [1, 2, 3],
      isRed: false,
      px: 100,
      msg: "aaa",
    };
  },

  methods: {
    inputChange(event) {
      this.msg = event.target.value;
    },
  },
};
</script>

<style scoped>
.red {
  color: red;
}
</style>

4、自定义组件使用v-model

子组件

<!-- CustomInput.vue -->
<script>
  export default {
    props: ["modelValue"],
    emits: ["update:modelValue"],
  };
</script>

<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
    />
  </template>

父组件

<template>
  <div>
    {{ a }}
    <LearnA v-model="a"></LearnA>
  </div>
</template>

<script>
  import LearnA from "./../learn-a.vue";
  export default {
    components: {
      LearnA,
    },
    data() {
      return {
        a: 1,
      };
    },
  };
</script>

四、自定义指令（了解）

1、概念

在Vue中，你可以使用自定义指令来扩展和修改现有的DOM元素行为。自定义指令是一种在HTML元素上绑定自定义行为的方式，它们可以用于处理交互、动态样式、事件监听等。

2、生命周期

在指令定义中指定相应的钩子函数。自定义指令可以定义多个钩子函数，每个钩子函数在指令的生命周期中扮演不同的角色。以下是一些常用的钩子函数：

bind: 只调用一次，在指令第一次绑定到元素时调用，可以在这里进行初始设置。

inserted: 当被绑定的元素插入到DOM中时调用。

update: 在组件的VNode更新时调用，但可能发生在其子VNode更新之前。

componentUpdated: 在组件的VNode及其子VNode全部更新后调用。

unbind: 只调用一次，在指令与元素解绑时调用

3、例子

全局指令

在入口文件处，增加v-color指令根据传入的参数改变字体颜色

app.directive("color", {
  mounted(el, binding) {
    el.style.color = binding.value;
    console.log(el, binding);
  },
});

局部指令

<template>
  <div>
    <input type="text" v-focus="true" />
    <div v-color="`green`">全局指令变红</div>
  </div>
</template>

<script>
export default {
  directives: {
    /**
     * 对象的key是指令的名字
     * 指令 不需要 v- 开头
     * 但是使用的时候 必须要v- 开头
     */
    focus: {
      /**
       *
       * @param {*} el 当前的dom节点
       * @param {*} binding 相关传值
       */
      mounted(el, binding, vnode, prevVnode) {
        // console.log(el, binding);
        el.focus();
      },
    },
  },
};
</script>