vue.js實戰書籍學習記錄

時間  2019-11-09
標籤 vue.js vue 實戰 書籍 學習 記錄 欄目 JavaScript 简体版
原文   原文鏈接

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

2.1.3 插值與表達式

若是想顯示｛｛｝｝標籤，而不進行替換 使用 v-pre便可跳 過這個元素和 它的子元素的 編譯過程，
例如：javascript

<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 就是須要過濾的數據
            }
    })

過濾器也能夠串聯，並且能夠接收參數，例如：css

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

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

**過濾器應當用於處理簡單的文本轉換，若是要實現更爲複雜的數據變換，應該使用計
算屬性;**vue

2.2 指令與事件

第三章 計算屬性

既然使用 methods 就能夠實現，那麼爲何還須要計算屬性呢？緣由就是
計算屬性是基於它的依賴緩存的。 一個計算屬性所依賴的數據發生變化時，它纔會從新取值，因此
text 只要不改變，計算屬性也就不更新java

第四章 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。webpack

5.1.2 v-once

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

可使用 Vue提供的 key 屬性，它可讓你本身決定是否要複用元
素， key 的值必須是惟 一的：web

<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 屬性。vue-router

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 函數

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