Vue

Vue

• Vue의 핵심은 간단한 템플릿 구문을 사용해 선언적으로 DOM에 데이터를 랜더링 하는것

<div id="app">
    <p></p>
</div>
<script>
    new Vue({ //새로운 Vue 를 선언
        // 어떤 요소에 적용할지 정함, 여기서는 HTML 코드에 선언된 id="app"인 div 태그를 지정하였음.
        el: "#app",
        // data 는 해당 VueJS 에서 사용할 정보들을 선언해주는 역할
        data() {
                message : "data 값 출력"
        }, 
    });
</script>

new Vue({})

• Vue를 선언하고 정의해주는 역할
  • 화면에 랜더링 되는 HTML 코드들을 컨트롤 하는것
  • HTML 안에 미리 약속된 언어로 자리를 만들어두면 해당 부분을 반응형으로 만들어 작업할 수 있도록 해주는것.
    • 정적인 웹페이지를 동적으로 운영 시 서버와 통신하며 여러 동작들을 처리 시 사용

el

• Vue 가 새롭게 정의될 때, 해당 Vue 가 적용될 요소를 지정하는 역할
  • 위의 코드에서는 #app을 선택하여 HTML 중 id 가 “app” 인 div 태그를 선택

data

• Vue는 여러 속성(property)를 가지는데 그중 data 는 Vue 에서 사용할 정보를 저장하는 곳으로, Object 형태로 정보를 가짐
  • message 라는 변수를 만들어 “안녕” 이란 값을 넣어줌.
  • Vue 는 변수에 담겨진 값을 들고 message 값이 필요한곳이 어딘지 찾아다님.

####

• data 안에 저장된 값이 에 들어가라고 지정해둠.
  • 이 기호안에 Vue 에서 선언된 속성 내의 변수나 함수등을 호출하여 사용 가능
  • data.message 값으로 지정된 값이 p태그 안에 들어가 출력됨.

반응형 data

• Vue 내의 정보와 DOM 이 연결되어 모든것이 반응형으로 작동하게 해줌.

VueJs 함수 저장소 (VusJS Methods)

• Vue 의 정보들을 저장하는 저장소가 data 라면 함수들을 저장하고있는곳이 Methods 임.

<p></p> //메소드 호출

methods: { // 메소드 옵션 사용
    howAreYou:function(){  //메소드 선언
        return "howAreYou 메소드값 출력" //메소드 값 리턴
    }
},

Vue 내에서 Vue 를 칭하는 단어, this

• data 안에 저장된 값을 this로 통해 사용가능함.

<p></p>

<script>
    new Vue({
        // 어떤 요소에 적용할지 정함, 여기서는 HTML 코드에 선언된 id="app"인 div 태그를 지정하였음.
        el: "#app",
        // data 는 해당 VueJS 에서 사용할 정보들을 선언해주는 역할
        data: {
        message : "DATA 값 출력" 
        },
        methods: {
            howAreYou:function(){
                return "howAreYou 메소드 출력"
            },
            sendMessage:function(){
            return this.message; //data 에 저장되어있는 message 데이터 가져옴.
            }
        },
    });
</script>

• 여기서 this 는 Vue 를 가르키는 키워드임.
  • this.message 는 Vue 에 정의된 message 이라는 값을 가져오라는 뜻

HTML 속엇에 접근 v-bind (VueJS Dircetive)

• HTML의 속성에는 를 사용할 수 없음.
  • HTML 속성값을 Vue 내에 선언된 값으로 변경 하고 싶을 경우 v-bind 디렉티브 를 사용해야함.

디렉티브 Directive

• 디렉티브란 HTML 태그 안에 들어가는 속성의 역할을 하며, ‘v-‘ 라는 접두사가 붙는게 특징

html 속성에 접근하는 v-bind

//전체 문법
<a v-bind:href="link">링크</a> // v-bind 추가

//약어
<a :href="link">링크</a> //v-bind 를 : 로 줄여쓸수 있음.

data: {
    link: "https://www.google.com" //data 속성에 link 추가하여 데이터 추가
},

약어

v-bind 약어

• v-bind:href=”link” 를 줄여 :href=”link” 로 표기 가능함. v-on 약어
• v-on:click=”event” 를 줄여 @click=”event” 로 표기 가능함.

일회성 디렉티브 v-once

    <div id="app">
        <p v-once></p> // 출력 : 안녕 VUE.js
        <p></p>  // 출력 : 그래 안녕
    </div>

new Vue ({
 el: "#app",
 data: {
    message : "안녕 VUE.js", // 데이터 첫 값 설정
 },
 methods: {
     sendMessage:function(){
        this.message = '그래 안녕'  //this 사용해서 message 값변경
        return this.message;        //message 값 가져옴.
     }
 },
});

