作者 : 混元霹靂手 ziksang
一開始在vue1.0的時候我就開始關注掘金的vue專欄，但是一直給我一種感受，真正能靜下心來給讀者寫好每一個細講，每一個講解點，我覺得是最重要的，雖然我沒有什麼能力給大家帶來像iview,mint ui等一系列大牛的基礎vue帶來的ui框架，但是我相信通過我自己一點一點的積累，自己如何去入門一個mvvm框架的時候，慢慢用上所有最常用的api這都是一個積累的過種，這也是我在掘金的第一篇，我只想寫一個大家所有所期望的東西
列一個清單吧，其實入門就是基礎，如何入門我下面總結一下我展示結的流程，用心去給大家寫一個就像我標題寫的掘金史上最詳細VUE2.0最詳細全套講解（基礎篇），聽了小編的建議分多次寫，把每一細講透徹講清楚講明白，如果反響好的話，我會更加動力快速打造出更多基礎篇``元件篇``進階篇``外掛篇``如何為自己公司打造元件，也希望大牛能給我一點錯誤的指點，小白們能和我一起共同學習進步，我同時也希望大家能看了之後能給我點一個大大的
贊
- 基礎api的講解，也是根據官方文件講解，比方說把一些mutation method ，變異方法講的更白話文一點，讓大家更容易的明白
- 結合工作同時大家會接觸的業務場景給出不同的demo,這些demo也是我自己精心在實戰中總結出來的
- es6在vue中寫法的擴充
- 通過一步一步的學習，此文是淺入深出，給出的demo我們可以複製到自己的電腦上自己跑一遍，跟著自己的想法擴充出別的demo，豐富自己的技術棧
Vue是什麼，Vue好在那裡，多牛B，也就不說了，既然你進來看了，說明他就是牛B的，整個vue生態圈證明了一切，掘金的發表vue的文章也證明了一切
我所講的一切都建立在vue-cli 2.2 的腳手架工具裡實現
這樣東西我就不詳細的講解了我們主要把核心放在基礎部分
但是我要對所寫的目錄結構說一下
其它我們先不用管，基礎部分我們只要對app.vue檔案進行改動就可以，然後複製我的demo程式碼就可以看到所有講解的demo效果
模板語法
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 列表渲染）
渣渣前端開發工程師，喜歡鑽研，熱愛分享和講解教學， 微信 zzx1994428 QQ494755899
支援我繼續創作和感到有收穫的話，請向我打賞點吧
如果轉載請標註出自@混元霹靂手ziksang