Vue 3 — HTML 및 지시문
5767 단어 programmingjavascriptvuewebdev
지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.
Vue 3는 베타 버전이며 변경될 수 있습니다.
Vue 3는 Vue 프런트 엔드 프레임워크의 최신 버전입니다.
Vue 2의 인기와 사용 편의성을 기반으로 합니다.
이 기사에서는 Vue 3로 템플릿을 만드는 방법을 살펴보겠습니다.
원시 HTML
v-html 지시문을 사용하여 원시 HTML을 렌더링할 수 있습니다.예를 들어 다음과 같이 작성할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<p>{{ rawHtml }}</p>
<p><span v-html="rawHtml"></span></p>
</div>
<script>
const vm = Vue.createApp({
data() {
return {
rawHtml: `<b>foo</b>`
};
}
}).mount("#app");
</script>
</body>
</html>
rawHtml 메서드에서 반환하는 객체와 함께 반환된 data 속성이 있습니다.원시 HTML을 콧수염에 전달하면 삭제됩니다. 이것은 원시 코드가 표시됨을 의미합니다.
v-html 지시문에 전달하면 HTML로 표시되므로 굵게 표시됩니다.따라서
v-html를 사용할 경우 크로스 사이트 스크립팅 취약점에 주의해야 합니다.신뢰할 수 있는 콘텐츠만
v-html로 표시해야 합니다. .속성
속성 값을 동적으로 설정하려면
v-bind 지시문을 사용해야 합니다.예를 들어 다음과 같이 작성할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<div v-bind:id="dynamicId"></div>
</div>
<script>
const vm = Vue.createApp({
data() {
return {
dynamicId: `foo`
};
}
}).mount("#app");
</script>
</body>
</html>
id를 사용하여 div의 foo 속성을 v-bind로 설정합니다.부울 속성이 있는 경우 해당 속성이 있다는 것은 값을
true 로 설정했음을 의미합니다.예를 들어 다음과 같이 작성할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<button v-bind:disabled="disabled">Button</button>
</div>
<script>
const vm = Vue.createApp({
data() {
return {
disabled: true
};
}
}).mount("#app");
</script>
</body>
</html>
disabled 값을 v-bind:disabled , 즉 true 에 전달하여 버튼을 비활성화했습니다.자바스크립트 표현식
이중 중괄호 사이에 JavaScript 표현식을 넣을 수 있습니다.
예를 들어 다음과 같이 작성할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
{{message.split('').reverse().join('')}}
</div>
<script>
const vm = Vue.createApp({
data() {
return {
message: "hello world"
};
}
}).mount("#app");
</script>
</body>
</html>
템플릿에서 반전
'hello world'합니다.문장이 아닌 단일 표현식만 넣을 수 있으므로 다음과 같이 작성할 수 없습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
{{ var a = 1 }}}
</div>
<script>
const vm = Vue.createApp({
data() {
return {
message: "hello world"
};
}
}).mount("#app");
</script>
</body>
</html>
Vue 템플릿 컴파일러에서 오류가 발생합니다.
지시문
지시문은
v- 로 시작하는 특수 속성입니다.그들이 기대하는 값은 단일 JavaScript 표현식입니다.
v-for 및 v-on는 이에 대한 예외입니다.표현식의 값이 변경되면 DOM에 반응적으로 부작용을 적용합니다.
예를 들어 다음과 같이 작성할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next)"></script>
</head>
<body>
<div id="app">
<p v-if="show">hello world</p>
</div>
<script>
const vm = Vue.createApp({
data() {
return {
show: true
};
}
}).mount("#app");
</script>
</body>
</html>
v-if 이후 show를 사용하여 'hello world' 메시지를 표시하려면 true .v-if는 값이 참일 때 무언가를 표시하는 지시문입니다.결론
템플릿은 원시 HTML, 속성 및 지시문을 가질 수 있습니다.
지시문은 값을 취하는 특수 속성입니다.
Reference
이 문제에 관하여(Vue 3 — HTML 및 지시문), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/aumayeung/vue-3-html-and-directives-bcn텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
