模板語法https://juejin.im/user/580327ee0e3dd900570cf3ab

1.文字

資料繫結最常見的形式就是使用 “Mustache” 語法（雙大括號）的文字插值：
Mustache 標籤將會被替代為對應資料物件上 world 屬性的值 ,而且一直會監聽world的值，一但改變會跟著改變

應用場景 ： 可以說處處都用的到

<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

通過指令我們可以對文字值進行一次性賦值操作，只進行第一次的資料渲染，如果再次改變值，文字值也不會改變

應用場景 ： 一般是用在元件樹中傳遞時，導致元件資料一層一層傳遞時，變改了不需要改變的場景，用v-once可以避免在元件數中只需用一次性賦值操作

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

<script>

export default {
     data () {
         return {
              world : "world"
         }
     }
}

</script>
 

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

3.純html

我們在解析的不是檔案而是一個html格式的時候放在v-text中或者{{}}就會被當作一個文字解析，所以我們此時要用v-html指令進行解析，在1.0中支援{{{}}}這種格式，為了防止xss功擊，去除了這個功能

常用場景 ： 當我們在跟前後臺對介面資料時，後臺會返回一個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.屬性

在vue中屬性這個東西很關健，在元件與元件中資料傳遞時會很有用，但是對於屬性的解析我們不能用{{}}“Mustache” 語法（雙大括號）寫法，我們同時還是要用指令去解析，那就是v-bind:*,同時我們可以簡寫用v-bind語法糖 ：即可
如果我們先不考慮元件傳遞，我們就是考慮簡單的給元素加屬性

應用場景 在元件中傳遞時需要用,其它元素上的繫結屬性都需要這個功能

<template>
    <div>
        <a :href='href'>href</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表示式，能讓程式碼更簡潔，更清晰，比方說用一個三元表示式。。等等

<template>
     <div>
        <div id="method1">
            <p>{{ count < 0 ? '+' : '-'}} {{count + 1}}</p>
            <button @click='count ++'>增加</button>
            <button @click='count --'>減少</button>
        </div>
        <div id="method2">
            <input type="text" v-model='message'>
            <h1>{{ message.split('').reverse().join('') }}</h1>
        </div>
     </div>
</template>

<script>

export default {
     data () {
         return {
              count : 0,
              message : ""
         }
     }
}

</script>

在id:method1 裡，我們做了一個對count進行+1，對count進行三元表示式來進行判斷做出不同的顯示
在id:method2 裡，我進行了v-model指令和h1裡message進行了雙向繫結，隨著message的改變h1裡的值隨著表示式的的改變而改變
注意示項，在官方提出來的這幾種是不可行的

這是語句，不是表示式 
{{ var a = 1 }}
流控制也不會生效，請使用三元表示式 
{{ if (ok) { return message } }}

6.修飾賦

修飾符（Modifiers）是以半形句號 . 指明的特殊字尾，用於指出一個指令應該以特殊方式繫結。

應用場景 ：
對於一些特殊的指令操作時需要，比方說對元件加事件，組織元素的預設行為，組織冒泡。。等等一系列，官方文件有詳細解說每一個修飾賦的具體用途

再次提示主邏輯程式碼都是寫在.App.vue中,所有其它的元件程式碼都是寫在componentes裡

首我們先對components資料夾中建立一個myButton元件

<template>
    <button>按鈕</button>
</template>

<script>
export default {

}
</script>

再在app.vue中寫入

<template>
     <div>
         <my-button @click.native="buttonClick"></my-button>
     </div>
</template>

<script>
import myButton from './components/myButton.vue'
export default {
     components : {
         myButton
     },
     methods : {
         buttonClick () {
             alert("原生點選")
         }
     }
}

</script>

我們可以嘗試一下如果我們去掉.native的話你會發現元件根本出alert(原生點選)的彈框，這是為什麼呢，正常的情況在一個單個元件內部自己使用v-on的事件，ok都不會有問題，如果在一個元件上定義一個指令事件，必須要用.native，這裡大家一定要注意

