沐鳴平台網站_Vue 3自定義指令開發

,在Angular和vue中都有Directive的概念，我們通常講Directive 翻譯為“指令”。,
,什麼是指令（directive）,<p v-highlight=”‘yellow'”>Highlight this text bright yellow</p>,指令的使用場景,export default defineComponent({ name: “WebDesigner”, components: { Designer, }, directives: { highlight: { beforeMount(el, binding, vnode) { el.style.background = binding.value; }, }, }, });,DOM的基礎操作，當組件中的一些處理無法用現有指令實現，可以自定義指令實現。例如組件水印，自動focus。相對於用ref獲取DOM操作，封裝指令更加符合MVVM的架構，M和V不直接交互。,除了使用內置的指令，Vue同樣支持自定義指令，以下場景可以考慮通過自定義指令實現：,let app = createApp(App) app.directive(‘highlight’, { beforeMount(el, binding, vnode) { el.style.background = binding.value } }),在計算機技術中，指令是由指令集架構定義的單個的CPU操作。在更廣泛的意義上，“指令”可以是任何可執行程序的元素的表述，例如字節碼。,那麼在前端框架vue中“指令”到底是什麼，他有什麼作用呢？,在Vue開發中我們在模板中經常會使用v-model和v-show等以v-開頭的關鍵字，這些關鍵字就是Vue框架內置的指令。通過使用v-model，可以獲取實現DOM和數據的綁定；使用v-show，可以控制DOM元素显示。簡而言之通過使用這些模板上的標籤，讓框架對DOM元素進行了指定的處理，同時DOM改變后框架可以同時更新指定數據。指令是Vue MVVM的基礎之一。,