Vue - script에 추가

Vue를 스크립트에 추가하는 방법 

 

1. 직접 Vue.js 파일을 받아 script 구문 추가하기

 

<script src = "vue.js"></script>

 

    직접 경로를 설정해 script src에 넣어서 사용

 

2. CDN을 사용하여 script 구문 추가하기

 

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

 

    해당 script 구문을 추가하고 사용

 

 

Vue사용해보기

 

CSS

<style>
    .active {
	color : red;
    }
<style>

HTML

<div id = "app">
    <div v-bind:class='{ active : active }'>
        {{ msg }}
    </div>
</div>

SCRIPT

<script>
    new Vue({
        el: 'app',
        data : {
            msg : 'Hello Vue!',
            active : true 
        }
    })
</script>

 

실행결과

 

CSS로 active클래스의 글자색을 변경함

아이디가 app인 div 생성, 내부에 Vue Active클래스 값을 가지는 div생성, 해당 데이터의 msg 문장을 출력

새로운 Vue 객체 생성 -> element명 : app  => msg : Hello Vue! , active : true 값을 가짐

 

active 값이 false 일 경우 active 클래스가 적용되지 못하므로 글자색 변화 없음