####推薦很實用的demo
我們用jquery的時候經常會遇到這種場景，當我們一個layer層彈出來的時候，內部是一個超過整個螢幕長度的滾動，當我們滑動layer的時候會導致裡面的滾動也會一起滾動起來，這個是一件很操蛋的事，在網上也有著很多相關解決的辦法，vue可以通過修飾符來解決這個問題
index.html檔案中加一個視口度適配，更好的來檢視效果

 <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

app.vue檔案中

<template>
     <div>
         <ul>
             <li v-for="item in list">
                 <h1>{{item}}</h1>
             </li>
         </ul>
         <div @touchmove.prevent class="layer"></div>
     </div>
</template>

<script>
import myButton from './components/myButton.vue'
export default {
     data () {
         return {
             list : [1,2,3,4,5,6,7,8,9,10]
         }
     }
}

</script>

<style>
body,html {width:100%;height:100%}
h1{margin-top:10rem;}
.layer{width:100%;height:100%;position:fixed;top:0;left:0;z-index:99;background:rgba(0,0,0,.5)}
</style>

此時我們開啟chrome除錯工具的時候我們會發當我們滑動layer層的，裡面的滾動不會再滾動了，我們再試著把.prevent給去掉，會發現滾動再次出現，這個原理就是event.preventDefault來阻止預設事件事執行的。
實現原理，我們對layer層把它的touchmove滑動事件給幹掉了，就不會觸發滾動區域的滑動事件，個人認為這個場景每個專案都會用的到

再做一個表單的簡單示例

<template>
     <div>
        <input type="text" v-model.trim="content">
        <input type="text" v-model = 'content'>
     </div>
</template>

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

這個我們能發現當加入.trim的修飾符的時候給到第二個input的時候都是去掉前後空白符的，這個功能也就是去掉前後空白符，這也是很常用的場景，一些表單當用戶輸入的時候，有些使用者會打出一個前後空白符，有一次我保使用者資料給資料庫，操作的時候還程式碼還好好的，突然一個空白字元引發的一場血案，要注意細節點

6. 過濾器

Vue.js 允許你自定義過濾器，可被用作一些常見的文字格式化。過濾器可以用在兩個地方：mustache 插值和 v-bind 表示式。過濾器應該被新增在 JavaScript 表示式的尾部，由“管道”符指示：

其實本質上過濾器也就是一個或多個表示式，但是有極條件控制的表示式或者長業務邏輯的表示式寫在mustache不夠清楚，明瞭

在v-bind中也就是2.10的時候才支援這個功能，這個大家要對這個版本有一定的瞭解，正確的使用

應用場景 ：
我說說我遇到過的應用場景，再把我應用的場景再加深一點邏輯
1.首先我們從後臺拿到10個使用者的手機，但是要把前7位掩碼，做成*，然判斷如果手機尾數是偶數的話，我們就顯示已中獎，不是的話顯示謝謝參與

<template>
     <div>
         <p v-for='tel in telephone'>{{tel | newtel}}</p>
     </div>
</template>

<script>
export default {
     data () {
         return {
             telephone : [
                 10000000000,
                 10000000001,
                 10000000002,
                 10000000003,
                 10000000004,
                 10000000005,
                 10000000006,
                 10000000007,
                 10000000008,
                 10000000009,
                 10000000000,
             ]
         }
     },
     filters : {
         newtel (value) {
             if(!value) return ''
             value = value.toString().substr(7,4)
             value = '*'.repeat(7)+value
             let endMember = value.substr(-1,1)
             if(endMember % 2){
                 value = value+'中獎'
             }else{
                 value = value+'謝謝參與'
             }
             return value
         }
     }
}
</script>

程式碼會析，在filters選項裡有個newtel的函式，value則是函式中固定的一個引數，程式碼過濾前的值，但最後在管道符裡我們不用把這個固定的引數寫在呼叫裡面，如果沒有，則返回"",我們再取後四位，在前7位拼接7個*,這裡我用到了es6新特性，repeat這個方法，原本我想用padStart可惜是es7的新性，babel不支援，再擷取尾數，如果尾數%2是偶數則再後面加一箇中獎，否則謝謝參與，最後把這個value的最終值返回出去

