728x90
반응형
vueex1.html
<!DOCTYPE html>
<!--
/vue1/src/main/webapp/20220530/vueex1.html
1. Dynamic Web Project : vue1
2. webapp 폴더에 20220530 폴더 생성
3. vue1ex.html 파일 생성
-->
<html>
<head>
<meta charset="UTF-8">
<title>vue 예제 1</title>
<script type="text/javascript" src="https:unpkg.com/vue@2.5.16/dist/vue.js">
</script>
</head>
<body>
<div id="simple" >
<h2>{{message}}</h2> <!-- {{message}} : 데이터 중 message 데이터의 값 출력 -->
<input id="a" text="text" v-bind:value="message"> <!-- v-bind:value="message" : 데이터 중 message 데이터의 값 출력-->
<br>
<img v-bind:src="imagePath">
<h3>{{name}}</h3>
<h3 v-html="name"></h3> <!-- v-html : innerHTML과 연결 -->
</div>
<script type="text/javascript">
//자바스크립트 객체
let model = {
message : "첫번째 Vue.js 예제 : Hello Vue",
imagePath : "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png",
name : "홍길동"
}
//Vue 객체 생성
let simple = new Vue({
el:"#simple", //vue객체 사용 영역 지정
data : model //사용 데이터의 객체 설정
})
</script>
</body>
</html>728x90
반응형
'study > Vue' 카테고리의 다른 글
| [Vue] 28.computed : 함수를 데이터로 사용 (vueex6.html ) (0) | 2022.05.30 |
|---|---|
| [Vue] 28. v-for 예제2 (vueex5.html ) (0) | 2022.05.30 |
| [Vue] 28. v-for 예제 (vueex4.html ) (0) | 2022.05.30 |
| [Vue] 28. v-if : 조건 디렉티브 (vueex3.html ) (0) | 2022.05.30 |
| [Vue] 28. v-model 예제 (vueex2.html ) (0) | 2022.05.30 |