2.Vueカスタム命令parameter-modifier-value/case-customグローバル命令は数字の前に単位¥を追加します

1. 例: ここで、why はコマンド名、kobe はパラメータ、lazy は修飾子、message は値です。

2. el.textContent はページレンダリングデータを取得できます「ははは」

3. bindings.value はメッセージの値を取得できます

<template>
  <div class="app">
    <button @click="counter++">+1</button>
    <!-- why是指令名称，kobe是参数，lazy是修饰符，message是值 -->
    <h2 v-why:kobe.lazy="message">哈哈哈</h2>

    <!-- 2.价格拼接单位符号 -->
    <h2 v-unit>{
   
   { 111 }}</h2>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'

const counter = ref(0)

const message = '你好啊，明天'
const vWhy = {
  mounted(el, bindings) {
    // el.textContent = '你你你你你' // 修改页面的内容
    console.log(bindings, '---bindings---')
    el.textContent = bindings.value  // 把 message 的值渲染到页面上取代了 哈哈哈
  }
}
</script>

<style scoped></style>

4. 数値の前に ¥ 単位を追加し、グローバル v-unit ディレクティブをカスタマイズします

• 新しいディレクティブ/unit.js を作成する

export default function directiveUnit(app) {
  app.directive('unit', {
    mounted(el, bindings) {
      const defaultText = el.textContent
      let unit = bindings.value
      // console.log(unit) // 如果 v-unit 没有传值，则是 undefined
      if (!unit) {
        unit = '¥'
      }
      el.textContent = unit + defaultText
    }
  })
}

• ディレクティブ/index.js

import directiveFocus from './focus'
import directiveUnit from './unit'

export default function useDirectives(app) {
  directiveFocus(app)
  directiveUnit(app)
}

メイン.js

import { createApp } from 'vue'
import App from './01_自定义指令/App.vue'
import useDirectives from './01_自定义指令/directives/index'
// import './assets/main.css'

const app = createApp(App)
// 自定义指令
useDirectives(app)
app.mount('#app')