Vue.js : 정의, 장점, vue instance, 데이터바인딩, directives(지시문)

Vue.js : 정의, 장점, vue instance, 데이터바인딩, directives(지시문)

2021. 2. 25. 09:15ㆍ프론트엔드/Vue.js

정의

웹 페이지 화면을 개발하기 위한 프런트엔드 프레임워크

single page application 개발 시 사용된다.

* single page application : header, footer 등 동일한 화면 제외하고 변경되는 부분만 로드할 때, 빠른 속도와 트래픽 감소 효과. 즉, html, css, script를 한 파일로 관리한다.

장점

낮은 학습 곡선 : 실무자는 3시간, 입문자는 2~3일 내에 학습이 가능
우수한 성능 : React와 Angular에 비해 성능이 우수하고 빠름
라이벌 프레임워크의 장점을 흡수 : React와 Angular의 장점을 결합
낮은 진입 장벽 : ES6, 웹팩 등의 새로운 기술을 몰라도 학습 가능

Vue instance 생성

new Vue({
})

Vue instance 옵션 속성

new Vue({
	el: , //인스턴스의 시작 지점: 인스턴스가 바인딩될 클래스 선택자
	data: , //인스턴스의 데이터 속성: 정보를 저장하거나 속성 변수등을 선언
	template: , //인스턴스의 템플릿 속성: html,css 등 마크업 요소
	methods: , //이벤트 및 화면 동작 메서드
	created: , //라이프 사이클 커스텀 로직: 인스턴스가 생성되자마자 실행할 로직 정의
    computed: , //계산 관련 메서드 ex) 함수명: function(){}
    watch: //변화 감지
});

    <div id="app">
        <!--  데이터 바인딩-->
        {{msg}}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        //뷰 인스턴스 생성
        var app = new Vue({
            el: "#app",
            data: {
                msg: "hello Vue"
            }
        })
    </script>

데이터 바인딩

text

{{ }} - mustache

property

html 속성 내부에서도 사용 가능

<div id="item - {{id}}"></div>

javascript 표현식

<div class="line">{{number + 1}}</div>
<div class="line"></div>
<div class="line">{{ok? '예 아니오' }}</div>
<div class="line"></div>
<div class="line">{{message.split ( ''). reverse (). join ( '')}}</div>

지시문 directives

v-text, v-html

    <div id="app">
<!--       {{ msg }}-->
<!--        <span v-text="msg"></span>-->
        <span v-html="msg"></span>
    </div>
    
       <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data:{
                msg:"<strong>텍스트 붙이기</strong>"
            }
        })
    </script>

{{ }} = v-text : 모두 문자열로 인식

v-html : 태그를 태그로 인식

v-show

bool값에 따라 display 속성으로 적용

    <div id="app">
        <span v-html="msg" v-show="visible"></span>
    </div>
    
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                msg:"<strong>보여주기/감추기</strong>",
                visible:false //혹은 true
            }
        })
    </script>

v-if

아예 태그 자체가 사라짐 (v-show보다 권장)

   <div id="app">
       <span v-if="value>5"> value값이 5보다 크면 보이기 </span>
   </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var myapp=new Vue({
            el:"#app",
            data:{
                value:0
            }
        })
    </script>

       <span v-if="value>5">5보다 크다</span>
       <span v-else-if="value===5">5이다</span>
       <span v-else>5보다 작다</span>

v-bind

속성값을 설정할때 사용

v-bind:속성

   <div id="app">
       <h1>img {{msg}}</h1>
<!--       <p><img v-bind:src="img"></p>-->
       <p><img :src="img"></p>
   </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                msg:"붙이기",
                img:"images/_01.jpg"
            }
        })
    </script>

v-for

요소들을 반복해서 사용할 때

1. 별칭 이용

<div v-for="별칭 in 배열명">{{별칭}} 또는 {{별칭.name}} </div>

 <li v-for="num in numbers">{{num}}</li>

