vue实现自定义指令和指令的周期

huang-de-jun

已于 2022-10-19 20:52:50 修改

阅读量320

点赞数

于 2022-10-19 20:47:30 首次发布

本文链接：https://blog.csdn.net/hdj0511/article/details/127415601

版权

Vue.js 自定义指令时间戳转换元素焦点生命周期

关键词由CSDN通过智能技术生成

<template>
  <div>
    <div v-for="(emp, i) in emps" :key="i">
      <span>{{ emp.ename }}</span>
      <span>{{ emp.birthday }}</span>
      <!-- 自定义指令: 适合快速给DOM元素增加一些 DOM相关的操作 -->
      <span v-date="emp.birthday"></span>
    </div>
  </div>
</template>

<script>
export default {
  directives: {
    // v-date
    date(el, bindings) {
      // 如何把时间戳 转成 年/月/日
      var d = new Date(bindings.value)
      var year = d.getFullYear()
      var month = d.getMonth() + 1 // 0-11  +1 转1-12
      var day = d.getDate()

      el.innerText = `${year}/${month}/${day}`
    },
  },
  data() {
    return {
      emps: [
        { ename: '壮壮', birthday: 626014629000 },
        { ename: '边边', birthday: 636025629000 },
        { ename: '小海', birthday: 616021629000 },
        { ename: '浩浩', birthday: 606022429000 },
      ],
    }
  },
}
</script>

<style lang="scss" scoped></style>

指令的周期

<template>
  <div>
    <input type="text" />
    <br />
    <!-- v-focus: 让元素显示时获得焦点 -->
    <input type="text" v-focus />
    <br />
    <input type="text" />
  </div>
</template>

<script>
export default {
  directives: {
    // 概念: 生命周期. 一个事物从诞生到销毁的过程
    // 例如人的一生: 肚子里->出生->成长=>死了
    // DOM元素: 内存中先创建 -> 绘制到页面上 -> 销毁
    // 获得焦点:
    // 指令默认是在 DOM的内存阶段触发的, 即元素还没显示到页面上, 导致无法获得焦点
    // focus(el) {
    //   el.focus()
    // },
    // 指令有两种语法:
    // 1. 值是函数: 则在DOM元素创建时自动触发
    // 2. 值是对象类型: 精确配置触发的时机
    focus: {
      // ctrl+i :能看到提示
      // sql:的增语句  insert into 表 value (值),  插入
      // 代表DOM元素 插入到 页面上, 展示出来时
      inserted(el) {
        el.focus()
      },
    },
  },
}
</script>

<style lang="scss" scoped></style>