vue board 만들기(read/create)(1)

READ

• DB는 일단 게시판 완성 후 만들어보고 data 폴더에 더미 데이터를 만든다.

export default [
    {
        writer : '아이린',
        title: '레드벨벳',
        content:'1'
    },
    {
        writer : '슬기',
        title: '레드벨벳',
        content:'2'
    },
    {
        writer : '웬디',
        title: '레드벨벳',
        content:'3'
    },

]

• 각각의 데이터를 불러오고 싶을 때 v-for 반복문을 이용하면 간편하다

<template>
  <div>
    <table>
      <tr>
        <td>제목</td>
        <td>컨텐츠</td>
        <td>순서</td>
      </tr>
      <tr v-for="(item,index) in data" :key="index">
        <td>{{ item.title }}</td>
        <td>{{ item.content }}</td>
        <td>{{ item.idx }}</td>
      </tr>
    </table>
  </div>
</template>
<script>
import data2 from "@/data2"
  //골뱅이는 무조건 src부터 시작하게 해준다.
export default {
  name:'Read',
  data(){
    return{
      data: data2,
    }
  }
}
</script>

• @ 경로
  프로젝트가 커지면 경로를 지정할때 뎁스가 깊어지기 때문에 @를 이용한 경로를 확인하면 간편하다.
  /Src부터 시작하게 해준다.

create

양방향 데이터

• v-model을 통해 사용자가 입력하는 값을 간편하게 바인딩 할 수 있다.

<template>
  <div>
    <input v-model="title" placeholder="제목을 입력하세요/">
    <textarea v-model="content" placeholder="내용을 입력하세요"/>
    <input v-model="idx" placeholder="순서을 입력하세요"/>
    <button @click="write">등록하기</button>
  </div>
</template>
<script>
import data2 from "@/data2";
export default {
  name:"create",
  data(){
    return{
      title:"",
      content:"",
      idx:"",
      data : data2
    }
  },
  methods:{
    write(){
      this.data.push({
        title:this.title,
        content:this.content,
        idx:this.idx
      })
      this.$router.push("/");
    }
  }
}
</script>

• 양방향 데이터 바인딩을 통해 획득한 데이터(title, content, idx)를 push를 통해 연습 DB인 data 파일에 생성한다.

router

• 특정 주소와 그 주소로 접근한 페이지의 정보를 설정할 수 있다.

<router-view>

라우터로 설정한 페이지를 이 위치에 보여준다.

라우터 설정

const router = new VueRouter({
	mode:'history',
  routes:[
    {
    	path:'/',
      	name:'Home',
      	component:'HomeComponent'
    },
    {
    	path:'/about',
      	name:'about',
      	component:'aboutComponent'
    },
  ]
})

Router 주소로 이동하기

1. router-link 사용

<router-link :to="/">Home<router-link>
<router-link :to="/about">About<router-link>

2. methods - $router.push()

• methods에 등록하고 클릭시 해당 메소드를 호출하여 $router를 이동한다.

//template
<button @click="clickEvent">홈으로 이동하기</button>
methods:{
	clickEvent(){
    	this.$router.push('/')
    }
}

이동하면서 파라미터 함께 전달하기

v-bind, v-on / v-model 사용의 단점

https://joshua1988.github.io/web-development/vuejs/v-model-usage/

reference

https://webisfree.com/2019-03-25/[vuejs]-vue-router-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95-%EB%9D%BC%EC%9A%B0%ED%8A%B8-%EC%84%A4%EC%A0%95

• 확실히 2달동안 js 이론만 파다가 이렇게 직접 만들면서 공부하니 더 재밌는거같다... 9시에 가려고 했는데 벌써 10시당 ㅎㅎㅎ