728x90
반응형
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/vue@next"></script>
<title>Vue3</title>
</head>
<body>
<div id="app">
<button type="button" v-on:click="counter++">Counter: {{counter}}</button>
</div>
<script>
const app = Vue.createApp({
data() {
return {
counter: 100,
};
},
});
app.mount('#app');
</script>
</body>
</html><script src="https://unpkg.com/vue@next"></script>https://v2.vuejs.org/v2/guide/installation.html#CDN
Installation — Vue.js
Vue.js - The Progressive JavaScript Framework
v2.vuejs.org
현재 Vue.js CDN에서 가지고 온 것으로는 듣고 있는 강의에서 연결이 안됐었다.
강의와 동일한 내용으로 작성한 것으로 해결;
TIL
1. {{ 변수명 }} 템플릿 문법
2. v-on: click 클릭 시 이벤트
- Vue에서는 이렇게 쓰이나 봄
Vue.js 간단정리 #5 이벤트 핸들링
https://www.vuemastery.com/courses/intro-to-vue-js 에 정리된 공식 Vue 무료 강의에 있는 내용을 짧게 정리해보려 한다.이벤트 핸들링은 기본적으로 v-on:이벤트이름의 형태로 핸들링 할 수 있다. 예제는 아래
velog.io
3.
div id = "app"을 app.mount('#app')으로 연결
Vue 사용하는 핵심
* 선언적 렌더링 Vue는 템플릿 구문 {{ 데이터 }}을 활용하여 데이터를 선언적으로 출력할 수 있도록 한다.
* 반응성 Vue는 Javascript상태 변경을 자동으로 추적하고 변경이 발생하면 DOM을 효율적으로 업데이트한다.
Vue.js 핵심기능
바인딩
이벤트 핸들링
양방향 바인딩
조건문
반복문
반응형
댓글