Vue.JS에서 사용자 정의 지시어를 사용하는 방법
이번에는 Vue.JS의 커스텀 명령어를 사용하는 방법을 알려드리겠습니다. Vue.JS의 커스텀 명령어를 사용할 때 주의사항은 무엇인가요?
Vue.js를 사용하면 사용자 정의 지시문을 등록할 수 있으며 이를 통해 Vue에게 몇 가지 새로운 기술, 즉 데이터 변경 사항을 DOM 동작에 매핑하는 방법을 가르칠 수 있습니다. Vue.directive(id, 정의) 메소드를 사용하면 지시문 ID와 정의 객체를 전달하여 전역 사용자 지정 지시문을 등록할 수 있습니다. 개체를 정의하려면 몇 가지 후크 기능(모두 선택 사항)을 제공해야 합니다.
bind: 명령이 처음으로 요소를 바인딩할 때 한 번만 호출됩니다.
update: 바인드 직후 처음 호출될 때 얻은 매개변수는 향후 바인딩의 초기 값이며 바인딩된 값이 변경될 때마다 호출되며 새 값과 이전 값은 다음과 같이 가져옵니다. 두 개의 매개변수.
unbind: 명령이 요소 바인딩을 해제할 때 한 번만 호출됩니다.
예:
Vue.directive('my-directive', { bind: function () { // 做绑定的准备工作
// 比如添加事件监听器，或是其他只需要执行一次的复杂操作
}, update: function (newValue, oldValue) { // 根据获得的新值执行对应的更新
// 对于初始值也会被调用一次
}, unbind: function () { // 做清理工作
// 比如移除在 bind() 中添加的事件监听器
}
})사용자 지정 지시문이 등록되면 다음과 같이 Vue.js 템플릿에서 사용할 수 있습니다(Vue.js 지시문 접두사를 추가해야 하며 기본값은 v-입니다).
<div v-my-directive="someValue"></div>
업데이트 기능이 필요한 경우에만 정의 개체 대신 함수만 전달할 수 있습니다.
Vue.directive('my-directive', function (value) { // 这个函数会被作为 update() 函数使用})모든 후크 기능은 실제 명령 개체에 복사되고 이 명령 개체는 모든 후크 기능의 this
컨텍스트가 됩니다. . 일부 유용한 공용 속성이 지시문 개체에 노출됩니다.
el: 지시문이 바인딩된 요소
vm: 지시문을 소유하는 컨텍스트 ViewModel
expression: 매개변수 및 filters를 제외한 지시문의 expression
arg: 명령의 매개변수
raw: 구문 분석되지 않은 원시 표현식
name: 접두사가 없는 명령 이름
이 속성은 읽기 전용이므로 수정하지 마세요. 지시문 개체에 사용자 지정 속성을 연결할 수도 있지만 기존 내부 속성을 덮어쓰지 않도록 주의하세요.
디렉티브 개체 속성 사용 예:
<!DOCTYPE html><html><head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script></head><body><div id="demo" v-demo-directive="LightSlateGray : msg"></div><script>
Vue.directive('demoDirective', {
bind: function () { this.el.style.color = '#fff'
this.el.style.backgroundColor = this.arg
},
update: function (value) { this.el.innerHTML = 'name - ' + this.name + '<br>' + 'raw - ' + this.raw + '<br>' + 'expression - ' + this.expression + '<br>' + 'argument - ' + this.arg + '<br>' + 'value - ' + value
}
}); var demo = new Vue({
el: '#demo',
data: {
msg: 'hello!'
}
})</script></body></html>다중 절
동일한 기능 내에서 쉼표로 구분된 여러 절은 여러 디렉티브 인스턴스로 바인딩됩니다. 다음 예에서는 명령어가 생성되고 두 번 호출됩니다.
<div v-demo="color: 'white', text: 'hello!'"></div>
단일 명령어 인스턴스를 사용하여 여러 매개변수를 처리하려는 경우 리터럴 개체를 표현식으로 사용할 수 있습니다.
<div v-demo="{color: 'white', text: 'hello!'}"></div>
Vue.directive('demo', function (value) { console.log(value) // Object {color: 'white', text: 'hello!'}})Literal Instructions
자체 명령어를 생성하는 경우 지시문을 정의할 때 isLiteral: true가 전달되면 속성 값은 직접 문자열로 처리되어 지시문의 표현식에 할당됩니다. 리터럴 명령어는 데이터 모니터링을 설정하려고 시도하지 않습니다.
예:
<div v-literal-dir="foo"></div>
Vue.directive('literal-dir', { isLiteral: true, bind: function () { console.log(this.expression) // 'foo'
}
})동적 리터럴 지시어
그러나 리터럴 지시어에 Mustache 태그가 포함된 경우 지시어는 다음과 같이 작동합니다.
디렉티브 인스턴스에는 this._isDynamicLiteral 속성이 true로 설정됩니다. 업데이트 기능이 제공되지 않으면 Mustache 표현식은 한 번만 평가되고 값은 this.expression에 할당됩니다. 표현식에 대해 데이터 모니터링이 수행되지 않습니다.
업데이트 기능이 제공되는 경우 명령어는 계산 결과가 변경되면 표현식에 대한 데이터 감시를 설정하고 업데이트를 호출합니다.
양방향 지시어
지시어가 Vue 인스턴스에 데이터를 다시 쓰려면 twoWay: true를 전달해야 합니다. 이 옵션을 사용하면 지시어에서 this.set(value)를 사용할 수 있습니다.
Vue.directive('example', { twoWay: true, bind: function () { this.handler = function () { // 把数据写回 vm
// 如果指令这样绑定 v-example="a.b.c",
// 这里将会给 `vm.a.b.c` 赋值
this.set(this.el.value)
}.bind(this) this.el.addEventListener('input', this.handler)
}, unbind: function () { this.el.removeEventListener('input', this.handler)
}
})인라인 문
acceptStatement: true를 전달하면 사용자 지정 지시문이 v-on:
<div v-my-directive="a++"></div>
Vue.directive('my-directive', { acceptStatement: true, update: function (fn) { // the passed in value is a function which when called,
// will execute the "a++" statement in the owner vm's
// scope.
}
})과 같은 인라인 문을 허용할 수 있습니다. 하지만 일반적으로 템플릿에서 부작용을 피하고 싶기 때문에 이 기능을 현명하게 사용하세요.
심층 데이터 관찰
객체에 사용자 정의 명령어를 사용하고 객체 내부의 중첩 속성이 변경될 때 명령어의 업데이트 기능이 트리거될 수 있는 경우 명령어 정의를 깊이 전달해야 합니다. : 진실.
<div v-my-directive="obj"></div>
Vue.directive('my-directive', { deep: true, update: function (obj) { // 当 obj 内部嵌套的属性变化时也会调用此函数
}
})명령 우선 순위
명령에 대한 우선 순위 번호를 제공하도록 선택할 수 있습니다(기본값은 0). 동일한 요소에 대해 우선순위가 높은 명령어는 다른 명령어보다 먼저 처리됩니다. 동일한 우선순위를 가진 명령은 요소 속성 목록에 나타나는 순서대로 처리되지만 이 순서가 다른 브라우저에서 일관된다는 보장은 없습니다.
일반적으로 사용자는 내장 명령어의 우선순위에 신경 쓸 필요가 없습니다. 관심이 있다면 소스 코드를 참조하면 됩니다. 논리 제어 명령어 v-repeat 및 v-if는 "터미널 명령어"로 간주되며 컴파일 프로세스 중에 항상 가장 높은 우선순위를 갖습니다.
요소 지시어
때로는 지시어를 기능이 아닌 사용자 정의 요소로 사용할 수 있기를 원할 수도 있습니다. 이는 Angular의 E-type 지시어 개념과 매우 유사합니다. 요소 지시문은 자체 정의된 경량 구성요소로 볼 수 있습니다(나중에 설명함). 다음과 같이 사용자 정의 요소 명령을 등록할 수 있습니다.
Vue.elementDirective('my-directive', { // 和普通指令的 API 一致
bind: function () { // 对 this.el 进行操作...
}
}) 이를 사용할 때 더 이상 <div v-my-directive></div>
<my-directive></my-directive>
元素指令不能接受参数或表达式，但是它可以读取元素的特性，来决定它的行为。与通常的指令有个很大的不同，元素指令是终结性的，这意味着，一旦 Vue 遇到一个元素指令，它将跳过对该元素和其子元素的编译 - 即只有该元素指令本身可以操作该元素及其子元素。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
相关阅读：
一个用Vue.js 2.0+做出的石墨文档样式的富文本编辑器
위 내용은 Vue.JS에서 사용자 정의 지시어를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7463
15
1376
52
77
11
45
19
18
18
Netflix에서 맞춤형 아바타를 빠르게 설정하는 방법
Feb 19, 2024 pm 06:33 PM
Netflix의 아바타는 귀하의 스트리밍 정체성을 시각적으로 표현한 것입니다. 사용자는 기본 아바타를 넘어 자신의 개성을 표현할 수 있습니다. Netflix 앱에서 사용자 지정 프로필 사진을 설정하는 방법을 알아보려면 이 문서를 계속 읽어보세요. Netflix에서 사용자 정의 아바타를 빠르게 설정하는 방법 Netflix에는 프로필 사진을 설정하는 기능이 내장되어 있지 않습니다. 하지만 브라우저에 Netflix 확장 프로그램을 설치하면 이 작업을 수행할 수 있습니다. 먼저, 브라우저에 Netflix 확장 프로그램에 대한 사용자 정의 프로필 사진을 설치하세요. Chrome 스토어에서 구매하실 수 있습니다. 확장 프로그램을 설치한 후 브라우저에서 Netflix를 열고 계정에 로그인하세요. 오른쪽 상단에 있는 프로필로 이동하여
WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법
Dec 17, 2023 pm 02:54 PM
WebSocket 및 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법 소개: 지속적인 기술 개발로 음성 인식 기술은 인공 지능 분야의 중요한 부분이 되었습니다. WebSocket과 JavaScript를 기반으로 한 온라인 음성 인식 시스템은 낮은 대기 시간, 실시간, 크로스 플랫폼이라는 특징을 갖고 있으며 널리 사용되는 솔루션이 되었습니다. 이 기사에서는 WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법을 소개합니다.
Eclipse에서 바로 가기 키 설정을 사용자 정의하는 방법
Jan 28, 2024 am 10:01 AM
Eclipse에서 바로 가기 키 설정을 사용자 정의하는 방법은 무엇입니까? 개발자로서 단축키를 익히는 것은 Eclipse에서 코딩할 때 효율성을 높이는 열쇠 중 하나입니다. 강력한 통합 개발 환경인 Eclipse는 다양한 기본 바로가기 키를 제공할 뿐만 아니라 사용자가 자신의 기본 설정에 따라 사용자 정의할 수도 있습니다. 이 기사에서는 Eclipse에서 바로 가기 키 설정을 사용자 정의하는 방법을 소개하고 특정 코드 예제를 제공합니다. Eclipse 열기 먼저 Eclipse를 열고 Enter를 누르십시오.
WebSocket 및 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술
Dec 17, 2023 pm 05:30 PM
WebSocket과 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 서론: 인터넷 기술의 급속한 발전과 함께 실시간 모니터링 시스템이 다양한 분야에서 널리 활용되고 있다. 실시간 모니터링을 구현하는 핵심 기술 중 하나는 WebSocket과 JavaScript의 조합입니다. 이 기사에서는 실시간 모니터링 시스템에서 WebSocket 및 JavaScript의 적용을 소개하고 코드 예제를 제공하며 구현 원칙을 자세히 설명합니다. 1. 웹소켓 기술
edius 사용자 정의 화면 레이아웃의 작동 과정
Mar 27, 2024 pm 06:50 PM
1. 아래 그림은 edius의 기본 화면 레이아웃입니다. 기본 EDIUS 창 레이아웃은 가로 레이아웃이므로 단일 모니터 환경에서는 많은 창이 겹쳐져 있으며 미리보기 창은 단일 창 모드입니다. 2. [보기] 메뉴 바를 통해 [듀얼 윈도우 모드]를 활성화하면 미리보기 창에 재생 창과 녹음 창이 동시에 표시되도록 할 수 있습니다. 3. [보기 메뉴바>창 레이아웃>일반]을 통해 기본 화면 레이아웃을 복원할 수 있습니다. 또한, 자신에게 맞는 레이아웃을 사용자 정의하여 자주 사용하는 화면 레이아웃으로 저장할 수도 있습니다. 창을 자신에게 맞는 레이아웃으로 드래그한 후 [보기 > 창 레이아웃 > 현재 레이아웃 저장 > 새로 만들기]를 클릭한 후 팝업 [현재 레이아웃 저장] 레이아웃] 작은 창에 레이아웃 이름을 입력하고 확인을 클릭합니다.
JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법
Dec 17, 2023 pm 12:09 PM
JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법 소개: 인터넷의 대중화와 기술의 발전으로 점점 더 많은 레스토랑에서 온라인 주문 서비스를 제공하기 시작했습니다. 실시간 온라인 주문 시스템을 구현하기 위해 JavaScript 및 WebSocket 기술을 사용할 수 있습니다. WebSocket은 TCP 프로토콜을 기반으로 하는 전이중 통신 프로토콜로 클라이언트와 서버 간의 실시간 양방향 통신을 실현할 수 있습니다. 실시간 온라인 주문 시스템에서는 사용자가 요리를 선택하고 주문을 하면
Excel에서 x축과 y축을 사용자 정의하는 방법은 무엇입니까? (Excel 축 눈금을 사용자 정의하는 방법)
Mar 14, 2024 pm 02:10 PM
엑셀 표에서는 데이터의 변화 추세를 보다 직관적으로 확인하기 위해 좌표축을 삽입해야 하는 경우가 있습니다. 아직 테이블에 좌표축을 삽입하는 방법을 모르는 친구들이 있습니다. 다음으로 Excel에서 좌표축 배율을 사용자 정의하는 방법을 알려 드리겠습니다. 좌표축 삽입 방법: 1. Excel 인터페이스에서 데이터를 선택합니다. 2. 삽입 인터페이스에서 클릭하여 세로 막대형 차트 또는 막대형 차트를 삽입합니다. 3. 확장된 인터페이스에서 그래픽 유형을 선택합니다. 4. 테이블의 마우스 오른쪽 버튼 클릭 인터페이스에서 데이터 선택을 클릭합니다. 5. 확장된 인터페이스에서 사용자 정의할 수 있습니다.
JavaScript와 WebSocket: 효율적인 실시간 일기예보 시스템 구축
Dec 17, 2023 pm 05:13 PM
JavaScript 및 WebSocket: 효율적인 실시간 일기 예보 시스템 구축 소개: 오늘날 일기 예보의 정확성은 일상 생활과 의사 결정에 매우 중요합니다. 기술이 발전함에 따라 우리는 날씨 데이터를 실시간으로 획득함으로써 보다 정확하고 신뢰할 수 있는 일기예보를 제공할 수 있습니다. 이 기사에서는 JavaScript 및 WebSocket 기술을 사용하여 효율적인 실시간 일기 예보 시스템을 구축하는 방법을 알아봅니다. 이 문서에서는 특정 코드 예제를 통해 구현 프로세스를 보여줍니다. 우리
