Vue.js入門

引用vue.js文件

<script src="https://unpkg.com/vue/dist/vue.js"></script>

Vue.js常用指令

• v-if

v-if指令可以根據表達式的值在DOM中生成或移除元素

<div id="xiu">
    <p v-if="kang">修抗</p>
</div>
<script>
    new Vue({
        el: '#xiu',
        data: {
            kang: true
        }
    })
</script>

• v-show

v-show指令可以根據表達式的值在DOM中隱藏或顯示元素

如果隱藏的話，會在元素中添加一個內聯樣式：style="display:none"

<div id="xiu">
    <p v-show="kang">修抗</p>
</div>
<script>
    new Vue({
        el: '#xiu',
        data: {
            kang: false
        }
    })
</script>

v-show指令有更高的初始渲染消耗，需要頻繁切換時使用

v-if指令有更高的切換消耗，運行時條件不太可能改變時使用

• v-else

v-else指令為false時可以顯示表達式的值

v-else指令需要和v-if指令一起使用

<div id="xiu">
    <P v-if="ok">true</P>
    <p v-else="ok">false</p>
</div>
<script>
    new Vue({
        el: '#xiu',
        data: {
            ok: false
        }
    })
</script>

• v-text

 v-text指令與{{ }}效果一樣

<p v-text="xiu"></p>
<p>{{xiu}}</p>

• v-html

 v-html指令可以動態渲染任意HTML判斷

<div class="xiu" v-html="kang"> </div>
<script>
    new Vue({
        el:".xiu",
        data: {
            kang:"<h1>標題</h1>"
        }
    })
</script>

• v-on

• v-ref

• v-el

• v-pre

• v-cloak

• v-bind

 v-bind指令用於響應式更新HTML特性（v-bind可以預設不寫）

<div id="xiu">
    <a v-bind:href="url">百度</a><!-- v-bind可以預設不寫 -->
</div>
<script>
    new Vue({
        el: '#xiu',
        data: {
            url:"https://www.baidu.com/"
        }
    });
</script>

 v-bind顯示或隱藏多個css屬性

第一種方式：

<style>
    .fontSize {
        font-size: 20px;
    }
    .backgroundColor {
        background: red;
    }
</style>
<div id="box">
    <p v-bind:class="[size,color]">文字顏色</p>
</div>
<script>
    new Vue({
        el: '#box',
        data: {
            size: 'fontSize',
            color: 'backgroundColor'
        }
    });
</script>

第二種方式：

<style>
    .fontSize {
        font-size: 20px;
    }
    .backgroundColor {
        background: red;
    }
</style>
<div id="box">
    <p v-bind:class="{fontSize:true,backgroundColor:true}">文字顏色</p>
</div>
<script>
    new Vue({
        el: '#box'
    });
</script>

第三種方式：

<style>
    .fontSize {
        font-size: 20px;
    }
    .backgroundColor {
        background: red;
    }
</style>
<div id="box">
    <p v-bind:class="{fontSize:z,backgroundColor:c}">文字顏色</p>
</div>
<script>
    new Vue({
        el: '#box',
        data: {
            z: true,
            c: true
        }
    });
</script>

第四種方式：

<style>
    .fontSize {
        font-size: 20px;
    }
    .backgroundColor {
        background: red;
    }
</style>
<div id="box">
    <p v-bind:class="json">文字顏色</p>
</div>
<script>
    new Vue({
        el: '#box',
        data: {
            json: {
                fontSize:true,
                backgroundColor:true
            }
        }
    });
</script>

• v-model

v-model指令用於input、select、text、CheckBox、radio等表單控制項元素上創建雙向數據綁定

<div id="xiu">
    <input type="checkbox" v-model="kang">
</div>
<script>
    new Vue({
        el: '#xiu',
        data: {
            kang: true 
        }
    })
</script>

v-model指令的lazy參數（同步輸入框的值和數據，lazy可以預設不寫）

<div id="xiu">
    <input v-model="msg" lazy/>
    {{msg}}
</div>
<script>
    new Vue({
        el: '#xiu',
        data: {
            msg:'修改文本框的值查看效果'
        }
    })
</script>

v-model指令的debounce參數（設置一個最小延遲，比如在input輸入內容時隨時發送Ajax請求，設置5000毫秒發送一次）

<input v-model="msg" debounce="5000"/>

• v-for

• 數組變動檢測

push(), pop(), shift(), unshift(), splice(), sort(), reverse()

• 內置過濾器

• 1.filterBy(0.12版本)

• 2.orderBy(0.12版本)

表達式

 Vue.js提供了完全的JavaScript表達式支持

• 指令 

參數

修飾符

• 用戶輸入

• 過濾器

• 縮寫

v-bind

v-on

條件語句

迴圈語句

計算屬性

監聽屬性

樣式綁定

事件處理器

表單

主鍵

自定義指令

路由

---恢復內容結束---