Vue全局API總結

light 發布于2019-08-30 15:53 / 1949人閱讀

摘要：帶圖原文鏈接地址用于創建一個子類用來掛載在下次更新循環結束之后執行延遲回調。在修改數據之后立即使用這個方法，獲取更新后的。而則是在引入組件之后，則是將組件內部的內容如等方法等屬性與父組件相應內容進行合并。只在獨立構建時有效

帶圖原文鏈接地址：http://www.cnblogs.com/douyae...
1.extend用于創建一個子類Vue,用$mount來掛載

2.Vue.nextTick([callback,context])在下次 DOM 更新循環結束之后執行延遲回調。在修改數據之后立即使用這個方法，獲取更新后的 DOM。




    
    Title
    



    
    {{message}}

結果如下：

我們可以看到視圖更新以后拿到的并不是更新后的innerHTML，因為dom結構更新是一個異步事件

再看下面的例子




    
    Title
    



    
    {{message}}

我們可以看到它會等dom結構更新完成后再去獲取更新后的innerHTML值

3.Vue.set(target,key,value)普通的情況下對Vue實例里面的數據進行更改，數據改掉了，但是呈現在頁面的視圖并沒有發生變化，所以借用該方法視圖也會跟著刷新

普通方式視圖并沒有刷新

set方式視圖會刷新



    
        {{item}}

4.Vue.delete(target,key)用法和原理與set添加元素是一樣的道理



    
        {{key}}----{{val}}

5.Vue.directive(id,[definition])指令函數，定義了以下幾個鉤子，每一個鉤子都有參數el,指的是綁定的元素

// 注冊
Vue.directive("my-directive", {
  bind: function () {},
  inserted: function () {},
  update: function () {},
  componentUpdated: function () {},
  unbind: function () {}
})
// 注冊 (指令函數)
Vue.directive("my-directive", function () {
  // 這里將會被 `bind` 和 `update` 調用
})
// getter，返回已注冊的指令
var myDirective = Vue.directive("my-directive")
bind: 只調用一次，指令第一次綁定到元素時調用，用這個鉤子函數可以定義一個在綁定時執行一次的初始化動作。



     Hello Vue!

inserted: 被綁定元素插入父節點時調用（父節點存在即可調用，不必存在于 document 中）。

這是我做的一個照片墻拖曳例子


    
    Title

bind:update: 被綁定元素所在的模板更新時調用，而不論綁定值是否變化。通過比較更新前后的綁定值，可以忽略不必要的模板更新（詳細的鉤子函數參數見下）。




    
    Title

小例子如下，當被綁定的textarea的內容發生變化的時候，就會執行鉤子函數

componentUpdated: 被綁定元素所在模板完成一次更新周期時調用。

unbind: 只調用一次，指令與元素解綁時調用。

6.Vue.filter(id,[definition])注冊或獲取全局過濾器，主要用于在實例里面的數據不改變的情況下，在頁面對渲染進dom的數據進行過濾處理，和angular中的過濾器用法一樣

// 注冊
Vue.filter("my-filter", function (value) {
// 返回處理后的值
})
// getter，返回已注冊的過濾器
var myFilter = Vue.filter("my-filter")

簡單全局過濾器和局部過濾器例子




    
    Title
    



    數字變美元
    
    {{num|money}}
    內容反轉
    
    {{message|reverse}}

過濾器可以管道式連接過濾




    
    Title
    



    過濾字符串中的數字，并將剩余部分以數組形式輸出
    
    {{message|delNum|arr}}

7.Vue.component()在組件那一篇文章有說到，不做總結了

8.Vue.version用于獲取當前Vue的版本號

9.Vue.use用于安裝Vue插件

10.對于Vue.mixin的理解，引用別人的博文

vue中mixin的一點理解

vue中提供了一種混合機制--mixins，用來更高效的實現組件內容的復用。最開始我一度認為這個和組件好像沒啥區別。。后來發現錯了。下面我們來看看mixins和普通情況下引入組件有什么區別？

 組件在引用之后相當于在父組件內開辟了一塊多帶帶的空間，來根據父組件props過來的值進行相應的操作，單本質上兩者還是涇渭分明，相對獨立。
 而mixins則是在引入組件之后，則是將組件內部的內容如data等方法、method等屬性與父組件相應內容進行合并。相當于在引入后，父組件的各種屬性方法都被擴充了。
 單純組件引用：
      父組件 + 子組件 >>> 父組件 + 子組件
 mixins：
      父組件 + 子組件 >>> new父組件

 值得注意的是，在使用mixins時，父組件和子組件同時擁有著子組件內的各種屬性方法，但這并不意味著他們同時共享、同時處理這些變量，兩者之間除了合并，是不會進行任何通信的。最開始看到mixins的時候，天真的我似乎看到了一種向下的類似vuex的數據共享方案，心情十分激動啊。但是仔細一研究官方api和一些技術博客，才發現自己。。。天真。

