[국비 91일차 TIL] vue 글쓰기 페이지 만들기

Vue

WritePage.vue

<template>
  <div>
    <h1>글쓰기 페이지</h1>
  </div>
</template>

<script>
export default {
    name : 'WritePage'
}
</script>

<style>

</style>

 

App.vue

WritePage를 사용할 수 있도록 App.vue에서 설정해줌.

<template>
  <div>
<WritePage></WritePage>
  </div>
</template>

<script>
import WritePage from './components/WritePage.vue'

export default {
  name: 'App',
  components: {
    WritePage
  }
}
</script>

 

WritePage.vue

<template>
  <div class="write">
    <h1>글쓰기 페이지</h1>
    <input>
    <textarea></textarea>
    <br>
    <button>글쓰기</button>
  </div>
</template>

<script>
export default {
    name : 'WritePage'
}
</script>

<style>
.write{
    width:auto;
    height: 500px;
    background-color:rgb(229, 202, 255);
}
.write input{
    width: 500px;
    height: 30px;
    margin-bottom: 5px;
}
.write textarea{
    width: 500px;
    height: 300px;
}
</style>

 

 

<template>
  <div class="write">
    <h1>글쓰기 페이지</h1>
    <input v-model="title">
    <textarea v-model="content"></textarea>
    <br>
    <button @click="write">글쓰기</button>
  </div>
</template>

<script>
export default {
    name : 'WritePage',
    data(){
        return{
            title: '제목을 적어주세요.',
            content: '본문 내용을 적어주세요.'
        }
    },
    methods:{
        write(){
            alert('글쓰기 버튼 클릭함. = ' + this.title + ' / ' + this.content)
        }
    }
};
</script>

 

 

 

<script>
export default {
    name : 'WritePage',
    data(){
        return{
            title: null,
            content: null
        }
    },
    methods:{
        write(){
            let saveData = {}
            saveData.title = this.title
            saveData.content = this.content
            saveData.mno = 1
            alert('글쓰기 버튼 클릭함. = ' + JSON.stringify(saveData))
        }
    }
};
</script>