VUE的系統指令

Bound_w發表於2018-11-27
Vue

1. -text原樣渲染,渲染文字

2.-html   HTML渲染頁面

舉例:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

<div id="content">
    {{ msg }}<!--一般渲染的時候,原渲染-->
    <div v-text = 'msg'></div><!--v-text還是原樣渲染-->
    <div v-html = 'msg'></div><!--v-html  HTML渲染-->

</div>
<script src="vue.js"></script>
<script>

    new  Vue({
        el:"#content",
        data () {
            return{
                msg:"<h2>alex</h2>"
            }
        }
    })

</script>

</body>
</html>



渲染結果:
<h2>alex</h2>
<h2>alex</h2>
alex
View Code

3.v-if    和   v-show

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color:red;
        }
        .box2 {
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="content">
        {{ add(2,2) }}
        <button v-on:click='handlerClick'>隱藏</button><!--控制點選事件v-on:click-->
        <div class="box" v-show="is_show"></div>
        <div class="box2" v-if="is_show"></div>
        <div v-if="Math.random() > 0.5">
            有了
        </div>
        <div v-else>
            沒了
        </div>
    </div>


<script src="vue.js"></script>
<script>
    new Vue({
        el:"#content",
        data () {
            return{
                msg:"<h2>alex</h2>",
                num:1,
                is_show:true
            }
        },
        methods:{
            add(x,y){
                console.log(this.num);
                return x+y
            },
            handlerClick(){
                console.log(this);
                this.is_show = !this.is_show
        },

      }
    })


</script>

</body>
</html>
v-if 和 v-shoe

 

v-if 和 v-show的區別:

v-if 是“真正”的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子元件適當地被銷燬和重建。

v-if 也是惰性的：如果在初始渲染時條件為假，則什麼也不做——直到條件第一次變為真時，才會開始渲染條件塊。

相比之下，v-show 就簡單得多——不管初始條件是什麼，元素總是會被渲染，並且只是簡單地基於 CSS 進行切換。

一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在執行時條件很少改變，則使用 v-if 較好。

4.v-bind

v-bind

  • 縮寫：:

  • 預期：any (with argument) | Object (without argument)

  • 引數：attrOrProp (optional)

  • 修飾符：

    • .prop - 被用於繫結 DOM 屬性 (property)。
    • .camel - (2.1.0+) 將 kebab-case 特性名轉換為 camelCase. (從 2.1.0 開始支援)
    • .sync (2.3.0+) 語法糖，會擴充套件成一個更新父元件繫結值的 v-on 偵聽器。

  • 用法：

    動態地繫結一個或多個特性，或一個元件 prop 到表示式。

    在繫結 class 或 style 特性時，支援其它型別的值，如陣列或物件。可以通過下面的教程連結檢視詳情。

    在繫結 prop 時，prop 必須在子元件中宣告。可以用修飾符指定不同的繫結型別。

    沒有引數時，可以繫結到一個包含鍵值對的物件。注意此時 class 和 style 繫結不支援陣列和物件。

 

5.v-on

  • 縮寫：@

  • 預期：Function | Inline Statement | Object

  • 引數：event

  • 修飾符：

    • .stop - 呼叫 event.stopPropagation()。
    • .prevent - 呼叫 event.preventDefault()。
    • .capture - 新增事件偵聽器時使用 capture 模式。
    • .self - 只當事件是從偵聽器繫結的元素本身觸發時才觸發回撥。
    • .{keyCode | keyAlias} - 只當事件是從特定鍵觸發時才觸發回撥。
    • .native - 監聽元件根元素的原生事件。
    • .once - 只觸發一次回撥。
    • .left - (2.2.0) 只當點選滑鼠左鍵時觸發。
    • .right - (2.2.0) 只當點選滑鼠右鍵時觸發。
    • .middle - (2.2.0) 只當點選滑鼠中鍵時觸發。
    • .passive - (2.3.0) 以 { passive: true } 模式新增偵聽器

  • 用法：

    繫結事件監聽器。事件型別由引數指定。表示式可以是一個方法的名字或一個內聯語句，如果沒有修飾符也可以省略。

    用在普通元素上時，只能監聽原生 DOM 事件。用在自定義元素元件上時，也可以監聽子元件觸發的自定義事件。

    在監聽原生 DOM 事件時，方法以事件為唯一的引數。如果使用內聯語句，語句可以訪問一個 $event 屬性：v-on:click="handle('ok', $event)"。

    從 2.4.0 開始，v-on 同樣支援不帶引數繫結一個事件/監聽器鍵值對的物件。注意當使用物件語法時，是不支援任何修飾器的

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color:red;
        }
        .active{
            background-color: green;
        }

    </style>
</head>
<body>
   <div id="app">
       <button @mouseenter = "handlerChange" @mouseleave = "handlerLeave">切換顏色</button>
       <img :src="imgSrc" :alt="msg">
       <div class="box" :class ='{active:isActive}'></div>

   </div>


<script src="vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                imgSrc:'1.jpg',
                isActive:true,
                msg:'美女',
            }
        },
        methods:{
            handlerChange(){
                // this.isActive =!this.isActive;
                this.isActive=false;
            },
            handlerLeave(){
                this.isActive=true;
            }
        }
    })



</script>

</body>
</html>
v-bind和v-on

6.v-for:   v-for的優先順序是最高的,  diff演算法

用法:基於後設資料進行,渲染模板塊或者元素,必須使用特定語法 alias in expression ，為當前遍歷的元素提供別名：

<div v-for="item in items">
  {{ item.text }}
</div>

 另外也可以為陣列索引指定別名 (或者用於物件的鍵)：

<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, key, index) in object"></div>

 

 v-for 預設行為試著不改變整體，而是替換元素。迫使其重新排序的元素，你需要提供一個 key 的特殊屬性：

<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

 

相關文章