2.Vue 사용자 정의 명령 매개변수-수정자-값/케이스-사용자 정의 전역 명령은 숫자 앞에 단위 ¥를 추가합니다.

1. 예: 여기서 명령 이름은 왜이고, kobe는 매개변수이고,lazy는 수정자이고, message는 값입니다.

2. el.textContent는 페이지 렌더링 데이터 '하하하'를 얻을 수 있습니다.

3. 바인딩.값은 메시지 값을 가져올 수 있습니다.

<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)
}

main.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')