• v-once 디렉티브는 HTML 코드로 출력된 이후에 어떤 처리가 있더라도 처음에 출력한 값을 유지시킬때 사용

HTML 코드를 직접 template 에 넣어주는 v-html

• v-html 은 HTML 코드를 직접적으로 입력해줄 때 사용되는 디렉티브

<div id="app">
    <p v-html="link"></p> // v-html 사용
</div>

new Vue({ // Vue 선언
    el: "#app",
    data: {
        //html 에서 사용할 HTML 문법 사용
        link: "<a href='https://www.naver.com'>링크</a>" 
    }
});

이벤트 리스너 v-on

v-on 디렉티브를 사용하여 DOM 이벤트를 듣고 트리거 될 때 javascript를 실행할 수 있음.-공식문서

• v-on 은 이벤트 리스너의 역할을 함.
  • 로그인 페이지 > id, pw 입력 후 로그인 시 로그인 됨 (로그은 버튼 클릭 시 입력된 id,pw 가 맞는지 검사하는 이벤트 발생되었다고 생각하면 됨.)
  • 로그인 버튼은 자신이 클릭되는 순간 이 로그인 이벤트를 실행시키게 됨.
  • 이벤트 실행하기 위한 트리거(여기선 로그인버튼 클릭) 와 이벤트를 연결해 주는것이 이벤트 리스너

<div id="app">

<button v-on:click="RandomNumber">주사위 던지기</button> //v-on 디렉티브 사용
</div>

new Vue({
    el: "#app",
    data:{
        number: 0 //주사위 숫자 저장할 변수
    },
    methods:{
        RandomNumber : function(){
            let i = Math.floor(Math.random() * (6)) + 1;
            this.number = i; //data의 number 값에 난수 대입
        }
    }
});

• v-on:이벤트이름="methodName" (v-on 디렉티브 구조)

함수에 인자 받기

• v-on 디렉티브를 통해 함수를 실행 시 함수 자체의 event-object뿐만 아니라
  • 우리가 임의로 생성한 값도 인수로 받아 함수에서 인자로 사용 가능

<div id="app">
    8
    <button  v-on:click="addCount(number(인자) 값 대입)">더하기</button>
</div>

new Vue({
    el: "#app",
    data:{
        count:0
    },
    methods:{
        addCount(number){
            this.count = this.count + number;
        }
    }
});

다양한 이벤트

• 디렉티브는 클릭뿐만 아니라 다른이벤트들을 위치 시킬 수 있음.마우스 이벤트 관련 종류 사이트

v-on:dblclick="함수"
v-on:mousemove="함수"
v-on:이벤트이름.이벤트 수식어="함수이름"
v-on:keyup.키값="함수이름"

• Event Modifier
  • 이벤트 호출 시 이벤트를 세밀하게 조정하는 Event Modifier 가 있음.
• 마우스뿐만 아니라 키보드로도 이벤트를 발생시킬수 있음.

v-on:keyup.키값="함수이름"
new Vue({
    el: "#app",
    methods:{
        alert(){
            alert('로그인')
        }
   } 
});

템플릿에 직접 javaScript 코드 넣기

• methods 객체를 사용하지않고 직접 javascript 코드를 넣는방법

    <div id="app">
        <p>8</p> 
        <p>8</p>
        <p>8</p>
    <button v-on:click="count++" >클릭</button> // 디렉티브 사용하여 클릭시 count 값 올라가는 버튼 만듬
    </div>
new Vue({ //새로운 Vue 객체생성
    el: "#app",  //id 값이 app인 html 코드
    data :{
       count : 0
   } 
});

계산된 속성 computed

• 템플릿 내의 표현식은 단순한 연산에만 사용이 가능함.
  • 복잡한 계산식을 계산 후 값을 return 해주는 계산된 속성 이라는 computed

<div id="app">
    <p></p>
    <button v-on:click="count++" >클릭</button>
</div>

new Vue({
    el:"#app",
    data:{
        count:0
    },
    computed:{
        isReturn : function(){
            return this.count * 3 > 10 ? "10보다 큽니다" : "10보다 작습니다";
        }
    }
});

computed 와 methods 차이점

    <div id="app">
        <p>count : 8</p>
        <p>scount : </p>
        <p>isReturn : </p>
        <p>isReturnS : </p>
    <button v-on:click="count++" >클릭</button>
    <button v-on:click="scount++">클릭</button>
    </div>
new Vue({
    el:"#app",
    data:{
        count:0,
        scount:0
    },
    computed:{
        isReturn : function(){
            console.log("Computed");
            return this.count *2
        }
    },
    methods:{
        isReturnS : function(){
            console.log("methods");
            return this.count*3
        }
    }
});

• 사용 방법, 형태는 동일함.
  • computed 는 count 값만 참조해서 실행함.
  • methods 는 count, scount 모두 참조해 재실행함.