7.結合過濾器引數與v-bind過濾

以上過濾器原理也跟大家說了，我們進一步深化一下，如果兩都結合使用

應用場景

當後臺傳給很多連結的地址的時候，每個連結要帶上不同的引數，比如https//www.baidu.com?user=ziksang&age=20,針對於這種場景我給大家實戰一下

<template>
     <div>
         <a v-for='(url,index) in urlList' :href='url.url | getquery(url.name,url.age)'>{{url.url}}</a>
     </div>
</template>

<script>
export default {
     data () {
         return {
             urlList : [
                 {url : 'http://www.baidu.com',name :'ziksang',age : 20},
                 {url : 'http://www.google.com',name :'ziksang2',age : 30}
             ]
         }
     },
     filters : {
         getquery (value,name,age) {
             if(!value) return ""
             return `${value}?name=${name}&age=${age}`
         }
     }
}
</script>

在v-bind管道符中的getquery(第一個參,第二個參)
第一個參就是傳給fitler裡getquery裡的第二個引數，就是name
第二個參就是傳給fitler裡getquery裡的第三個引數，就是age
因為第一個引數是預設的
這裡我大量用了v-for來進行迴圈,如果有看不懂的話，等講到第基礎二或者三的時候再回頭看看這裡的v-for用法你就一目瞭然了

8.縮寫

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

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

這沒有什麼可以多講的，就是一個語法糖，方便大家書寫

寫到這裡，只是簡單的講一下模板語法，但是我個人認為，還展拓了很多其它知識點，剛好如果那些知識點你不會的，可以去查一查做一個預熱，在接下來幾天中，我們把上出第二篇基礎（v-for 列表渲染）

v-for 列表渲染

1. v-for array 陣列渲染

我們用v-for指令根據一組陣列的選項列表進行渲染。 v-for指令需要以item in items形式的特殊語法， items 是源資料陣列並且 item 是陣列元素迭代的別名。

應用場景：
通常情況下，進入一個活動要展示出所有參加活動的人員，裡面有姓名，年齡，報名時間等等，就先舉這三個列子，那後臺肯定會返回一個arraylist陣列集合，集合中每個元素肯定是一個物件，那我們如何去把這個陣列集合高效率，合理的渲染到頁面上，,再拿到使用者id去到下一個頁面查詢memberDetail祥情，用過jq的同學肯定知識很煩繁，一般肯定是用arttemplate這種模板引擎

<template>
     <div>
         <ul>
             <li v-for="(item,index) in memberList" @click="memberDetail(index)">
                 <span>{{item.custName}}</span>
                 <span>{{item.age}}</span>
                 <span>{{item.joinTime}}</span>
             </li>
         </ul>
     </div>
</template>

<script>
export default {
     created () {
         //就當看作是ajax在初始化進入的時候從後臺獲取的使用者列表資料
         this.memberList = [
            {custName : "ziksang1",age:20,joinTime : "2014-01-02",custId:1},
            {custName : "ziksang2",age:21,joinTime : "2014-01-03",custId:2},
            {custName : "ziksang3",age:22,joinTime : "2014-01-04",custId:3},
            {custName : "ziksang4",age:23,joinTime : "2014-01-05",custId:4},
         ]
     },
     data () {
         return {
             memberList : []
         }
     },
     methods : {
         memberDetail (index) {
             sessionStorage.custId = this.memberList[index].custId
         }
     }
}
</script>

