vue 指令

 

 

vue的核心是數據

雙大括號只能在元素內部使用:例如在data處定義name須要輸出則使用"123" 123

---

指令 --- 補充html的屬性

v-bind:xx="xxx" 簡寫:xxx=」xxx「

class 動態綁定上去使用 v-bind:class="xxx" xxx能夠是字符串形式，也能夠使用數組形式

class 動態綁定上去使用 v-bind:class="xxx" xxx能夠是字符串形式，也能夠使用數組形式

---

v-model（進來數據是字符串） 數據雙向綁定 多用於表單型元素(輸入性組件)

示例

 +   = 0

---

v-text (相似雙大括號輸出字符串 元素標籤會被直接當字符串輸出【不經常使用】) 
v-html （能夠將須要輸出字符串中的html片斷不進行處理直接輸出，即按html輸出）

示例

<p>這是一段代碼片斷</p>

這是一段代碼片斷

---

vue事件指令 --- v-on:xx="xxx" 簡寫 @xxx="xxxx"

使用v-on綁定事件 監聽DOM事件 用來觸發vue實例methods中定義的方法

 0

---

vue條件渲染指令 點我看區別

v-show ---- 隱藏的時候html還在dom中只是使用了css display:none;隱藏

示例

我還在dom中

---

v-if ---- 隱藏的時候html從dom中完全消失

示例

我隱藏不在dom中

---

vue循環渲染指令

v-for ---- 可循環數組/對象/數字/字符串

v-for中最好使用：key 有利於性能提高，

v-for="item,index in array"

v-for="val,key in json"

v-for="char,index in str"

v-for="i in num"

---

vue 預編譯

v-pre ---- 原樣輸出vue不作任何處理

---

v-cloak 經常使用於vue編譯完成以前的隱藏

 

<script type="text/javascript">
let vm = new Vue({
            el: "#app",
            data: {
                name: 123,
                count1: 0,
                count2: 0,
                elements: '<p>這是一段代碼片斷</p>',
                click: 0,
                shows: true
            },
            created() {},
            methods: {
                count() {
                    return Number(this.count1) + Number(this.count2)
                    // 使用箭頭函數this講指向new 出來的vue實例
                    console.log(this)
                },
                fn(n) {
                    return this.click = this.click + n;
                },
                show() {
                    this.shows = !this.shows;
                }
            }
        })
</script>