vue.js實戰書本進修紀錄

2024年1月18日 138次阅读来源: Weibozzz

第二章數據綁定和第一個 Vue 運用

2.1.3 插值與表達式

假如想顯現｛｛｝｝標籤，而不舉行替代運用 v-pre即可跳過這個元素和它的子元素的編譯歷程，
比方：

 <span v-pre ＞｛｛這裏的內容是不會被編譯的門}}＜／ span>

2.1.4 過濾器

  <div id=” app” >
    { { date | formatDate ) )
    </div> 
    
    var app =new Vue({
        el : ’ #app ’ ,
        data: {
        date : new Date()
        filters : {
            formatDate : function (value) { ／／這裏的 value 就是須要過濾的數據
            }
    })

過濾器也能夠串連，而且能夠吸收參數，比方：

<! 一串連一〉
{ { message | filterA | filterB } }
〈！一吸收參數逐一〉
{{ message | flterA ('argl ’，’ arg2 ’）｝｝

這裏的字符argl arg2 將離別傳給過濾器的第 2個和第 3個參數，由於第1 個是數據本身。

**過濾器應當用於處置懲罰簡樸的文本轉換，假如要完成更加龐雜的數據變更，應當運用計
算屬性;**

2.2 指令與事宜

第三章盤算屬性

既然運用 methods 就能夠完成，那末為何還須要盤算屬性呢？緣由就是
盤算屬性是基於它的依靠緩存的。一個盤算屬性所依靠的數據發生變化時，它才會從新取值，所以
text 只需不轉變，盤算屬性也就不更新

第四章 v-bind及 class與 style 綁定

  <div :class=”{’ active ’: isActive }”></div> 
    <div : class=” [isActive ? activeCls :'', errorCls] ” ></div> 
    <div :style ＝{’ color ’: color, ’ fontSize ’ : fontSize ＋’ px ’｝”〉文本＜／ div>

第五章內置指令

5.1.1 v-cloak

 [v-cloak] {
        display: none; 
    }
        <div id=” app ” v-cloak>
            {{message ))
        </div>

平常情況下，v-cloak是一個處理初始化慢致使頁面閃爍的最好實踐，關於簡樸的項目很實
用，然則在具有工程化的項目里，比方背面進階篇將引見 webpack和 vue-router 時，項目標 HTML
組織只要一個空的 div 元素，盈餘的內容都是由路由去掛載差別組件完成的，所以不再須要 v-cloak。

5.1.2 v-once

5.2.1 v-if v-else-if v-else

能夠運用 Vue供應的 key 屬性，它能夠讓你本身決議是不是要復用元
素， key 的值必需是唯一的：

 <div id=” app”>
      <template v-if=”type ===’ name ’”>
          <label ＞用戶名 ＜／ label>
          <input placeholder＝”輸入用戶名” key=" name-input”>
      </template>
      <template v-else>
          <label ＞郵箱 ＜／ label>
          <input placeholder＝”輸入郵箱” key＝唄ail-input ”〉
      </template>
      <button @click＝” handleToggleClick ”〉切換輸入範例＜／button>
  </div>

給兩個<input>元素都增添 key后就不會復用了，切換範例時鍵入的內容也會被刪除，不過
<label＞元素仍然是被複用的，由於沒有增加 key 屬性。

5.2.2 v-show

5.3.2 數組更新

Vue 包括了一組視察數組變異的要領，運用它們轉變數組也會觸
發視圖更新：

push()
pop()
shift ()
unshift()
splice()
sort()
reverse()

須要注重的是，以下更改的數組中， Vue 是不能檢測到的，也不會觸發視圖更新：

經由過程索引直接設置項，比方 app.books[3] = { … }.
修正數組長度，比方叩p.books.length = 1.

處理第一個題目能夠用兩種要領完成一樣的效果，第種是運用 Vue 內置的 set 要領：

 Vue .set(app.books, 3 , {
       name: 《css 揭秘》 ’，
       author ：’［希］ Lea Verou ’ 
   }

假如是在 webpack 中運用組件化的體式格局（進階篇中將引見〉，默許是沒有導入 Vue 的，這時候
能夠運用$set ，比方：

this.$set(app.books, 3 , {
    name: ’《css 揭秘》’，
    author ：’［希］ Lea Verou ’ 
}）

第二個題目也能夠直接用 splice 來處理：

app.books.splice(l);

5.4 要領與事宜

在methods中定義了我們須要的要領供＠click 挪用，須要注重，＠click 挪用的要領名后能夠不跟括號“（）” 此時，假如該要領有參數，默許會將原生事宜對象 event 傳入，能夠嘗試修正為＠click＝”handleAdd”，然後在 handleAdd 內打印出 count 參數看看。在大部分營業場景中，假如要領不須要傳入參數，為了輕便能夠不寫括號。
Vue 供應了個特別變量$event ，用於接見原生 DOM 事宜，比方下面的實例能夠阻撓鏈接翻開：

<div id=” app ” >
    <a href=”http:llwww.apple.com”@click="handleClick （＇制止翻開’，$event ）”>翻開鏈接         </a>
</div>
<script>
    var app =new Vue({
        el :’#app ’,
        methods: {
            handleClick : function (message, event) {
                event . preventDefault() ;
                window . alert(message); 
            }
        }
    })

5.4.2 修飾符

.stop
.prevent
.capture
.self
.once
.enter
.tab
.delete(捕捉‘刪除’和‘退格’鍵)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta(Mac下是Command,Window下是窗口鍵)

比方：

<! -- Shift + S -->
<input @keyup.shift . 83=”handleSave ”>
<!-- Ctrl + Click -->
<div @click.ctrl=”doSomething”>Do something</div>

第六章表單與 v-model

6.3 修飾符

v-model.lazy
v-model.number
.trim

第七章組件詳解

7.1.2 組件用法

組件與之相似，須要註冊后才能夠運用。註冊有全局註冊和部分註冊兩種體式格局。全局註冊后，
任何 Vue 實例都能夠運用。全局註冊示例代碼以下

Vue.component (’ my- component ’, {
／／選項
})

Vue組件的模板在某些情況下會遭到 HTML 的限定，比方＜table＞內劃定只允許是〈tr〉<td>、＜
th＞等這些表格元素，所以在＜tabl ＞內直接運用組件是無效的這類情況下，能夠運用特別的**is
屬性**來掛載組件示例代碼以下

<div id=” app” >
    <table>
        <tbody is=”my-component” ></tbody>
    </ table>
</div>

<script>
Vue.component ( ’ my-component ’, {
    template ：’ div ＞這裡是組件的內容＜／ div>
}) ;
var app =new Vue({
    el : ’ #app ’
})
<script />

tbody 在襯着時會被替代為組件的內容。罕見的限定元素另有＜ul＞、＜ol＞、＜select>

JavaScript 對象是援用關聯，所以假如 return出的對象援用了外部對象，那這個對象就
是同享的，任何方修正都邑同步。比方下面的示例：

<div id=” app” >
    <my- component></my-component>
    <my-component></my-component>
    <my-component></my-component>
</div>
<script>
    var data = {
        counter : 0
    }
    Vue.component (’ my- component ’, {
        template :’<button @click=” counter++” >{{ counter ) )</button>’,
    data:function () {    
         return data ;
        }
    })
    var app =new Vue ( {
        el :’#app ’
    })
</script>

組件運用了3次然則點擊恣意一 <button>。3 個数字都邑加1 ，那是由於組件 data
用的是外部的對象，這一定不是我們希冀的效果，所以給組件返回一個新的 data對象來自力
例代碼以下

<div id=” app” >
    <my- component></my-component>
    <my-component></my-component>
    <my-component></my-component>
</div>
<script>
   
    Vue.component (’ my- component ’, {
        template :’<button @click=” counter++” >{{ counter ) )</button>’,
    data:function () {    
         return {
             counter:0
         }
        }
    })
    var app =new Vue ( {
        el :’#app ’
    })
</script>

如許，點擊3 個按鈕就互不影響了，完全到達復用的目標。

7.2 運用 props 通報數據

**注重，假如你要直接通報数字、布爾值、數組、對象，而且不運用 v-bind ，通報的僅
僅是字符串，嘗試下面的示例來對照：**

<div id=” app ” >
    <my-component message=” [ 1 , 2, 3 ] ” ></my-component>
    <my-component :message=” [ 1 , 2, 3 ] ” ></my-component>
</div>
<script>
Vue.component (’ my-component ’, {
    props: [ ’ message ’ ],
    template :’<div>{{ message.length }}</div>’
} )
var app =new Vue ( {
    el : ’ #app ’
})
</script>

同一個組件運用了兩次，區分僅僅是第二個運用的是 v-bind ，襯着后的效果，第一個是7
，第二個才是數組的長度 3,

7.2.2 單向數據流

7.2.3 數據考證

Vue.component my-component ’，
    props : {
        ／／必需是数字範例
    propA : Number,
        ／／必需是字符串或数字範例
    propB : [String, Number] ,
        ／／布爾值，假如沒有定義，默許值就是 true
    propC: {
        type : Boolean ,
        default : true
        ／／数字，而且是必傳
        }
    propD: {
        type: Number ,
        required : true
        ／／假如是數組或對象，默許值必需是一個函數來返回
        }
    propE: {
        type : Array ,
        default : function () {
            return [] ;
        ／／自定義 個考證函數
        }
    }
    propF: {
        validator : function (value) {
        return value > 10; 
        }
    }
  }
)}；

type 範例能夠是：

String
Number
Booleab
Object
Array
Function

type也能夠是一個自定義組織器，運用 instanceof 檢測。
當prop 考證失利時，在開闢版本下會在控制台拋出一條正告。

7.3 組件通訊

7.3.1 自定義事宜

子組件用 $emit（）來觸發事宜，父組件用$on（）來
監昕子組件的事宜

7.3.3 非父子組件通訊

引薦運用一個空的 Vue 實例作為中心事宜總線（ bus ），也就是一个中介

var bus= new Vue (); 
methods : {
    handleEvent: function () {
        bus.$emit(’on-message',' 來自組件 mponent-a 的內容')
    }
}

／／在實例初始化時，監聽來自 bus 實例的事宜
bus.$on (’on-message ’, function (msg) { ...})

$refs

$refs 只是在組件襯着完成后才添補，而且它黑白相應式的它僅僅作為一個直接接見子
苦？組件的應急計劃，應當防止在模板或盤算屬性中運用$refs

7.4 運用 slot 分發內容

7.4.3 slot 用法

單個slot
簽字 Slot

7.4.4 作用域插槽

7.5 組件高等用法

7.6.1 $nextTick

<div id=” app” >
    <div id div v-if＝氣howDiv 〉這是一段文本＜／ div>
    <button @click= getText 〉獵取 div 內容＜／button>
</div>
<script>
var app =new Vue({
    el :’#app ’,
    data: {
        showDiv: false
        },
    methods : {
        getText: function () {
            this.showDiv = true;
            var text = document .getElementByid (’ div ’) .innerHTML;
            console . log(text) ; 
        }
    }
})
</script>

這段代碼並不難理解，然則運轉后在控制台會拋出一個毛病： Cannot read prope町’innerHU.伍’
of null ，意義就是獵取不到 div 元素。這裏就觸及 Vue 一個主要的觀點：異步更新行列。

Vue 會依據當前瀏覽器環境優先運用原生的 Promise.then MutationObserver ，假如都不支撐，
就會採納 setTimeout替代。

<div id=” app” >
    <div id div v-if＝氣howDiv 〉這是一段文本＜／ div>
    <button @click= getText 〉獵取 div 內容＜／button>
</div>
<script>
var app =new Vue({
    el :’#app ’,
    data: {
        showDiv: false
        },
    methods : {
        getText: function () {
            this.showDiv = true ;
            this.$nextTick (function () {
                var text = document . getElementByid ( ’ div ’) . innerHTML;
                console.log(text) ; 
        }
    }
})
</script>

這時候再點擊按鈕，控制台就打印出 div 的內容“這是一段文本”了。

我們應當不用去主動操縱 DOM，由於 Vue 的中心頭腦就是數據驅動 DOM，但在很
多營業里，我們防止不了會運用些第三方庫，比方 popper.js、 swiper等，這些基於原生 JavaScript 庫都有建立和更新及燒毀的完全生命周期，與 Vue 合運用時，就要利用好$nextTick

7.6.3 手動掛載實例

我們如今所建立的實例都是經由過程 new Vue（）的情勢建立出來的。在一些異常特別的情況下，我
們須要動態地去建立 Vue 實例， Vue 供應了 Vue.extend和 $mount 兩個要領來手動掛載一個實例。
Vue.extend是基礎 Vue 組織器，建立一個“子類”，參數是一個包括組件選項的對象。
假如 Vue 實例在實例化時沒有收到 el 選項，它就處於“未掛載”狀況，沒有關聯的 DOM元
素。能夠運用$mount（）手動地掛載一個未掛載的實例。這個要領返回實例本身，因此能夠鏈式挪用
其他實例要領。示例代碼以下：

<div id＝” unt-div ”〉
</div>
<script>
var MyComponent =Vue.extend ((
    template :’<div>Hello: {{ ne } }</div>’,
    data: function () {
        return (
            name :’Aresn ’
., } )
new MyComponent ().$mount (’#mount-div ’);

別的一種掛載體式格局

new MyComponent ({
el :’#mount-div ’
});

／／或許，在文檔以外襯着而且隨後掛載

var component= new MyComponent() . $mount ();
document.getElementByid （'mount-d ’） .appendChild(component.$el);

手動掛載實例（組件）是一種比較極度的高等用法，在營業中險些用不到，只在開闢一些復
雜的自力組件時可能會運用，所以只做相識就好。

第八章自定義指令

8.1 基礎用法

／／全局註冊
Vue.directive(’focus ’,{
／／指令選項
., } )
／／部分註冊
var app =new Vue({
    el :’#app ’,
    directive: {
        focus: {
        ／／指令選項
})

自定義指令的選項是由幾個鈎子函數構成的，每一個都是可選的。

bind 只挪用一次，指令第一次綁定到元素時挪用，用這個鈎子函數能夠定義一個在綁定

時實行一次的初始化行動．

inserted 被綁定元素插進去父節點時挪用（父節點存在即可挪用，沒必要存在於 document 中）
update 被綁定元素地點的模板更新時挪用，而不管綁定值是不是變化。經由過程比較更新前後

的綁定值，能夠疏忽沒必要要的模板更新。

componentUpdated 被綁定元素地點模板完成一次更新周期時挪用．
unbind 只挪用一次，指令與元素解綁時挪用

第九章 Render 函數

    原文作者：Weibozzz
    原文地址: https://segmentfault.com/a/1190000015243276
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。

第二章 數據綁定和第一個 Vue 運用