Vue：入門2（模板語法）

案例1 v-once 指令

<!--
v-once 指令,當數據改變的時候msg的內容不會改變
最簡單的是就是在瀏覽器的console欄修改vm.msg='1111'。會發現頁面值不會改變.
但是你通過console.log(vm.msg)值已經變成1111
-->
<span id = 'id1' v-once>這個將不會改變: {{msg}}</span>
<script>
    var vm = new Vue({
        el : '#id1',
        data: { msg: 'set msg val'}
    });
</script>

案例2 v-html 會把內容進行html解析

<!--
v-html 會把內容進行html解析
頁面是顯示成下面這個，其中第二行的'set msg val' 是紅色的
Using mustaches: <span style="color: red;">set msg val</span>
Using v-html directive: set msg val
-->
<div id="id2">
    <p >Using mustaches: {{rawHtml}}</p>
    <p>Using v-html directive: <span v-html="rawHtml"></span></p>
</div>
<script>
    var vm2 = new Vue({
        el : '#id2',
        data: { rawHtml: '<span style="color: red;">set msg val</span>'}
    });
</script>

案例3 v-bind:變量名 可以將值賦到html特性裏

<!--
v-bind:變量名 可以將值賦到html特性裏
在頁面上會被渲染成
<div id="box" index="100">100</div>
-->
<div id="box" v-html="msg" v-bind:index="msg"></div>
<script>
    var vm = new Vue({
        el:"#box",
        data:{
            msg:100
        }
    })
</script>

案例4 bool值

<!--
對於bool值，只有當isButtonDisabled爲：null,undefined,false纔會生效，其他值都是真
比如我傳isButtonDisabled:111，頁面顯示的解析成是
<button id="box2" disabled="disabled">Button</button>
-->
<button id="box2" v-bind:disabled="isButtonDisabled">Button</button>
<hr>
<script>
    var vm = new Vue({
        el:"#box2",
        data:{
            isButtonDisabled:111
        }
    })
</script>

案例5 Vue.js支持JavaScript的表達式

<!--
注意：不支持表達式eg：{{ var a = 1 }}。
     不支持流控制eg：{{ if (ok) { return message } }}
-->
<!--支持的數學運算-->
<span id="id3">number+1={{number+1}}</span>
<script>
    var vm = new Vue({
        el: '#id3',
        data:{
            number: 2
        }
    });
</script>

案例6 三元表達式

<!--三元表達式-->
<span id="id4">{{ok? 'YES':'no'}}</span>
<script>
    var vm = new Vue({
        el: '#id4',
        data:{
            ok: true
        }
    });
</script>

案例7 分割倒置

<!--分割倒置-->
<span id="id5">{{ message.split('').reverse().join('') }}</span>
<script>
    var vm = new Vue({
        el: '#id5',
        data:{
            message: 'a b c d e f g h'
        }
    });

</script>

案例8 js表達式

<!--
頁面會解析成<div id="list-1">1</div>
-->
<div id="id6" v-bind:id="'list-' + id">{{id}}</div>
<script>
    var vm = new Vue({
        el: '#id6',
        data:{
            id: 1
        }
    });
</script>

案例9 v-

<!-- 指令：帶有v-前綴的特殊特性。指令特性的值預期是單個JavaScript表達式（除了v-for）
v-if，如果seen=true顯示當前元素，如果爲false則刪除元素，注意不是隱藏
同時如果在瀏覽器的console上設置vm.seen=true。它是能重新出現的
-->
<p id='id7' v-if="seen">現在你看到我了</p>
<script>
    var vm = new Vue({
        el: '#id7',
        data:{
            seen: true
        }
    });
</script>

案例10 v-bind

<!-- v-bind 指令可以用於響應式地更新 HTML 特性 -->
<a id='id8' v-bind:href="url"> vue.js </a>
<script>
    var vm8 = new Vue({
        el: '#id8',
        data:{
            url: 'http://cn.vuejs.org'
        }
    });
</script>
<hr>

案例11 監聽DOM事件

<!-- v-on指令用於監聽DOM事件，會在之後的文章更多的討論。
下面的效果是頁面點擊doSomething彈出內容'show now' -->
<a id="id9" v-on:click="doSomething" >doSomething</a>
<script>
    var vm9 = new Vue({
        el: '#id9',
        methods : {
            doSomething : function(){
                alert('show now');
            }
        }
    });
</script>
<hr>

案例12 動態參數（2.6.0新增）

<!--可以用方括號括起來的 JavaScript 表達式作爲一個指令的參數
瀏覽器會把特性名全部強制轉爲小寫。可以看到下面的例子雖然我寫的是[attributeName]但是在實例裏我寫的是attributename。所以儘量喲過小寫的
 結果：<a id="id10" href="https://cn.vuejs.org/v2/guide/syntax.html"> attributeName</a>
 動態參數的值要是字符串
 動態參數表達式有一些語法約束，因爲某些字符，例如空格和引號，放在 HTML 特性名裏是無效的。同樣，在 DOM 中使用模板時你需要回避大寫鍵名
 -->
<a id="id10" v-bind:[attributeName]="url" v-on:[event]="doSomething"> vuejs</a>
<script>
    var vm10 = new Vue({
        el: '#id10',
        data : {
            attributename: 'href',
            url: 'https://cn.vuejs.org/v2/guide/syntax.html',
            event: 'click'
        },
        methods : {
            doSomething : function(){
                alert('show now');
            }
        }

    });
</script>

案例13 修飾符 (modifier)

<!--修飾符 (modifier) 是以半角句號' . '指明的特殊後綴，用於指出一個指令應該以特殊方式綁定。
對於下面的例子 .prevent就是在用戶點擊的時候調用.prevent後面的a方法。
下面的例子每次點擊都會在控制檯打印執行
-->
<form id="id11" v-on:click.prevent="a">console</form>
<script>
    var vm11 = new Vue({
        el: '#id11',
        methods:{
            a:function(){
                console.log('執行');
            }
        }
    });
</script>

案例14

<!-- v-bind完整語法 -->
<a v-bind:href="url">...</a>
<!-- v-bind縮寫 -->
<a :href="url">...</a>

<!-- v-on完整語法 -->
<a v-on:click="doSomething">...</a>
<!-- v-on縮寫 -->
<a @click="doSomething">...</a>

歡迎關注，會同步更新，隨時隨地一起學習
微信公衆號：教練我想學PHP
天天快報、騰訊新聞和QQ瀏覽器：教練我想學PHP