我覺得這個demo太常用了，逐行分析
1.如果在template模板裡面用到了資料必須先在data選項裡先宣告賦值，我們先給memberList給予一個[]陣列
2.在created函式裡我們就當作模擬從後臺拿到的資料，然後賦值給data選項裡的memberList，此時memberList就有後臺拿到的值了
3.(item,index) in memberList是vue自己封裝的一個語法結構
一.item代表集合中的每一個元素，此時每一個元素就是一個物件
二.index代表集合每一個元素的下標
三.memberList是所要迴圈的陣列
4.為什麼我們要把 (item,index) in memberList放在每一個迴圈dom上，那就是li標籤 只有在li迴圈體節點上和迴圈體所有子節點上拿到item這個物件裡面的所有屬性
5.@click="memberDetail(index)" 這裡用了一個點選方法，我們把index作為了方法的引數，目的是什麼，這個index代表每一個迴圈出來dom的下標，通過點選，我們可以拿到對應的使用者id可以說拿到每一個使用者的任意值，然後在methods我們進行操作，我們可以能過sessonStorage來存放，用來過度到下一個使用者祥情頁，來獲取所有使用者詳情，我們可以開啟谷歌瀏覽器，當我們用滑鼠點選的時候，可以發現sessionStorage裡的變化

整個流程是無論是開發任意中型專案必備的

2.template v-for

如同 v-if 模板，你也可以用帶有 v-for 的 <template> 標籤來渲染多個元素塊，迴圈塊區域

應用場景 ：
當我們迴圈渲染時，我們如果有多個欠套不合理的關係下，一般情況下肯定是在最外層套一個div元素，這個我認為顯的不是很清楚，我們用template來代替渲染，不但能省去很dom節點，而且也能解決欠套不合理的情況

<template>
     <div>
         <template v-for="item in list">
              <p>{{item.content}}</p>
              <img :src="item.img" alt="">
              <p class="divider"></p>
         </template>
     </div>
</template>

<script>
export default {
     data () {
         return {
             list : [
                 {content : 'ziksang',img :'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1301074775,1382810875&fm=80&w=179&h=119&img.JPEG'},
                 {content : 'ziksang2',img :'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1312092207,1376369244&fm=80&w=179&h=119&img.JPEG'}
             ]
         }
     }
}
</script>
<style>
body,html{
    width:100%;
    height:100%
}
.divider{
    width:100%;
    height:1px;
    background:black;
}
</style>

如果我們不想多創節點，又不想讓p元素做為根節點，我們就可以用template來做渲染，在chorme開發者工具上，也能證實，最外層的的template會自動消失，不會創造出多餘的節點。

3. v-for Object 物件渲染

你也可以用 v-for 通過一個物件的屬性來迭代。

應用場景 ：
就像第一個列子如果到了詳情頁，我們要展示一個使用者詳情，如果後端都給你排好序了，如何正確的方便展示出來，用最快，最便捷的方法那就是v-for 迭代物件，一般情況下展示一個使用者詳情，後臺肯定返回一個使用者物件給你

<template>
     <table>
         <template>
            <tr>
                <td v-for="(value,key,index) in memberDetail">{{key}}</td>
            </tr>
            <tr>
                <td v-for="(value,key,index) in memberDetail">{{value}}</td>
            </tr>
         </template>
     </table>
</template>

<script>
export default {
     created () {
        //比方說我們這裡拿到前面的custId傳給後臺拿到使用者資料
        this.memberDetail = {
                 name : 'ziksang',
                 age : 20,
                 address : "xxx省xxxx市",
                 tel : "15921898427"
             }
     },
     data () {
         return {
             memberDetail : {} 
         }
     }
}
</script>
<style>
body,html{
    width:100%;
    height:100%
}
.divider{
    width:100%;
    height:1px;
    background:black;
}
</style>

1.(value,key) in memberDetail
value代表屬性值
key 代表屬性,
index代表每個dom節點的下標索引
兩者都是一一對應的，通過第一個例子講解，我相信這個例子很簡單了

4. v-for 整數迭代

這個看看demo就可以了，我幾乎沒用過

<div>
  <span v-for="n in 10">{{ n }}</span>
</div>

4. v-for 和 元件

在自定義元件裡，你可以像任何普通元素一樣用 v-for 。

應用場景 ：
比方拿掘金來說，每個使用者展現的文章列表中，每個使用者的文章可以做成一個統一元件，通過父元件來進行資料的傳遞，迴圈出所有人的文章，就形成了文章列表，而且可以在熱門，最新，或者專欄裡面複用，只需要通過資料傳遞，是一種相當好的模式

在components資料夾裡創一個myArticle檔案

