2번째 vue3 공부 정리 [Sessac 바닐라 Javascript + Vue.js 과정]2

머스태치 문법 {{ }}

• vue에서 사용하는 방법이다.
• 이 안에 요소의 이름을 넣는다.

 

v-text

• tag전체를 바꿔주므로 비어있는 tag로 해야 한다.

<template>
	<div>
		<h1 v-text="`${username} Nice to meet you.`"></h1>
    </div>
</template>
<script>
	export default {
    	data() {
        	return {
            	username : "name",
            };
        };
    }
</script>

 

 

    

v-if | v-else-if | v-else

• 조건을 줘서 그 조건에 해당할 때만 나오게 한다.
•  v-if ,v-else를 쓰기 위해서는 바로 태그가 이어져야 한다. 즉, 중간에 다른 태그가 있으면 안 된다.

<template>	
	<div>
    	<h2 v-if="showName">My name is {{ user.name }}</h2>
    	<h2 v-else>이름을 보여줄 수 없습니다.</h2>
    	<h2 v-if="user.age > 20">당신은 성인입니다.</h2>
    	<h2 v-else-if="user.age > 14 && user.age < 20">당신은 청소년입니다.</h2>
    	<h2 v-else>당신은 어린이입니다.</h2>
    </div>  
</template>
<script>
	export default {
    	data() {
        	return {
            	user: {
        			name: "name",
        			age: 100,
      			},
                showName: true,
            };
        };
    }
<script>

 

v-if 와 v-show의 차이

• v-show는 조건이 성립하지 않아도 코드가 생성되지만 display= none; 처리가 된다. 
•  v-if는 조건이 성립하지 않으면 태그도 안 보인다.

<template>	
	<div>
    	<h2 v-if="!showName">{{ user.name }} IF</h2>
    	<h2 v-show="!showName">{{ user.name }} SHOW</h2>
    </div>  
</template>
<script>
	export default {
    	data() {
        	return {
            	user: {
        			name: "name",
      			},
                showName: true,
            };
        };
    }
<script>

 

v-for

<template>
	<div>
      <ul>
        <li v-for="(fruit, index) in fruits" :key="index">
          {{ index + 1 }}. {{ fruit }}
        </li>
      </ul>
      <ul>
        <li v-for="(fruit, index) of fruits" :key="index">
          {{ index + 1 }}. {{ fruit }}
        </li>
      </ul>
      <h2 v-for="(value, key, index) in user" :key="key">
        {{ index }}. {{ key }} ==> {{ value }}
      </h2>
      <p v-for="n in 10" :key="n">{{ n }}</p>
    </div>
</template>
<script>
	data(){
    	return{
        	fruits: ["banana", "strawberry", "apple", "melon"],
        }
    }
</script>

• key : 반복문(v-for)을 줄 때 꼭 넣어야 한다. unique한 값을 넣는다. (중복되지 않는 것)
• {{}} 안에 수식이 하나만 있어야 한다. 수식이 중복 X

• 단, v-if 와 v-for를 함께 쓸 수 없다.
• 아래 코드처럼 하는 방법도 있다.

<template>
	<ul>
      	<li
        	v-for="(city, index) in cities.filter((c) => c.province === '경상도')"
        	:key="index"
      	>
        	{{ city.name }}
      	</li>
	</ul>
</template>
<script>
	export default{
    	data(){
        	cities: [
        		{ name: "서울", province: "경기도" },
        		{ name: "대전", province: "충청도" },
        		{ name: "대구", province: "경상도" },
        		{ name: "부산", province: "경상도" },
        		{ name: "인천", province: "경기도" },
        		{ name: "광주", province: "전라도" },
      		]
        }
    }
</script>

Method

• object associated function

proxy

• vue의 반응성을 보완하기 위해 vue3에 추가된 js 기능

( )=> { } 화살표 함수의 특징 (arrow function)

• lexical scope : 함수에 선언에 따라 scope가 결정된다.
• 호출에 영향받지 않고 고정된다.

=> 즉 , method를 할때는 일반함수로 써야한다. (arrow function X)

<template>
	<div>
    	<h2>{{ message() }}</h2>
    </div>
</template>
<script>
export default{
  	methods: {
		message(){
        	console("Hi!");
        }
  	}
}
<script>

modifier

• 부가적인 기능 추가
• ex) click.right/left/middle

form

• 어떠한 입력 양식을 받고 서버에 저장

IME (input method editor)

• 자판에 있는 글쇠보다 수가 많은 문자를 조합하여 입력해주는 시스템

 

@click 
: v-on:click 의 줄임말

 

computed 속성을 이용해서  합쳐서 사용

computed

• 값이 바뀌지 않은 이상 변화하지 않는다.
• 값이 캐시되기 때문에 값이 실질적으로 영향이 있을 때만 변화된다.

method

• 다른 값이 바껴도 변화된다.

---

https://sesac.seoul.kr/course/active/detail.do

꿈꾸는 개발자 데뷔코스, 새싹