Vue2.0的小總結

1、模板語法

1、文本

---

數據綁定最常見的語法就是雙大括號型的文本插值。例子如下：

<template>
    <div>
        <p>hello {{world}}</p>
        <p v-text="'hello ' + world"></p>
        <p>{{`hello ${world}`}}</p>
        <p v-text="`hello ${world}`"></p>
        <button @click="world='ziksang'">改變wrold值</button>
     </div>
</template>

<script>
    export default {
        data() {
            return {
                world: 'world'
            }
        }
    }
</script>

以上用了四種寫法
第一種“Mustache” 語法（雙大括號）寫法；
第二種 用v-text的指今寫法；
第三種和第四是對es6寫法的拓展寫法，稱模板字符串。

2、v-once

---

只渲染元素和組件一次，隨後的重新渲染，元素、組件及其所有的子節點將被視爲靜態內容並跳過，這可以用於優化更新性能。

<template>
    <div>
        <p v-once>hello {{ Vue }}</p>
        <button @click="Vue='gaibian'">改變vue值</button>
     </div>
</template>

<script>
    export default {
         data () {
             return {
                  Vue: "Vue"
             }
         }
    }
</script>

我們再次點擊button時，我們會發現沒有任何改變，值行了所謂的一次性賦值。

3、純html

   我們在解析的不是文件而是一個html格式的時候放在v-text中或者{{}}就會被當作一個文本解析，所以我們此時要用v-html指令進行解析。
   常用場景 ： 當我們在跟前後臺對接口數據時，後臺會返回一個html格式，一般是後臺操作界面編譯的樣式文本，此時我們就要用v-html來進行解析

<template>
    <div>
        <p v-html='html'></p>
     </div>
</template>

<script>
    export default {
         data () {
             return {
                  html : `<span style='color : red;'>顯示紅色的字你就解析成功了</span>`
             }
         }
    }
</script>

此時在界面我們就能看到顯示紅色的字你就解析成功了這幾個字樣，就是被成功解析了。

4、屬性

對於屬性的解析我們不能用{{}}“Mustache” 語法（雙大括號）寫法，我們同時還是要用指令去解析，那就是v-bind: * ,同時我們可以簡寫用v-bind語法糖 ：即可。
如果我們先不考慮組件傳遞，我們就是考慮簡單的給元素加屬性

<template>
    <div>
        <a :href='href'>href</a>
        <a :href="href + '/ID=1'"></a>
        <p :id='id'>id</p>
        <img :src="src" alt="圖片">
        <button :disabled = 'disabled'>按鈕</button>
     </div>
</template>

<script>
    export default {
         data () {
             return {
                  id : 2,
                  href : 'http://www.baidu.com',
                  src : 'https://cn.vuejs.org/images/logo.png',
                  disabled : true
             }
         }
    }
</script>

我們在屬性中支持number string boolean類型，以上顯示能在界面中看出都能正常進行和原本屬性所預期的，不用：來綁定的屬性可以直接屬性賦值，如果一定要通過data數據選項中返回的值一定要加 ：

5、使用javascript表達式

在業務場景中一些方法判斷或者簡單的過濾，那我們可以用javascript表達式，能讓代碼更簡潔，更清晰，比方說用一個三元表達式等等.。

6、style中的scoped

具有 scoped 屬性的樣式只會應用到當前元素和其子元素。可以限制css的作用範圍。

<style scoped>
    .a {
        text-align: center;
    }
</style>