1) directives
<template>
<div>
<p>{{ msg }}</p>
<p v-text="msg"></p>
<p v-html="htmlStr"></p>
<p v-text="htmlStr"></p>
<p v-pre>{{ msg 안녕하세요 }}</p>
<p v-once>{{ msg }} !!!!</p>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const msg = ref('안녕하세요');
const htmlStr = ref('<strong>안녕!!!</strong>');
return { msg, htmlStr };
},
};
</script>
<style lang="scss" scoped></style>
2) cloak
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
<style>
[v-cloak] {
display: none
}
</style>
</head>
<body>
<div id="app">
<p v-cloak>{{ message }}</p>
</div>
<script>
const App = {
data() {
return {
message: '안녕하세요'
}
}
}
setTimeout(() => {
Vue.createApp(App).mount('#app')
}, 3000)
</script>
</body>
</html>
3) v-memo
<template>
<div>
<div v-memo="[views, likes]">
<p>subscribers: {{ subscribers }}</p>
<p>views: {{ views }}</p>
<p>likes: {{ likes }}</p>
</div>
<button @click="subscribers++">Subs++</button>
<button @click="views++">Views++</button>
<button @click="likes++">Likes++</button>
<div>
<p>subscribers: {{ subscribers }}</p>
<p>views: {{ views }}</p>
<p>likes: {{ likes }}</p>
</div>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const subscribers = ref(4000);
const views = ref(400);
const likes = ref(20);
return { subscribers, views, likes };
},
};
</script>
<style lang="scss" scoped></style>
'개발이 좋아서 > Vue가 좋아서' 카테고리의 다른 글
| 11장 양방향 바인딩(v-model) (0) | 2023.09.14 |
|---|---|
| 10장 이벤트 처리 (0) | 2023.09.13 |
| 8장 목록 렌더링(v-for) (0) | 2023.09.13 |
| 7장 조건부 렌더링(v-if, v-show) (0) | 2023.09.13 |
| 6장 class와 style 바인딩 (0) | 2023.09.13 |