vue.js
vue.js 란 웹페이지 화면을 개발하기 위한 프론트엔드 프레임 워크이다.
how to install
직접 <script> 에 추가
npm
vue 를 사용하여 대규모 어플리케이션을 구축할 때 npm 을 이용한 설치가 권장된다. npm 은 webpack 과 같은 모듈 번들러와 잘 작동한다.
npm install vue
CLI
예제에서는 공식문서에 나와있는 CDN 을 이용하려 한다.
<body>
<div id="app">
{{ name }}
</div>
<script>
new Vue({
el: "#app",
data: {
name: "돼지고기 감자 조림",
}
})
</script>
</body>위 예제는 id 가 app 인 div 태그 안에 script 안에 생성한 name 의 값을 화면에 출력한다.
<body>
<div id="app">
{{ person.name }} {{ person.age }}
</div>
<script>
new Vue({
el: "#app",
data: {
person: {
name: "유휘찬",
age: 24,
},
},
})
</script>
</body><body>
<div id="app">
{{ nextYear() }}
</div>
<script>
new Vue({
el: "#app",
data: {
person: {
name: "유휘찬",
age: 24,
},
},
methods: {
nextYear() {
return this.person.name + "은 내년에" + (this.person.age + 1) + "살 입니다.";
}
},
})
</script>
</body>name, age, nextYear() 와 같은 경우 vue.js 자체에서 key 에 해당하는 data 와 methods 를 작성하지 않아도 되도록 해준다.
data binding
<body>
<div id="app">
<input type="text" v-bind:value="inputData">
</div>
<script>
new Vue({
el: "#app",
data: {
inputData: "hello",
},
})
</script>
</body>이와 같이 작성하면 input 태그가 기본적으로 가지고 있게 되는 value 는 "hello" 가 될 것이다. vue.js 에서 태그의 속성에 데이터를 바인딩 해줄 때에는 v-bind: 을 속성명 앞에 붙여준다. 여기서 v-bind: 는 : 이렇게 콜론만 사용해도 작동한다.
Events
<body>
<div id="app">
<button v-on:click="warn">click</button> 👈
<button @click="warn">click</button> 👈
</div>
<script>
new Vue({
el: "#app",
methods: {
warn() {
alert("주의하세요");
},
},
});
</script>
</body>vue.js 애서 이벤트는 이와같이 v-on:click 과 같이 사용할 수 있다. 이는 @click 처럼 생략이 가능하다.
<body>
<div id="app">
<form @submit.prevent="punch">
<input type="text" />
<button type="submit">submit</button>
</form>
</div>
<script>
new Vue({
el: "#app",
methods: {
punch() {
alert("나를 막아봐");
console.log("기다리고 있을게");
},
},
});
</script>
</body>이러한 상황에서는 submit 버튼을 눌러 submit 이벤트가 발생하면 경고창이 뜨고 콘솔창이 0.1 초간 잠깐 보였다 사라지는 것을 확인할 수 있다. 여기서 preventDefault 같은 역할을 하는 이벤트 수식어 라는 것이 있다. 여기서는 .prevent 이다.
키 수식어 라는 것도 있다.
키보드 이벤트를 청취할 때, 종종 공통 키 코드를 확인해야 한다. vue 는 이벤트를 수신할 때 v-on 에 대한 키 수식어를 추가 할 수 있다.
<input v-on:keyup.enter="submit"
