vue

 

yarn 으로 시작하기

 

1. yarn 설치

https://pakss328.medium.com/yarn이란-b4e8edf1638b

 

 

2. yarn global add @vue/cli-init

 

3.  vue init webpack vue-board


 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$ vue init webpack vue-board
 
? Project name vue-board
? Project description A Vue.js project
? Author junhochoi
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) yarn
 
   vue-cli ·· Generated "vue-board".

 

 

# VueJS 해쉬뱅 # 기호 url 제거하기
아래와 같이 route 모듈이 설정된 곳에 mode값의 코드를 추가합니다.

export default new Router({
  mode: 'history',
  routes: [ ... ]
  ...
});


 

 

 

App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'

}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 

 

 

data/index.js

 

export default[
	{
		writer:'아이린',
		title:'레드벨벳',
		content:'1'		
	},

	{
		writer:'슬기',
		title:'레드벨벳2',
		content:'2'		
	},

    {
		writer:'웬디',
		title:'레드벨벳3',
		content:'3'		
	},

]

 

 

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Read from  '@/components/Read'
import Create from '@/components/Create'
import Detail from '@/components/Detail'


Vue.use(Router)

export default new Router({
  mode:'history',
  routes: [
    {
      path: '/',
      name: 'Read',
      component: Read
    },
    {
      path: '/create/:contentId?',
      name: 'Create',
      component: Create
    },
    {
      path: '/detail/:contentId',
      name: 'Detail',
      component: Detail
    },
  ]
})

 

 

 

 

components/Create.vue

<template>
  <div>
	 <input v-model="writer"	placeholder="글쓴이" />
	 <input v-model="title"	placeholder="제목" />
	 <textarea v-model="content"	placeholder="내용" ></textarea>
	 <button @click="index !== undefined ? update():write()"	>{{index !==undefined ? "수정":"작성"}}</button>	 
	</div> 
</template>
<script>
import data from '@/data';
export default {
	name:'Create',

	data(){
		const index=this.$route.params.contentId;

		return{
			data:data,
			index:index,
			writer:index !==undefined ? data[index].writer:"",
			title:index !==undefined ? data[index].title:"",
			content:index !==undefined ? data[index].content:"",
		}
	},

	methods:{
		write(){
			this.data.push({
				writer:this.writer,
				title:this.title,
				content:this.content
			});

			this.$router.push({
				path:'/'
			});
		},

		update(){
			console.log("수정");
			data[this.index].writer=this.writer;
			data[this.index].title=this.title;
			data[this.index].content=this.content;
			this.$router.push({
				path:'/'
			});
		}
	}


}
</script>

<style>

</style>

 

 

 

components/Detail.vue

<template>
  <div>
    <div>{{data.writer}}</div>
    <div>{{data.title}}</div>
    <div>{{data.content}}</div>
	<button @click="updateData">수정</button>
	<button @click="deleteData">삭제</button>
	인덱스: {{index}}
  </div>
</template>

<script>
import data from '@/data';
export default {
  name: "Detail",
  data(){
	  const index=this.$route.params.contentId
	 
	  return{
		  data:data[index],
		  index:index
	  }
  },
  methods:{
	  deleteData(){
		  console.dir(this.index);
		  data.splice(this.index, 1);
		  this.$router.push({
		 		path:'/'
		  });
	  },

	  updateData(){
		  this.$router.push({
			  name:'Create',
			  params:{
				  contentId:this.index
			  }
		  });
	  }
  }

};
</script>

<style>
</style>

 

 

 

components/Read.vue

<template>
  <div>
    <div>{{data.writer}}</div>
    <div>{{data.title}}</div>
    <div>{{data.content}}</div>
	<button @click="updateData">수정</button>
	<button @click="deleteData">삭제</button>
	인덱스: {{index}}
  </div>
</template>

<script>
import data from '@/data';
export default {
  name: "Detail",
  data(){
	  const index=this.$route.params.contentId
	 
	  return{
		  data:data[index],
		  index:index
	  }
  },
  methods:{
	  deleteData(){
		  console.dir(this.index);
		  data.splice(this.index, 1);
		  this.$router.push({
		 		path:'/'
		  });
	  },

	  updateData(){
		  this.$router.push({
			  name:'Create',
			  params:{
				  contentId:this.index
			  }
		  });
	  }
  }

};
</script>

<style>
</style>

 

 

https://github.com/braverokmc79/vue-board

https://www.youtube.com/watch?v=s1lXVr65KZg&list=PLyjjOwsFAe8ITIDUNsU_x4XNbPJeOvs-b&index=1

 

 

 

 

 

 

 

 

 

jquery

 

about author

PHRASE

Level 60  라이트

우리의 후손들이 오늘에 사는 우리 세대가 그들을 위해 무엇을 했고 조국을 위해 어떠한 일을 했느냐고 물을 때 우리는 서슴지 않고 조국 근대화의 신앙을 가지고 일하고 또 일했다고 떳떳하게 대답할 수 있게 합시다. -박정희

댓글 ( 4)

댓글 남기기

작성












vue 목록    more