[Vue.js] Vue Directives (+extended)

<script>
    let model = {
        message : "<br>Vue 시작<br>",
        name : "playdata"
    };

    new Vue({
        el : "#sample",
        data : model
    })

</script>

🔵 v-text & {{}} : 모든 데이터를 순수 문자로 처리하는 속성

<li>{{message}}</li>
<li v-text="message"></li>
expected output : "<br>Vue 시작<br>"

🔵 v-html : html tag를 처리하는 속성

<li v-once>{{message}}</li>
expected output : <br>Vue 시작<br>

🔵 v-once : 불변 데이터 - 수정된 데이터 적용 불가

<li v-once>{{message}}</li>

👀v-model extended

v-model.lazy : 지연 바인딩 - 모든 변경 후 focus 이동시 한번에 적용

v-model.number : parseInt()와 흡사, 문자열 제외

❕ Vue Instance 내부에서 input data를 숫자열로 사용하고 싶을 시 둘 중 하나 사용은 필수

<script>
    let model = {
        modelStyle : "color : red",
        link : {
            to : "http://www.google.com",
            title : "구글"
        },
        booleanData : true,
        datas : [
            {data : "일"},
            {data : "이"},
            {data : "삼"},
            {data : "사"}
        ]
    }

    new Vue({
        el  : "#app",
        data : model
    })

</script>

v-bind:style : css style 태그 binding

<div id="app">
    <li v-bind:style="modelStyle">스타일 바인딩</li>
    <li style="color : red">스타일 바인딩</li>\
    출력 결과 동일

🔵 .연산자를 통한 Vue instance inner object value 접근

<li>
    <a :href="link.to" target="_blank" :title="link.title">구글로 이동</a></li>

👀v-if extended

<div v-if="booleanData != true">1. 식의 값이 true 인 경우 실행</div>
<div v-if="booleanData">2. 식의 값이 true 인 경우 실행</div>

👀v-for & v-if

반복문을 돌려 value가 "이"일때 출력
<li v-for="v in datas" v-if="v.data == '이'">
    {{v.data}}
</li>

<script>
    let model = {
        modelStyle : "color : red",
        link : {
            to : "http://www.google.com",
            title : "구글"
        },
        booleanData : true,
        datas : [
            {data : "일"},
            {data : "이"},
            {data : "삼"},
            {data : "사"}
        ]
    }

    new Vue({
        el  : "#app",
        data : model
    })

</script>

👀v-for extended

<div id="app">
    1. JavaScript 객체 데이터
    <ul>
        <li v-for="v, k, i in alias">
            순번 : {{i}}, property : {{k}}, name : {{v}}
        </li>
    </ul>

    <br>

    2. 배열데이터
    <ul>
        <li v-for="v, i in favorite">
            {{i}}-{{v}}
        </li>
    </ul>

    <br>
   

</div>

<script>
    
    let model = {
        favorite: ["공부", "영화보기", "빈둥거리기", "몽상하기"],
        coffees: ["아메리카노", "라떼", "돌체라떼", "모카"],
        alias: {
            name: "유재석",
            nickName: "예능인"
        }
    }

    new Vue({
        el : "#app",
        data : model
    })
    
</script>

배열데이터 :

array :

<li v-for="v, i in favorite">

v : value

i : index

object :

<li v-for="v, k, i in alias">

v : value

k : key

i : index