我個人的拙見如下：
1.Vue在實例化成對象的那一刻，會通過mixin混合機制將方法直接添加到實例里面去
2.prototype方法直接將方法添加到Vue本身的構造器里面去




    
    Title

輸出結果：

大家可以看到

第一個輸出的是混合器的hello方法，此刻剛開始創建實例app

第二個屬于混合器的hello方法，因為app本身實例沒有這個方法，所以是混合器為其添加的

第三個輸出的是混合器的hello方法，此刻剛開始創建實例app1

第四個輸出的是app本身的list方法

第五個輸出的是app實例的say方法。因為app實例中用有該方法，會將混合器添加的say方法覆蓋掉

對于六和七由于app1沒有自己的hello和say方法，所以只能用混合器為他添加的方法

第八個屬于Vue原型里面我們添加進去的myapp方法

我們再看一下Vue原型對象app.__proto__

我們發現里面并沒有混合方法，所以混合方法在創建實例對象的那一刻添加到實例對象里面了，但是里面卻有myapp方法

11.Vue.compile()在 render 函數中編譯模板字符串。只在獨立構建時有效

云服務器 GPU云服務器年終總結網絡總結方法總結函數總結

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.hztianpu.com/yun/116670.html

Vue全局API總結

摘要：帶圖原文鏈接地址用于創建一個子類用來掛載在下次更新循環結束之后執行延遲回調。在修改數據之后立即使用這個方法，獲取更新后的。而則是在引入組件之后，則是將組件內部的內容如等方法等屬性與父組件相應內容進行合并。只在獨立構建時有效帶圖原文鏈接地址：http://www.cnblogs.com/douyae...1.extend用于創建一個子類Vue,用$mount來掛載 con...

lemon 2019-08-01 17:46 評論0 收藏0
Vue全局API總結

摘要：帶圖原文鏈接地址用于創建一個子類用來掛載在下次更新循環結束之后執行延遲回調。在修改數據之后立即使用這個方法，獲取更新后的。而則是在引入組件之后，則是將組件內部的內容如等方法等屬性與父組件相應內容進行合并。只在獨立構建時有效帶圖原文鏈接地址：http://www.cnblogs.com/douyae...1.extend用于創建一個子類Vue,用$mount來掛載 con...

nifhlheimr 2019-08-21 16:59 評論0 收藏0
Vue開發總結及一些最佳實踐（已更新）

摘要：基本開發環境創建的項目，作為代碼編寫工具插件推薦插件配置文章目錄項目目錄結構介紹框架選擇處理請求二次封裝項目目錄結構簡介業務相關靜態文件全局組件基礎樣式布局樣式及工具引入請求配置路由全局狀態管理工具文件入口文件主要配置文件頁面檢查配置測試基本開發環境 vue-cli3 創建的項目，vscode 作為代碼編寫工具vscode插件推薦：vscode 插件配置文章目錄項目目錄結構介紹...

NotFound 2019-08-26 13:47 評論0 收藏0
vue 項目總結一組件開發的配置和例子

摘要：入口文件，影響全局，作用是引入全局使用的庫公共的樣式和方法設置路由等。項目里總會有一些復用的組件，例如彈出框發送手機驗證碼圖片上傳等，將它們作為通用組件，避免重復工作結構如下可以根據功能模塊建立文件夾，放置本功能會用到的通用組件。上一篇文章 https://segmentfault.com/a/11... 介紹了項目里文件夾的分類和作用，這次主要說明 src 文件夾里具體的文件分類和...

melody_lql 2019-08-02 16:00 評論0 收藏0
vue 項目總結一組件開發的配置和例子

摘要：入口文件，影響全局，作用是引入全局使用的庫公共的樣式和方法設置路由等。項目里總會有一些復用的組件，例如彈出框發送手機驗證碼圖片上傳等，將它們作為通用組件，避免重復工作結構如下可以根據功能模塊建立文件夾，放置本功能會用到的通用組件。上一篇文章 https://segmentfault.com/a/11... 介紹了項目里文件夾的分類和作用，這次主要說明 src 文件夾里具體的文件分類和...

isaced 2019-08-22 11:16 評論0 收藏0