v-once
- 한번만 렌더링
- 예제 코드
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue Test</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script> </head> <body> <div id="app" > <div v-once>{{msg}}</div> <div>{{msg}}</div> <div>{{msg}}</div> </div> <script> const vm = new Vue({ el: '#app', data: { msg: 'hi~' }, }) console.log('-------------') </script> </body> </html>
- console에서 vm을 사용하여 값을 바꾸더라도 한번만 렌더링되기때문에 console에 찍은 값으로는 변경되지 않는다 -> 메모리 확보가능
html 출력
- 만약에 내가 줄바꿈을 하고 싶다고 가정하자. 그래서 < text1
<br>text2 >와 같이 쓰면 이떄의<br>은 tag로서의 역할을 하지 못하고 text로 출력이 된다. html을 적용하여 출력하고 싶다면 다음과 같이 하면 된다
<div id="app">
<div>{{msg}}</div>
<div v-html = "msg"></div>
</div>javascript 출력
- 문자보간 내에서는 javascript 문법이 적용된다
<div id="app" >
<div>{{msg}}</div>
<div>{{value1 + 2}}</div>
</div>디렉티브의 약어
- vue에 들어있는 data를 가지고 동적인 class를 관리할 수 있다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Test</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>
<body>
<style>
.normal {
font-size: 100px;
color: blue;
}
.active{
font-size: 100px;
color: red;
}
</style>
<div id="app" >
<div v-bind:class="className">{{msg}}</div>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
msg: 'good~',
className: 'normal'
},
})
console.log('-------------')
</script>
</body>
</html>- vm.className = 'active' 을 console에 쳤을때 red색으로 변한다
- vue는 DOM을 제어하는 용도로 data를 활용한다
매번 v-bind 치기 너무 귀찮다 -> 약어 사용
- v-bind:class -> :class로 생략이 가능하다
- v-on:click -> @click 으로 생략가능
안녕하세요!