이 기사는 Vue 지침 및 사용자 정의 지침의 수동 캡슐화에 대한 관련 지식을 제공합니다. 도움이 되기를 바랍니다.
프런트엔드 기본 면접에서 Vue의 지시사항은 면접 질문이 많이 나오는 질문입니다
면접관이 물었습니다. Vue에는 어떤 지시사항이 있나요?
그에게 말해 보세요: Vue3.2부터 Vue에는 다음을 포함하여 총 16개의 내장 명령이 있습니다:
v-text, v-html, v-show, v-if, v-else, v-else -if, v-for, v-on, v-bind, v-model, v-slot, v-pre, v-cloak, v-once, v-memo, v-is, 여기서 v-memo는 새로운 항목입니다. 3.2 그런데 v-is는 3.1.0에서 더 이상 사용되지 않습니다
면접관이 추가로 질문하는 경우: 사용자 정의 명령을 캡슐화하는 방법은 무엇입니까?
그에게 말하세요: 사용자 정의 명령어는 전역 사용자 정의 명령어와 로컬 명령어로 구분됩니다. Vue3에서는 애플리케이션 인스턴스에서 directive()를 통해 전역 사용자 정의 명령어를 등록할 수 있습니다. 로컬 명령어를 등록하려면 이를 구성하면 됩니다. 로컬 지시어를 등록하는 컴포넌트 지시어 옵션
이 기사를 읽고 나면 16가지 Vue 지시어를 포괄적으로 이해하고 지시어를 사용자 정의하는 방법을 익힐 수 있습니다.
1.1 Vue 지시어란 무엇입니까?
Vue에서는 지시문 사실 특별한 속성입니다
Vue는 지시에 따라 뒤에서 뭔가를 할 것입니다. 구체적으로 무엇을 해야 할지에 대해서는 Vue가 다른 지시에 따라 다른 작업을 수행할 것이라고 이야기하겠습니다.
1.2
의 특징은 나중에 설명하겠습니다.Vue 명령어의 분명한 특징은 모두 v-로 시작한다는 것입니다. 예: v-text
<span v-text="msg"></span>
2.1 Vue에 내장된 지침은 무엇입니까
내장 지침은 Vue를 참조합니다. 내장 명령이 포함되어 있어 즉시 사용할 수 있습니다.Vue에는 총 16개의 내장 명령이 있습니다. 다음을 포함한 명령: v-text, v-html, v-show, v-if, v-else, v-else-if, v-for, v-on, v-bind, v-model, v- Slot, v-pre, v-cloak, v-once, v-memo, v-is 중 v-memo는 3.2에서 새로 추가되었고, v-is는 3.1.0에서 사라졌습니다기본적인 사용법에 대해 알아보겠습니다. 이러한 내장 명령어2.2 16개의 내장 명령어의 기본 사용법을 이해하세요
2.2.1 v-text
v -text의 역할은 요소의 textContent를 업데이트하는 것입니다. 예:<h1 v-text="msg"></h1>
2.2.2 v-html
은 v-text와 매우 유사합니다. v-html만 업데이트하는 데 사용됩니다.<div v-html="'<h1>Hello LBJ</h1>'"></div>
2.2.3 v-show
v-show는 표현식을 기반으로 할 수 있습니다. 요소의 표시 값을 전환하는 false 값은 요소의 표시 및 숨기기를 제어하는 데 사용됩니다. 예:
2.2.4도 지원하지 않습니다. v-if
v-if는 및 v 기반 요소를 조건부로 렌더링하는 데 사용됩니다. 표현식의 true 또는 false 값에 대해 -show와 비교하면 v-if는 단순히 표시하고 숨기는 것이 아니라 전환 시 요소를 파괴하거나 재구성합니다. 표현식이 false인 경우 v-if는 요소를 직접 파괴하는 반면, v-show는 시각적으로 숨겨져 있으며 v-if는 일 수 있습니다. 요소가 인 경우 해당 내용은 조건부 블록으로 추출됩니다
v- else에는 표현식이 필요하지 않습니다. 즉, "else 블록"을 추가한다는 의미입니다. 이는 v-if가 조건을 충족할 때 v-if의 요소를 표시하고, 그렇지 않으면 v-else의 요소를 표시하는 것과 같습니다. 예:
참고: v-else 이전 형제 요소에는 v-if 또는 v-else-if
2.2.6 v-else-if
마찬가지로 v의 "else if 블록"을 나타냅니다. -if, v-else와 동일, 이전 형제 요소에는 v-if 또는 v-else-if가 있어야 합니다. 예:
2.2.7 v-for
또한 배열 인덱스의 별칭을 지정하거나 객체의 키를 지정할 수도 있습니다.
<div v-for="(item, index) in items"></div> <div v-for="(value, key) in object"></div> <div v-for="(value, name, index) in object"></div>
2.2.8 v-on
v-on은 이벤트를 요소에 바인딩하는 데 사용되며 다음과 같이 축약될 수 있습니다. @
Modifier
.stop - event.stopPropagation()
을 호출합니다..prevent - 调用 event.preventDefault()
.capture - 添加事件侦听器时使用 capture 模式
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调
.{keyAlias} - 仅当事件是从特定键触发时才触发回调
.once - 只触发一次回调
.left - 只当点击鼠标左键时触发
.right - 只当点击鼠标右键时触发
.middle - 只当点击鼠标中键时触发
.passive - { passive: true } 模式添加侦听器
例如：
<!-- 停止冒泡 --> <button @click.stop="doThis"></button>
需要注意，用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件
2.2.9 v-bind
v-bind用于绑定数据和元素属性，可以缩写为: 或.(当使用 .prop 修饰符时)，比如
<div :someProperty.prop="someObject"></div> <!-- 相当于 --> <div .someProperty="someObject"></div>
v-bind的3个修饰符
.camel - 将 kebab-case attribute 名转换为 camelCase
.prop - 将一个绑定强制设置为一个 DOM property。3.2+
.attr - 将一个绑定强制设置为一个 DOM attribute。3.2+
2.2.10 v-model
v-model限制于：
