반응형
1,2편 보러가기
Vue.js 사용법 1 (CDN 코드 이용)
Vue란? front 앱의 기본 뼈대와 api를 제공하는 Java Script 프레임 워크이다. 컴포넌트 베이스 개발이다. 컴포넌트는 (화면 ui 구성) , data, 메서드로 구성된다. 보다 동적이고 상호 호환적인 웹 애플리
skylarcoding.tistory.com
Vue.js 사용법 2 (CDN 코드 이용)
Vue란? 1편 보러가가기 ⬇️ Vue.js 사용법 1 (CDN 코드 이용) Vue란? front 앱의 기본 뼈대와 api를 제공하는 Java Script 프레임 워크이다. 컴포넌트 베이스 개발이다. 컴포넌트는 (화면 ui 구성) , data, 메서
skylarcoding.tistory.com
Directive (지시자)
응용 (사진 선택 + 선택된 사진 배경색)
<div id="app">
<span v-for="(img,idx) in imgs" >
<img v-bind:src="img.url" v-on:click="select(idx)" v-bind:class="{selClass:img.sel}" >
<!-- select(): 파라메터로 현재 인덱스 값을 넣어서 호출해라. -->
</span>
</div><div id="app">
<span v-for="(img,idx) in imgs" style="width:150px;height:150px">
<img v-bind:src="img.url" v-on:click="select(idx)" v-bind:class="{selClass:img.sel}" style="width:100px;height:100px">
<!-- select(): 파라메터로 현재 인덱스 값을 넣어서 호출해라. -->
</span>
</div>
<script>
const app = Vue.createApp({
data(){
return{
imgs:[
{url:'../imgs/1.jpeg', sel:false},
{url:'../imgs/2.jpeg', sel:false},
{url:'../imgs/3.png', sel:false},
{url:'../imgs/4.png', sel:false},
{url:'../imgs/5.png', sel:false}
]
}
},
methods:{
select(idx){
this.imgs[idx].sel = !this.imgs[idx].sel
}
}
})
app.mount('#app');
</script>
응용 ( 중요도 체크)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <!-- 라이브러리 복사 -->
</head>
<body>
<div id="app">
<input type="checkbox" v-model="val">{{imp}}
</div>
<script>
const app = Vue.createApp({
data(){
return{
val:false
}
},
computed:{ //변화를 자동으로 감지함
imp(){
if(this.val){
return '중요함'
}else{
return '보통임'
}
}
}
})
app.mount('#app');
</script>
</body>
</html>
input type="range"
파라미터? 범위 조절하는 걸로 범위 조절.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <!-- 라이브러리 복사 -->
</head>
<body>
<div id="app">
<input type="range" min="0" max="100" step="1" v-model="val">{{val}}<br/>
<h4>결과</h4>
{{msg}}
</div>
<script>
const app = Vue.createApp({
data(){
return{
val:50,
msg:''
}
},
watch:{
val(v){
if(v>=75){
this.msg = '위험'
}else if(v>=40){
this.msg = '보통'
}else{
this.msg = '위험'
}
}
}
})
app.mount('#app');
</script>
</body>
</html>
반응형