별칭은 아무거나 사용 가능, 뷰 인스턴스 안에서는 쓰이지 않고 html 안에서만 사용.

2. key, name, index 이용

<div v-for="(item, index) in items">{{index}}. {{item}}</div>
<div v-for="(val, key) in object">{{key}} / {{val}}</div>
<div v-for="(value,name,index) in object">{{index}}. {{name}} : {{value}}</div>

new Vue({  
     el: '#v-for-object',  
     data: {    
 	    object: {      
         title: 'How to do lists in Vue',      
         author: 'Jane Doe',      
         publishedAt: '2016-04-10'    
    	   } 
  	   }
})

index: 순서

name:title,author,publishAt

val : 값들 how to d,, jane Doe, 2016-4-10

key : name 중 "" 안에 키를 사용했을 때 ex) "A","B"

* spead 연산자 (ES6)

      var app=new Vue({
            el:"#app",
            data:{
                arr:[1,2,3]
            },
            methods:{
                change(){
                    //arr 복사, 새로운 배열 생성+데이터 추가
                    //es6 spread 연산자 ...
                    var newArr=[...this.arr,50]; // [1,2,3,50]
                    newArr[0]=100;
                    console.log(newArr); // [100,2,3,50]
                    this.arr=newArr;
                }
            }
        })

v-model

양방향 데이터 바인딩

form 요소( input, input, select, textarea, checkbox, radio )를 이용하여 즉각적으로 데이터를 반영

( = html 요소와 뷰인스턴스의 요소를 연결한다 )

input 사용 :

text에 입력된 데이터를 뷰의 uName으로 할당 후 반영

    <div id="app">
        <h1>Hello, {{uName}}</h1>
        <input type="text" v-model="uName">
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                uName:"Vue"
            }
        })
    </script>

checkbox와 v-bind 삼항 연산자 사용 :

체크박스에 체크되면 "single"이 트루로 적용

   <div id="app">
       <h1>체크박스를 체크해주세요</h1>
       <h2><input type="checkbox" v-model="single">쿵푸</h2>
       <img v-bind:src="single? img1 : img2">
   </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                single:true,
                img1:"images/_01.jpg",
                img2:"images/_02.jpg"
            }
        })
    </script>

checkbox의 value 값과 배열 이용:

체크박스의 밸류와 뷰의 langs 배열을 연동하기

    <h1>v-model</h1>
    <div id="app">
        <input type="text" v-model="uName">
        <label>당신의 이름은 : {{uName}}</label><br>
        <input type="checkbox" id="cb1" value="Vue js" v-model="langs">
        <label for="cb1">Vue js</label>
        <input type="checkbox" id="cb2" value="React js" v-model="langs">
        <label for="cb2">React js</label>
        <input type="checkbox" id="cb3" value="jQuery" v-model="langs">
        <label for="cb3">jQuery</label>
        <input type="checkbox" id="cb4" value="Node js" v-model="langs">
        <label for="cb4">Node js</label>
        <br>
        <span>사용가능한 언어는 : {{langs}}</span>
    </div>
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                uName:"",
                langs:[]
            }
        })
    </script>

v-model과 v-for 응용

    <div id="app">
        <h1>v-model for</h1>
        <select name="" id="" v-model="selected">
            <option v-for="opt in opts" v-bind:value="opt.value"> {{opt.text}} </option>
            <!-- 속성을 변경할때는 v-bind:속성 -->
        </select>
        <span> selected : {{selected}} </span>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                selected:"",
                opts:[
                    {text:"one", value:"SK"},
                    {text:"two", value:"LG"},
                    {text:"three", value:"KT"}
                ]
            }
        })
    </script>

'프론트엔드 > Vue.js' 카테고리의 다른 글

Directives지시문: v-on (0)	2021.03.02

Directives지시문: v-on 2021.03.02

코딩하지아