第十七节——指令

这篇具有很好参考价值的文章主要介绍了第十七节——指令。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、概念

在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指令根据传入的参数改变字体颜色文章来源地址https://www.toymoban.com/news/detail-742227.html

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>

到了这里,关于第十七节——指令的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包