클라이언트 웹브라우저에 외부 javascript를 로딩 시켜서 로딩된 javascript 를 활용해서 어떠한 동작을 하는 방법이 있다.
vue.js
https://v3.ko.vuejs.org/guide/introduction.html
hello.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/vue/hello.html</title>
</head>
<body>
<h1>vue js 사용하기</h1>
<div id="app">
<p>오늘의 운세 : <strong>{{ fortune }}</strong></p>
<p>내 이름은 : <strong>{{ myName }}</strong></p>
<button v-on:click="clicked">눌러보셈</button>
<button v-on:click="clicked2">이름 바꾸기</button>
<br />
<input type="text" v-model="msg"/>
<p>{{msg}}</p>
<ul>
<li v-for="item in nums">{{item}}</li>
</ul>
</div>
<div>
<input type="text" id="inputMsg"/>
<p id="result"></p>
</div>
<script>
document.querySelector("#inputMsg").addEventListener("input", function(){
document.querySelector("#result").innerText=this.value;
});
</script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// Vue 객체를 생성하면서 object 전달하기
new Vue({
el:"#app",
data:{
fortune:"동쪽으로 가면 귀인을 만나요!",
myName:"김구라",
msg:"",
nums:[10, 20, 30]
},
methods:{
clicked:function(){
//alert("오잉?");
this.fortune="오후에도 vue 를 배우게 될거에요";
},
clicked2:function(){
//this.myName="에이콘";
this.nums=["김구라", "해골", "원숭이"];
}
}
});
</script>
</body>
</html>
| el | 해당 id를 가진 div를 관리하겠다는 뜻이다. (주로 class말고 id를 쓴다.) |
| data | 모델의 초기값을 정의해놓을 수 있다. |
| methods | 특정시점에 실행할 함수를 정의할 수 있다. |
Step01_event
<!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">
<title>Step01_event.html</title>
</head>
<body>
<h1>이벤트 테스트</h1>
<div id="app">
<!--
v-on:이벤트명="methods object 에 있는 호출될 함수명"
-->
<button v-on:click="clicked">눌러보셈</button>
<p>{{msg}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app=new Vue({
el:"#app",
data:{
msg:""
},
methods:{
clicked:function(){
console.log("버튼을 눌렀네요?");
//data object 안에있는 msg 참조
this.msg="버튼을 눌렀네요?";
}
}
});
</script>
</body>
</html>
Step01_event2
<!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">
<title>Step01_event2.html</title>
</head>
<body>
<h1>이벤트 테스트2</h1>
<div id="app">
<button v-on:click="increase">+</button>
<button v-on:click="decrease">-</button>
<p>{{count}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app=new Vue({
el:"#app",
data:{
count:0
},
methods:{
increase:function(){
this.count++;
},
decrease:function(){
this.count--;
}
}
});
</script>
</body>
</html>
Step01_event3
<!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">
<title>Step01_event3.html</title>
<style>
.box{
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
<h1>이벤트 테스트3</h1>
<div id="app">
<div class="box" v-on:mousemove="moved">
x : <strong>{{x}}</strong>
<br>
y : <strong>{{y}}</strong>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app=new Vue({
el:"#app",
data:{
x:0,
y:0
},
methods:{
//함수에는 이벤트 객체가 전달된다.
moved:function(e){
console.log(e);
//이벤트가 일어난 곳의 좌표를 x, y 에 넣어준다.
this.x=e.offsetX;
this.y=e.offsetY;
}
}
});
</script>
</body>
</html>
Step01_event4
<!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">
<title>Step01_event4.html</title>
<style>
.box{
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<h1>이벤트 테스트4</h1>
<div id="app">
<div class="box" v-on:click="divClicked">div1</div>
<div class="box" v-on:click="divClicked">div2</div>
<div class="box" v-on:click="divClicked">div3</div>
<div class="box" v-on:click="divClicked">div4</div>
<div class="box" v-on:click="divClicked">div5</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app=new Vue({
el:"#app",
data:{
},
methods:{
divClicked:function(e){
//클릭한 바로 그 div 의 innerText 를 "clicked!" 로 바꾸고 싶다면?
console.log(e);
// e.target 은 이벤트가 발생한 문서객체의 참조값이다.
e.target.innerText="clicked!";
e.target.style.backgroundColor="yellow";
}
}
});
</script>
</body>
</html>
Step01_event5
<!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">
<title>Step01_event5.html</title>
</head>
<body>
<h1>이벤트 테스트5</h1>
<div id="app">
<form action="test.jsp" v-on:submit="onSubmit">
<input type="text">
<button type="submit">전송</button>
</form>
<br>
<!-- .prevent 수식어를 이용해서 기본 이벤트 막기 -->
<form action="test.jsp" v-on:submit.prevent="onSubmit2">
<input type="text">
<button type="submit">전송</button>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app=new Vue({
el:"#app",
data:{
},
methods:{
onSubmit:function(e){
//기본 이벤트를 막아서 폼이 제출되지 않도록 한다.
e.preventDefault();
},
onSubmit2:function(){
}
}
});
</script>
</body>
</html>
예시의 두 버튼은 폼 전송 기능이 막혀있다.
e.preventDefault(); 혹은 v-on:submit.prevent 코드를 사용해서 submit 기능(폼 전송 기능)을 막아놓았다.
'javascript, framework > vue' 카테고리의 다른 글
| Step07_component (0) | 2022.08.26 |
|---|---|
| vue 사용 예시 (signup_form, 회원가입) (0) | 2022.08.26 |
| Step04~06(style, if, for) (0) | 2022.08.26 |
| Step03_class (0) | 2022.08.26 |
| Step02_model (v-model) (0) | 2022.08.26 |
