史上最詳細VUE2.0全套demo講解 基礎篇
一開始在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過濾
以上過濾器原理也跟大家說了，我們進一步深化一下，如果兩都結合使用
應用場景
當后臺傳給很多鏈接的地址的時候，每個鏈接要帶上不同的參數，針對于這種場景我給大家實戰一下
<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 列表渲染 )
來自：https://zhuanlan.zhihu.com/p/26119383