<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 → 세분화

'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-unused-vars': ['warn', { vars: 'all', args: 'after-used', ignoreRestSiblings: false }],
    'vue/multi-word-component-names': [
      'warn',
      {
        ignores: ['index', 'Header', 'Footer']
      }
    ]
  }
}

—>eslint에 ignore 만들기

'-js notes- > vue.js' 카테고리의 다른 글

vue.js기초- 백엔드와 연결 (0)	2022.09.30
vue 기초-vue.js의 구성 (0)	2022.09.30