vue.js 기초코드

코드를 입력하세요
```<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>```
코드를 입력하세요

//:to → 바뀔수 있는

코드를 입력하세요
```<router-link :to="{ path: 'home' }">Home</router-link>```
코드를 입력하세요

replace prop를 설정하면 클릭할 때 router.push() 대신 router.replace()를 호출할 것이므로 내비게이션은 히스토리 레코드를 남기지 않을 것입니다.

코드를 입력하세요
```<router-link :to="{ path: '/abc'}" replace></router-link>```
코드를 입력하세요

→ 뒤로가기로 남기지 않는다

코드를 입력하세요
```<router-link :to="{ path: 'relative/path'}" append></router-link>```
코드를 입력하세요

router link 가 모든것이 가능하다

router와 a태그와 다른점이 처음부터 다운받기 때문에 router를 쓰는것이 낫다

SPA의 특징//무엇을 모르는지 공부

<
```a herf="/mytest">MyTest</router-link>```
코드를 입력하세요

vue파일 로딩 실행 -life cycle

component -

create-없는것을 쓸려고할때(마운트를 하기위한 조건)

mounte-모든 요소가 준비가 될때

beforeCreated --> created --> beforeMount --> mounted (–> beforeUpdated --> updated) --> beforeDestroy --> destroyed

https://v3.router.vuejs.org/kr/guide/essentials/dynamic-matching.html

