javascript
new
"new 연산자를 사용해야만 함수 내부의 내용을 변수에 대입 할 수 있다."
new 사용
function structure(first, last) {
this.first = first;
this.last = last;
this.printer = function () {
return this.first + ' ' + this.last;
};
}
var building = new structure('삼성','빌딩')
console.log(building.printer())new 사용 안하면 에러
function structure(first, last) {
this.first = first;
this.last = last;
this.printer = function () {
return this.first + ' ' + this.last;
};
}
//var building = new structure('삼성','빌딩')
var building = structure('삼성','빌딩') //new 연산자를 제거하였습니다.
console.log(building.printer())Vue 문법 정리
message
index.html
<html>
<head>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="index.js"></script>
</body>
</html>index.js
var app = new Vue({ // new 를 통해 객체로 넘김
el: '#app', //id 가 app인 요소에 적용
data: {
message: 'Hello Vue!'
}
});
app.message = 'I have changed the data!';
// 객체로 접근해서 내부 데이터 변경 가능<v-태그>
v-로 시작하는 태그는 뷰 태그이다.
<div id="app-2">
<span v-bind:title="message">
Hover your mouse over me for a few seconds
to see my dynamically bound title!
</span>
</div>조건, 반복문
if
index.html
<div id="app-3">
<span v-if="seen">Now you see me</span>
</div>index.js
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})for
index.html
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>index.js
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
})components
js
// Define a new component called todo-item
Vue.component('todo-item', {
template: '<li>This is a todo</li>'
})
var app = new Vue(...)html
<ol>
<!-- Create an instance of the todo-item component -->
<todo-item></todo-item>
</ol>컴포넌트를 태그처럼 사용 가능 하다.
template syntax
👉🏻 https://v2.vuejs.org/v2/guide/syntax.html
text
msg
가장 많이 사용, 변경 가능
<span>Message: {{ msg }}</span>변경 불가능
<span v-once>This will never change: {{ msg }}</span>
mustaches / directive
<div>{{ mustaches }}<div>
<div v-bind:id="dynamicId"></div>mustaches는 html 요소 내부에는 사용 불가능하다. 내부에서 사용할려면 directive 방식으로 사용.
vue..great
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>자바스크립트 활용 쉽게 뷰는 위의 구문을 모두 지원해준다.
notice
<!-- this is a statement, not an expression: -->
{{ var a = 1 }}
<!-- flow control won't work either, use ternary expressions -->
{{ if (ok) { return message } }}그...아무리 강력해도 위와 같은 구문은 안됨..!
v-bind
<!-- full syntax -->
<a v-bind:href="url"> ... </a>
<!-- shorthand -->
<a :href="url"> ... </a>
<!-- shorthand with dynamic argument (2.6.0+) -->
<a :[key]="url"> ... </a>v-on
<!-- full syntax -->
<a v-on:click="doSomething"> ... </a>
<!-- shorthand -->
<a @click="doSomething"> ... </a>
<!-- shorthand with dynamic argument (2.6.0+) -->
<a @[event]="doSomething"> ... </a>axios
Vue.js 프로젝트에 axios 설치하기
아래의 3가지 방법중 하나만 설치하거나 설정하면 된다.
npm install --save axiosyarn 으로 설치하는 경우는 아래의 명령어를 입력을 하면 됩니다.
yarn add axios직접 웹페이지의 영역 안에 입력을 해도 됩니다.
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>axios 별칭으로 사용하기
axios는 REST을 별칭을 이용해서 쉽게 통신을 할 수 있습니다.
불러오기 : axios.get(url[, config])
입력하기 : axios.post(url[, data[, config]])
수정하기 : axios.patch(url[, data[, config]])
삭제하기 : axios.delete(url[, config])
GET (불러오기)
GET은 서버로 부터 데이터를 가져오는데 사용합니다. 아마도 가장많이 사용하는 명령어 일 것입니다.
서버 주소인 /api/data로 부터 값을 불러올 때 사용합니다.
axios.get('/api/data')
.then(res => {
// 불러온 값을 Console에 뿌려줍니다.
console.log(res.data)
})axios 요청 시 파마메터 정보(/api/todos/1)를 같이 입력하여 정보를 얻어 올 수 있습니다. 위의 것이 리스트를 불러온다면 지금 아래의 요청은 하나의 상세정보를 불러온다고 보시면 됩니다.
axios.get('/api/data/1')
.then(res => {
console.log(`status code: ${res.status}`);
console.log(`headers: ${res.headers}`)
console.log(`data: ${res.data}`)
})axios 요청 시 파라메터 정보가 아니라 메소드의 두 번째 인자인 config 객체로 요청값을 넘길 수 있습니다.
axios.get('/api/data', {
params: { title: 'vue.js는 조으다.' },
headers: { 'X-Api-Key': 'my-api-key' },
timeout: 1000 // 1초 이내에 응답이 없으면 에러 처리
}).then(res => {
console.log(res.data)
})POST (값 입력하기)
/api/data에 값을 입력 할 때 사용합니다.
서버의 데이터 리스트의 마지막에 지금 넘기는 정보를 추가 합니다.
axios.post('/api/data', {title: "vue.js는 조으다."})
.then(res => {
console.log(res.data)
})PATCH (특정 값 수정하기)
/api/data/3에 값을 입력 할 때 사용합니다.
서버의 데이터 리스트 중 3에 해당 하는 값의 title를 수정합니다.
axios.patch('/api/data/3', {title: "vue.js는 조으다."})
.then(res => {
console.log(res.data)
})DELETE (특정 값 삭제하기)
/api/data/3에 값을 삭제 할 때 사용합니다.
서버의 데이터 리스트 중 3에 해당 하는 값을 삭제 합니다.
axios.delete('/api/data/3')
.then(res => {
console.log(res.data)
})axios로 파일 업로드 하기
axios로 파일도 업로드 할 수 있습니다.
먼저 HTML로 아래와 같이 form문을 작성합니다.
HTML코드
여기에서 ref="photoimage"는 중요한 역할을 하니 빼먹으면 안됩니다.
<form method="post" enctype="multipart/form-data" action="/contant/124/photo">
<input type="file" name="photo" ref="photoimage">
<input type="submit">
</form>JAVASCRIPT 코드
FormData() 객체를 생성하고 this.$refs.photoimage과 같이 ref옵션을 이용해서 필드에 직접 참조를 하여 이미지파일을 가져오고 업로드를 할 수 있습니다.
var data = new FormData();
var file = this.$refs.photoimage.files[0];
data.append('photo', file);
axios.post('/api/data/' + this.no + '/photo', data)
.then((res) => {
this.result = res.data;
})
.catch((ex) => {
console.log('사진업로드 실패', ex);
});