집 >웹 프론트엔드 >JS 튜토리얼 >Vue.js의 기본 지시문 요약(코드)

Vue.js의 기본 지시문 요약(코드)

不言원래의: 2018-09-07 17:19:121777검색

이 기사는 Vue.js의 기본 지침에 대한 요약(코드)을 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

디렉토리:

v-text v-html v-show/v-if v-for v-bind/v-on v-model v-once

1, v-text

tag 바인딩 표시해야 할 내용

new Vue({
    el: &#39;#id&#39;,
    template: `<p v-text="&#39;value:&#39;+val"></p>`,
    data: {
        val: &#39;123&#39;
    }
})// 等同于 ： template: `<p>value:{{val}}</p>`

2, v-html

바운드 값이 문자열이 아닌 HTML 값으로 표시되는 경우(innerText를 innerHtml로 변환하는 것과 유사)

new Vue({    el: &#39;#id&#39;,
    template: `<p v-html="val"></p>`,
    data: {
        val: &#39;<span>123</span>&#39;
    }
})

3, v-show 및 v -if

는 노드 표시 여부를 결정하는 부울 변수를 받습니다.
차이점:
v-show: 노드에 display:none을 추가합니다.
v-if: 노드가 존재하는지 확인합니다. false인 경우 노드가 존재하지 않으므로 DOM 노드가 다시 그려집니다.

new Vue({
    el: &#39;#id&#39;,
    template:
     `<p>
         <span v-show="active"></span>
         <span v-if="active"></span>
    </p>`,
    data: {
        active: false,
        text: 0 
    }
    //  <span v-if="active"></span>
    //  <span v-else-if="text === 0"></span>
    //  <span v-if="active"></span>})

4, v-for

배열(또는 객체)에 대한 루프

new Vue({
    el: &#39;#id&#39;,
    template: 
    `<p>
            <ul>
                // 遍历数组                
                <li v-for="(item,index) in arr" :key="item">{{item}}</li>
            </ul>
            <ul>
                // 遍历对象                
                <li v-for="(val,key,index) in obj1" :key="key">{{key}} : {{val}}</li>
            </ul>
     </p>`,
    data: {
        arr: [1, 2, 3],
        obj1: {
            a: &#39;123&#39;,
            b: &#39;456&#39;
            c: &#39;789&#39;
    }
   }
})

4. v-bind 및 v-on

v-bind: 단방향 바인딩 데이터
v-on: 바인딩 이벤트

// v-bind<p v-bind:class="val"></p>// 简写方式:<p :class="val"></p>// 其中val是data中的数据

// v-on<p v-on:click="clickButh"></p>// 简写方式:<p @click="clickButh"></p>// 其中clickButn是methods中的方法

5. model

양방향 바인딩 데이터

new Vue({
    el: &#39;#id&#39;,
    template: 
    `<p>
        <input type="text" v-model="val">
    </p>`,
    data: {        val: &#39;111&#39;
    }
})

6, v-once

는 한 번만 바인딩됩니다. 바인딩된 데이터가 변경되면 노드의 데이터는 다시 변경되지 않습니다.

new Vue({
    el: &#39;#id&#39;,
    template: 
    `<p v-once >Text: {{val}}</p>`,
    data: {
        val: &#39;111&#39;
    }
})