[Vue.js] 문법 기초 2편(props, v-bind, v-on, router, axios)

💡 watch 속성

• data의 변화에 따라서 특정 로직을 실행
• 우선 vue 인스턴스 내부에 들어가는 속성 순서
• el, data, watch, methods 등
• watch 안에 data 값인 num을 고정해둠
• watch랑 computed는 비슷한 느낌을 갖고 있음
• 가장 기본적인 서비스 구현에 있어서의 차이점은???
  • computed 는 단순한 계산, 텍스트 입력 값을 받아서 validation
• watch는 무거움, 매번 실행되는 것이 부담스러운 것들!!!!!!!!( 중요)
  • 값의 변화를 계속 추적함
  • function(newValue, oldValue) 라는 구조를 갖고 있음
  • this.fetchUserByNumber(newValue)

 

 

 

💡 computed 속성을 이용한 클래스 코드 작성바

• boolean 타입에 대한 값을 적는 경우에는 작은 따옴표가 필요 없음

• computed 속성으로 v-bind:class=” ”
• 기본적인 바인딩에 엮을 수 있음
• template 표현식에서 하는 것이 아니라, script 표현식에서 해결이 가능함
• computed는 항상 return 이 필요함
• computed 에서 데이터 속성에 접근하기 위해서는 , this 를 활용해야함!!!!

 

 

💡 vue cli

code

node -v

10버전 이상으로

npm -v

6버전 이상으로

npm install -g @vue/cli

 

 

vue/cli 설치 ( 인강에서는 3.8.2 버전)

• global 로 설치하다보면, npm 이 있는 라이브러리에 쓰기 권한이 없을 경우, permission 에러가 발생
• 앞에 sudo ~~ 를 붙이고 코드를 똑같이 복붙해서 사용
• window10 같은 경우, 라이브러리 위치는. %userprofiles\AppData\Roaming\npm\node_modules 에 존재
• vue init ‘프로젝트 템플릿 유형’ ‘프로젝트 폴더 위치’
• vue init webpack-simple ‘프로젝트 폴더 위치’
  • vue cli 2.x 버전에서 코드
• [Vue CLI 3.x]
• vue create ‘프로젝트 폴더 위치’

 

 

 

💡 main.js

import vue

import app

new Vue({
	render : h => h(App),
}).$mount('#app')

• element인 id가 app인 친구한테 붙이려고 하는 경우
• 추가된 것은 render인데, vue 내부적으로 사용하는 함수이자, 개발자들이 사용할 수 있는 함수
• render느 함수
• template를 실행하면 render 가 실행됨
• App이라는 컴포넌트
• import 하는 컴포넌트 / 싱글 파일 컴포넌트 / 다른 파일에서 불러와서
• es6 내용이긴함
  • 다른 컴포넌트를 h 에 넣고 render를 했다고 생각하면 편함!!
    • 무슨 말인지, 좀 더 공부를 하면 이해할 수 있을 것 같다.

props: {
	msg : String 
}

• 위의 코드는 validation 으로 타입까지 정해준 것

props: ['msg']

• 위 코드와 같은 내용이다
• component 태그 입력 방법
  • kebab-case
  • pascal-case : HelloWorld
• 컴포넌트를 재사용 많이 하기 때문에
• new Vue ~~ data 가 아니라
• export default 안에 data: function() { return { } } 으로 새로운 객체를 반환해줘야 한다

new Vue({
	data : {
		str : 'hi'
	}
})

위의 코드는 아래와 같게 되는데

export default {
	data: function() {
		return {
			str : 'hi'
		}
	}
}

즉, html 템플릿 부분에서 콧수염 괄호 {{ }} 부분에 str 을 넣어서 값을 사용하면 된다.

• 문법이 엄격해짐
• event, emit 등도 모두 가능

 

 

싱글 파일 컴포넌트 체계에서 컴포넌트 등록하기

• 컴포넌트 등록시 문법 체계 : Pascal 문법으로, 최소 두단어 이상으로 조합하기!!!!!!!!
  • 왜 두단어로 조합하는거니?
    • 만약에 main.vue 라고 등록하면
    • App.vue 에서는 <main> </main> 으로 컴포넌트를 불러오는데
    • html은 이게 html 태그인지 컴포넌트인지 알 길이 없기 때문에
    • 혼동을 막고자 두단어 이상으로 조합한다
  • import 할때 .vue 를 붙여줘야 깨지지 않고 파일을 잘 불러올 수 있음

 

 

💡 ☮ props 를 써보자!!

컴포넌트 구조

• Homeview 아래에
  • Helloworld 컴포넌트가 있음
• props 속성은 다음과 같이

• 부모 컴포넌트와 자식 컴포넌트가 있다고 가정하면,
• 자식 컴포넌트에서의 [ 컴포넌트 명: AppHeader ]

<button v-on:click="sendEvent">send</button>

/<template>

export default {
	props: ['propsdata'],
	method: {
		sendEvent: function() {
			this.$emit('renew')
		}
	}
}

버튼을 클릭하면 sendEvent라는 이름으로 이벤트를 날리게되고, 그것은 this.$emit 을 통해 renew 라는 값을 부모 컴포넌트로 보내게 된다

• 부모 컴포넌트에서는 [ App.vue ]

...
<app-header 
	v-bind:propsdata="str"
	v-on:renew="renewStr"></app-header>

<script>
export default {
	data: function() {
		return {
			str: 'Header'
		}
	},
	components: {
		'app-header':AppHeader
	},
	methods: {
		renewStr: function() {
			this.str = 'hi'
		}
	}
}

• v-bind는 [ … v-bind:프롭스 속성 이름=”상위 컴포넌트의 데이터 이름” ] 이름을 통해서 부모 컴포넌트의 데이터를 자식 컴포넌트에 데이터 바인딩을 통해서 값을 전달하며,
• 부모 컴포넌트에인, App 에서는 초기 str 데이터 값은 Header 이며,
• 자식 컴포넌트에서는, props 를 통해서 app-header 에 propsdata 라는 속성에 부모의 str 데이터 값인 Header가 들어있게 되며,
• send 버튼이 있는데, 누르게 되면, 자식 컴포넌트에 버튼이 있는건데, renew 라는 이름으로 이벤트가 올라오게되고,
• App 컴포넌트의 app-header 의 v-on을 통해서, renewStr 을 통해서 부모컴포넌트의 str은 Header에서 hi 로 바뀌게 됨