史上最詳細VUE2.0全套demo講解 基礎1（模板語法）

時間  2019-11-05
標籤 史上 詳細 vue2.0 vue 全套 demo 講解 基礎 模板 語法 简体版
原文   原文鏈接

做者 : 混元霹靂手 ziksangjavascript

一開始在vue1.0的時候我就開始關注掘金的vue專欄，可是一直給我一種感覺，真正能靜下心來給讀者寫好每個細講，每個講解點，我以爲是最重要的，雖然我沒有什麼能力給你們帶來像iview,mint ui等一系列大牛的基礎vue帶來的ui框架，可是我相信經過我本身一點一點的積累，本身如何去入門一個mvvm框架的時候，慢慢用上全部最經常使用的api這都是一個積累的過種，這也是我在掘金的第一篇，我只想寫一個你們全部所指望的東西html

列一個清單吧，其實入門就是基礎，如何入門我下面總結一下我展現結的流程，用心去給你們寫一個就像我標題寫的掘金史上最詳細VUE2.0最詳細全套講解（基礎篇），聽了小編的建議分屢次寫，把每一細講透徹講清楚講明白，若是反響好的話，我會更加動力快速打造出更多基礎篇``組件篇``進階篇``插件篇``如何爲本身公司打造組件，也但願大牛能給我一點錯誤的指點，小白們能和我一塊兒共同窗習進步，我同時也但願你們能看了以後能給我點一個大大的

贊

  1. 基礎api的講解，也是根據官方文檔講解，比方說把一些mutation method ，變異方法講的更白話文一點，讓你們更容易的明白
  2. 結合工做同時你們會接觸的業務場景給出不一樣的demo,這些demo也是我本身精心在實戰中總結出來的
  3. es6在vue中寫法的拓展
  4. 經過一步一步的學習，此文是淺入深出，給出的demo咱們能夠複製到本身的電腦上本身跑一遍，跟着本身的想法拓展出別的demo，豐富本身的技術棧

Vue是什麼，Vue好在那裏，多牛B，也就不說了，既然你進來看了，說明他就是牛B的，整個vue生態圈證實了一切，掘金的發表vue的文章也證實了一切

我所講的一切都創建在vue-cli 2.2 的腳手架工具裏實現前端

vue-cli安裝教程地址vue

這樣東西我就不詳細的講解了咱們主要把核心放在基礎部分java

可是我要對所寫的目錄結構說一下jquery

其它咱們先不用管，基礎部分咱們只要對app.vue文件進行改動就能夠，而後複製個人demo代碼就能夠看到全部講解的demo效果es6

模板語法chrome

1.文本

數據綁定最多見的形式就是使用 「Mustache」 語法（雙大括號）的文本插值：
Mustache 標籤將會被替代爲對應數據對象上 world 屬性的值 ,並且一直會監聽world的值，一但改變會跟着改變vue-cli

應用場景 ： 能夠說到處都用的到 數據庫

<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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程