<template>
    <div>
        <p>{{artList.name}}</p>
        <p>{{artList.startTime}}</p>
        <p>{{artList.content}}</p>
        <p>{{artList.good}}</p>
    </div>
</template>

<script>
export default {
    props : ['artList']
}
</script>

用props選項來接收父元件傳入的資料，渲染元件

App.vue檔案

<template>
     <div>
     <my-article v-for='item in artList' :art-list='item'></my-article>
     </div>
</template>

<script>
import myArticle from "./components/myArticle.vue"
export default {
    components : {
        myArticle
    },
    created () {
        //比方說我們是從後臺拿到的文章集合
        this.artList = [
            {name : 'ziksang1' , startTime : '1小時前' , content:'aaaaaaaaa',good : 1},
            {name : 'ziksang2' , startTime : '2小時前' , content:'bbbbbbbbb',good : 2},
            {name : 'ziksang3' , startTime : '3小時前' , content:'ccccccccc',good : 3},
            {name : 'ziksang4' , startTime : '4小時前' , content:'ddddddddd',good : 4}
        ]
     },
     data () {
         return {
             artList : [] 
         }
     }
}
</script>

這個需要逐行分析
1.首先們引入元件
2.v-for來迴圈元件
3.把每個文章的資料用 :art-list='item'傳給myArticle元件
如我們進行下拉載入和上拉重新整理的話，只要把取到的資料再次從新賦給子元件就可以了，而且我們還可以在各個頁面來重複複用這個元件，減少開發工作量

4. 陣列更新檢測

1.陣列變異

說的通俗一點，實是就是我們用Array.prototype裡提供的原型方法裡我們能直接改掉data選項裡的資料，觸發了檢視更新，那就是叫陣列變異方法
官方給大家列了只有那些方法能觸發檢視更新
1.push()
2.pop()
3.shift()
4.unshift()
5.splice()
6.sort()
7.reverse()

應用場景，我們比方說我們是絕境的後臺控制者，我們無聊看那個文章不爽，我們對文章進行操作，這個只是我瞎說玩玩的場景，就是用情景去模擬用法的場景

App.vue檔案

<template>
     <div>
     <my-article v-for='item in artList' :art-list='item'></my-article>
     <button @click='push'>新增文章</button>
     <button @click='pop'>尾部去除一篇文章</button>
     <button @click='unshift'>在頭部加入一條資料</button>
     <button @click='shift'>在頭部去除一條資料</button>
     <button @click='reverse'>把所有資料進行反轉</button>
     <button @click='clear'>清除所有資料</button>
     </div>
</template>

<script>
import myArticle from "./components/myArticle.vue"
export default {
    components : {
        myArticle
    },
    created () {
        //比方說我們這裡拿到前面的custId傳給後臺拿到使用者資料
        this.artList = [
            {name : 'ziksang1' , startTime : '1小時前' , content:'aaaaaaaaa',good : 1},
            {name : 'ziksang2' , startTime : '2小時前' , content:'bbbbbbbbb',good : 2},
            {name : 'ziksang3' , startTime : '3小時前' , content:'ccccccccc',good : 3},
            {name : 'ziksang4' , startTime : '4小時前' , content:'ddddddddd',good : 4}
        ]
     },
     data () {
         return {
             artList : [] 
         }
     },
     methods : {
          push () {
            this.artList.push({
                name : 'ziksang5' ,
                 startTime : '5小時前' ,
                  content:'eeeeeeeeee',
                  good : 5})
        },
        pop () {
            this.artList.pop()
        },
        shift () {
            this.artList.shift()
        },
        unshift () {
            this.artList.unshift({
                name : 'ziksang3',
                age : 40
            })
        },
        reverse () {
            this.artList.reverse()
        },
        clear () {
            this.artList = []
        }
     }
}
</script>

我們發現我們點這些按鈕的時候，myArticle的檢視同時跟著改變，這就是我們需要的效果就是變異方法根本的意思，能通過Array.prototype裡的原形方法改變data選項artList陣列觸發檢視改變的方法就是變異方法

2.陣列非變異

相關推薦