CSR : Client Side Rendering (Vue.js)
SPA : Single Page Application
SSR : Server Side Rendering (장고)
MPA : Mutiple Page Application (HTML이 여러개)
Vue.js는 CSR, SSR 둘 다 사용가능 ? (가능 : Nuxt.js) -> 이를 보완하기 위해 새로운 프레임워크 나옴
<div id="app"></div>
el:"#app"
app 영역을 vue.js로 사용하겠다는 의미
시간되면 typescript 꼭 보기!!!!!!!!!!!!!!
mounted()
어떤 시점이 되면 자동 실행 (화면에 붙이고 나서 DOM 조작할 때 사용)
ref로 간접적으로 써야 함
created()
화면에 붙여지지 않았을 때 자동실행(컴포넌트 생성되었는데 화면 생성 x 일 때)
computed()
자동실행 o, 화면에 직접 쓸 수도 있음(자바스크립트를) 그러나 화면서 자바스크립트를 바로 넣으면 보기 안 좋음, and 화면에 연산 많이들어가면 화면 성능 감소. -> 전처리를 목적으로 사용
methods()
함수들 모아놓음 (v-on:click 등)
computed와 methods의 차이 :
methods -> 실행을 시켜야 동작
computed -> 자동 실행 (데이터 변경 감지 시)
v-bind
v-if
v-else
v-on
v-model
v-for
v-model <input>
v-on,
v-bind -> 태그의 속성 바꿀때 사용 -> 변수지정, props
{{ data }}
<img v-bind:src='imgUrl'>
computed : {
imgUrl() {
return url 주소 넣기
}
감시할 데이터를 지정하고 데이터가 변경되면 실행할 자동실행함수 설정 영역, 테스트할 때 사용
templates 안 구문
<input @keyup.enter="onInput"> -> 사용자가 enter키를 눌렀다 떼면 실행됨
script 안 구문
methods : {
onInput(event) { #이벤트가 발생될 때 작동할 함수 onInput- 자식꺼)
this.$emit('oninput') # 부모에 있는 함수(oninput)
}
}
template에서 사용할때,
templates 안 구문
<router-link to="/movies"> 전체 영화 출력 </router-link> # router-link => a태그와 유사
# to에 해당하는 링크를 찾아서 해당하면 라우터 뷰에 그린다.
<router-view/>
/views/
/components/
javascript에서 사용할 때
this.$router.push()
방법1
this.$router.push('/movies'); #경로 직접 가기
방법2
this.$router.push({name:"Movies"}); #네임스페이스 달아서 경로 찾기
router params 알아보기
배열안의 객체
const routes =[
{
path: '/movies/id',
name : 'movieDetail',
component : MovieDetail,
}
]
localhost:8080/movies/13000 -> 13000번째 영화 뜰거임
this.$route.params.id -> 사용자가 접근한 13000번을 아이디로 받아서 해당하는 값을 호출
호출되면 axios 로 해당 Id에 대한 detail 가져옴
next() 여러번 못 씀, 딱 한 번 사용
const routes = [
{
path: "*",
redirect : "/404"
}
]
사용자가 지정한 라우트 값을 찾을 수 없는 경우 *로 이동
new Vuex.Store({
state:{}, # 데이터
mutations: {}, # state를 바꿀 때 씀. 아예 갈아엎거나
actions: {}, # 함수 들어감 , vue.js에서 component를 변경할 일이 있을때 사용, 들어가면 좋은게 axios(비동기 작업은 action에 들어가면 좋다)
getters: {},
})