WEB/Vue
Vue 맛보기
Harimad
2022. 6. 17. 19:47
학습목표
1. vue cdn 사용방법
2. vue와 html 연결방법
3. vue 변수 사용방법
vue 설치방법 참고 : https://kr.vuejs.org/v2/guide/installation.html
1. Vue를 쓰기 위해 head 태그에 cdn을 붙여넣기 한다.
<head>
<!-- Vue cdn -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
2. #app 태그에 뷰 연결 하는 방법
<body>
<div id="app"></div>
<script>
const app = new Vue({
el: "#app",
})
</script>
</body>3. 변수 사용하는 방법
html 태그 안에서 vue 변수를 쓰려면 { { } } 머스테치를 사용하면 된다.
<body>
<div id="app">
<h1>Hello Vue! {{ name }}</h1>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
name: "짱구",
}
})
</script>
</body>실행화면
4. 배열 변수 사용하는 방법
<body>
<div id="app">
<div>{{frameworks}}</div>
<ul>
<li v-for="요소 in frameworks">{{요소}}</li>
</ul>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
name: "짱구",
frameworks: ["리액트", "앵귤러", "뷰"],
}
})
</script>
</body>실행화면
4. vue 변수값과 input value 연결시키기 (v-model)
<body>
<div id="app">
<h1>Hello Vue! {{ name }}</h1>
<input type="text" v-model="name">
</div>
<script>
const app = new Vue({
el: "#app",
data: {
name: "짱구",
}
})
</script>
</body>실행화면 1
input의 value 값을 바꾸면 동적으로 연결된 변수값도 동하게 바뀜
실행화면 2