코드를 입력하세요
```const User = {
 template: '<div>User</div>'
}

const router = new VueRouter({
 routes: [
   // 동적 세그먼트는 콜론으로 시작합니다.
   { path: '/user/:id', component: User }
 ]
})
const User = {
 template: '<div>User {{ $route.params.id }}</div>'
}

<script>
export default {
 data() {
   return {
     age: 20
   }
 },
 methods: {
   addAge(year) {
     this.age = this.age + year
   }
 }
}
//

this.age += ye\\
<template>
 <div>
   <h1>Event test</h1>
   <h3>1. 클릭/더블클릭 이벤트</h3>
   <div>
     <div>
       <p>나의 나이는: {{ age }}</p>
       <button @click="addAge(1)">1살 추가</button>
       <button @click="deleteAge(1)">1살 삭제</button>
       <button @dblclick="addAge(10)">10살씩 추가(더블클릭)</button>
       <button @click.once="addAge(1)">1살 추가(한번만)</button>
     </div>
     <div style="margin-top: 20px">
       <input v-model="message" />
       <button @click="printMessage">콘솔 프린트</button>
     </div>
   </div>
   <h3>3. 마우스 추적 이벤트</h3>
   <div>
     <div style="margin-top: 20px; height: 200px; width: 300px; border: 1px solid red" @mousemove="mouseTrack">
       마우스 X: {{ mouseX }}, 마우스 Y: {{ mouseY }}
     </div>
   </div>
   <h3>4. 키보드 이벤트</h3>
   <div>
     <div>이름: <input v-model="inputName" @keyup.enter="setMyName" />(Enter 이벤트)</div>
     <div>아이디: <input v-model="inputId" @keyup.ctrl.enter="setMyId" />(Ctrl-Enter 이벤트)</div>
     <p>나의 이름: {{ myName }}</p>
     <p>나의 아이디: {{ myId }}</p>
   </div>
 </div>
</template>

<script>
export default {
 data() {
   return {
     age: 20,
     message: null,
     mouseX: 0,
     mouseY: 0,
     inputName: null,
     inputId: null,
     myName: null,
     myId: null
   }
 },
 methods: {
   addAge: function (year) {
     this.age += year
   },
   deleteAge: function (year) {
     this.age -= year
   },
   printMessage() {
     console.log(this.message)
   },
   mouseTrack(event) {
     // console.log(event)
     this.mouseX = event.offsetX
     this.mouseY = event.offsetY
   },
   setMyName() {
     this.myName = this.inputName
   },
   setMyId() {
     this.myId = this.inputId
   }
 }
}
</script>
//message:’’ message2:null, message3:undefined, message4:false

null 암것도 없음 nothing - 정의 되지 않는 무엇이 들어올기 아직 모름

undefined:선언하지 않는 변수를 넣을때 : 없는 변수를 찾을때

메세지 바인딩 {{ message }} → 출력되는것을 볼 수 있다

mouseTrack(event) {
     // console.log(event)
     this.mouseX = event.offsetX
     this.mouseY = event.offsetY
@mousemove="mouseTrack">
       마우스 X: {{ mouseX }}, 마우스 Y: {{ mouseY }}
mouseTrack(event) {
     // console.log(event)
     this.mouseX = event.offsetX
     this.mouseY = event.offsetY
mouseX: 0,
mouseY: 0,
마우스 의 위치값을 볼 수 있다

<div>이름: <input v-model="inputName" @keyup.enter="setMyName" />(Enter 이벤트)</div> <div>아이디: <input v-model="inputId" @keyup.ctrl.enter="setMyId" />(Ctrl-Enter 이벤트)</div> <p>나의 이름: {{ myName }}</p> <p>나의 아이디: {{ myId }}</p>

<div>이름: <input v-model="inputName" @keyup.enter="setMyName" />(Enter 이벤트)</div>
     <div>아이디: <input v-model="inputId" @keyup.ctrl.enter="setMyId" />(Ctrl-Enter 이벤트)</div>
     <p>나의 이름: {{ myName }}</p>
     <p>나의 아이디: {{ myId }}</p>
(
v-on:click
은

@click
와 같다.)

@click
: 클릭 이벤트

@dblclick
: 더블클릭 이벤트

@mousemove
: 마우스 움직임 감지 이벤트

@keyup
: 키보드 감지 이벤트(keyup, keydown, keypress)

<p>Age + A = {{ addToA }}</p>
   <p>Age + B = {{ addToB }}</p>

// 
ddToA: function () {
     console.log('addToA', this.a, this.age)
     return this.a + this.age
   },
   addToB() {
     console.log('addToB', this.b, this.age)
     return this.b + this.age
computed → this.a 와 연결

<template>
 <div>
   <h1>v-if, v-show Test</h1>
   <button @click="error = !error">Toogle error</button>
   <button @click="success = !success">Toggle success</button>
   <div>
     <h3>v-if</h3>
     <div>
       <p>현재 error 상태는?</p>
       <p v-if="error" class="errBox">에러입니다.</p>
       <p v-else>에러 상태가 아닙니다.</p>
     </div>
     <h3>v-show</h3>
     <div>
       <p>현재 success 상태는?</p>
       <p v-show="success" class="sucBox">성공입니다.</p>
       <p v-show="!success">성공 상태가 아닙니다.</p>
     </div>
   </div>
 </div>
</template>

<script>
export default {
 data() {
   return {
     error: false,
     success: false
   }
 }
}
</script>

<style scoped>
.errBox {
 background: red;
 color: white;
}
.sucBox {
 background: green;
 color: white;
}
</style>
v-if는 보이지 않는것 v-show 못보는것

<hr />
   age : {{ age }}
   <div>결과체크</div>
   <div v-if="age" style="background-color: yellow">나이검사</div>

—> 0 값은 특별 대우

쌍따옴표 제이슨

v-for Test
원본 출력
[ "apple", "orange", "banana", "mango" ]

[ { "name": "홍길동", "age": 20, "gender": "male" }, { "name": "김길동", "age": 23, "gender": "male" }, { "name": "고길순", "age": 25, "gender": "female" } ]

다듬어서 출력
과일 리스트
apple
orange
banana
mango
사용자 리스트
그대로 출력
{ "name": "홍길동", "age": 20, "gender": "male" }

{ "name": "김길동", "age": 23, "gender": "male" }

{ "name": "고길순", "age": 25, "gender": "female" }

항목별 출력
홍길동: 20, male

김길동: 23, male

고길순: 25, female

<li v-for="(fruit, index) in fruits" :key="`fruit-${index}`">{{ fruit }}</li>
제이슨은 쌍따옴표

<div v-for="(user, index) in users" :key="index">
       <span>{{ user.name }}: {{ user.age }}, {{ user.gender }}</span>
     </div>
@ 절대 경로

mixins: [commonMx],//데이터 위에 넣기 data() {

[ commonMix ]- 리스트 타입

created() {
   this.mixinTest()
<template>
 <div>
   <h1>Mixin Test</h1>
   <p>{{ mixin.test }}</p>
 </div>
</template>

<script>
import commonMx from '@/components/mixin/commonMixin'

export default {
 mixins: [commonMx],
 data() {
   return {
     mixin: {
       test: 'aaa'
     }
   }
 },
 created() {
   this.mixinTest()
 }
}
</scr```
코드를 입력하세요

vue는 현재페이지가 아닌 곳에 에러가 발생해도 전체에서 에러가 난다

무조건 컴퓨티드에 넣기

component → 세분화