Vue 學(xué)習(xí)筆記入門篇-小結(jié)

v-model的作用是？

A: 雙向綁定數(shù)據(jù)

<input type="text" v-model="msg"/>   {{msg}} <!--取數(shù)據(jù)-->

v-for demo

<div id="app">
    <ul>
        <li v-for="girl in girls">{{girl}}</li>
    </ul>
</div>
    new Vue({
        el: '#app',
        data: {
            girls: {
                girl1: '徐若瑄',
                girl2: '歐陽娜娜',
                girl3: '山田直美'
            }
        },
    })

使用v-bind，v-on寫出一個demo

v-bind

<div id="box">
    <input type="text" v-bind:value="msg">
</div>
<script>
    new Vue({
        el: "#box",
        data(){
            return {
                msg: "12222"
            }
        }
    })
</script>

v-on

<div id="box">
    <!-- v-on -->
    <button v-on:click="say">按鈕</button>
    <!--<button @click="say">按鈕</button>-->
</div>

<script>
    new Vue({
        el: "#box",
        data(){
            return {}
        },
        methods: {
            say() {
                alert(111);
            }
        }
    })
</script>

v-if,v-else,v-show,v-text,v-html,v-on,v-bind，v-once,v-cloak的作用分別是什么？

• v-if：根據(jù)表達式的值的真假條件渲染元素。在切換時元素及它的數(shù)據(jù)綁定 / 組件被銷毀并重建。如果元素是 <template> ，將提出它的內(nèi)容作為條件塊。
• v-else：跟在v-if后面使用
• v-show：根據(jù)表達式之真假值，切換元素的 display CSS 屬性。

v-if 和v-show對比的區(qū)別 就是是否刪除dom節(jié)點 默認(rèn)值為false

• v-text 解析文本
• v-html 解析html標(biāo)簽
• v-on 綁定事件 函數(shù)必須寫在methods里面
• v-bind 動態(tài)綁定 作用： 及時對頁面的數(shù)據(jù)進行更改,設(shè)置HTML屬性
• v-once 進入頁面時 只渲染一次 不在進行渲染
• v-cloak 防止閃爍