vue devtools面板没有显示_vue 基础入门(四)
vue 基礎入門(四)
1.全局配置
- Vue.config 是一個對象,包含 Vue 的全局配置。可以在啟動應用之前修改下列 property:
1.1 silent
類型:boolean
默認值:false
用法:
?
取消 Vue 所有的日志與警告。
?1.2 devtools
類型:boolean
默認值:true (生產版為 false)
用法:
Vue.config.devtools?=?true
?
配置是否允許 vue-devtools 檢查代碼。開發版本默認為 true,生產版本默認為 false。生產版本設為 true 可以啟用檢查。
?1.3 errorHandler
類型:Function
默認值:undefined
用法:
??//?handle?error
??//?`info`?是?Vue?特定的錯誤信息,比如錯誤所在的生命周期鉤子
??//?只在?2.2.0+?可用
}
?
指定組件的渲染和觀察期間未捕獲錯誤的處理函數。這個處理函數被調用時,可獲取錯誤信息和 Vue 實例。
??從 2.2.0 起,這個鉤子也會捕獲組件生命周期鉤子里的錯誤。同樣的,當這個鉤子是 undefined 時,被捕獲的錯誤會通過 console.error 輸出而避免應用崩潰。
??從 2.4.0 起,這個鉤子也會捕獲 Vue 自定義事件處理函數內部的錯誤了。
??從 2.6.0 起,這個鉤子也會捕獲 v-on DOM 監聽器內部拋出的錯誤。另外,如果任何被覆蓋的鉤子或處理函數返回一個 Promise 鏈 (例如 async 函數),則來自其 Promise 鏈的錯誤也會被處理。
??錯誤追蹤服務 Sentry 和 Bugsnag 都通過此選項提供了官方支持。
?1.4 warnHandler
類型:Function
默認值:undefined
用法:
??//?`trace`?是組件的繼承關系追蹤
}
?
為 Vue 的運行時警告賦予一個自定義處理函數。注意這只會在開發者環境下生效,在生產環境下它會被忽略。
?1.5 ignoredElements
類型:Array
默認值:[]
用法:
??'my-custom-web-component',
??'another-web-component',
??//?用一個?`RegExp`?忽略所有“ion-”開頭的元素
??//?僅在?2.5+?支持
??/^ion-/
]?
須使 Vue 忽略在 Vue 之外的自定義元素 (e.g. 使用了 Web Components APIs)。否則,它會假設你忘記注冊全局組件或者拼錯了組件名稱,從而拋出一個關于 Unknown custom element 的警告。
?1.6 keyCodes
類型:{ [key: string]: number | Array }
默認值:{}
用法:
??v:?86,
??f1:?112,
??//?camelCase?不可用
??mediaPlayPause:?179,
??//?取而代之的是?kebab-case?且用雙引號括起來
??"media-play-pause":?179,
??up:?[38,?87]
}
"text"?@keyup.media-play-pause="method">
?
給 v-on 自定義鍵位別名,給鍵位數字定義別名。
?1.7 performance
類型:boolean
默認值:false (自 2.2.3 起)
用法:
設置為 true 以在瀏覽器開發工具的性能/時間線面板中啟用對組件初始化、編譯、渲染和打補丁的性能追蹤。只適用于開發模式和支持 performance.mark API 的瀏覽器上。
1.8 productionTip
類型:boolean
默認值:true
用法:
設置為 false 以阻止 vue 在啟動時生成生產提示。
2.全局 API
2.1 Vue.extend
Vue.extend( options )
參數:
{Object} options
- 用法:
使用基礎 Vue 構造器,創建一個“子類”。參數是一個包含組件選項的對象。
data 選項是特例,需要注意 - 在 Vue.extend() 中它必須是函數
- 示例
//?創建構造器
var?Profile?=?Vue.extend({
??template:?'
{{firstName}}?{{lastName}}?aka?{{alias}}
',??data:?function?()?{
????return?{
??????firstName:?'Walter',
??????lastName:?'White',
??????alias:?'Heisenberg'
????}
??}
})
//?創建 Profile 實例,并掛載到一個元素上。
new?Profile().$mount('#mount-point')
結果如下:
<p>Walter?White?aka?Heisenbergp>?
總結 使用extend擴展一些通用組件,如 confirm 功能組件
?2.2 Vue.nextTick
- Vue.nextTick( [callback, context] )
- 參數:
{Object}?[context]
- 用法:
在下次 DOM 更新循環結束之后執行延遲回調。在修改數據之后立即使用這個方法,獲取更新后的 DOM。
- 示例
??data()?{
????return?{?msg:?'nextTick'?};
??},
??template:?`
????nextTick?使用`,
??mounted()?{
????//?正常執行
????console.log(1);
????//?宏任務
????setTimeout(()?=>?{
??????console.log(2);
????});
????const?p?=?new?Promise((resolve,?reject)?=>?{
??????resolve('succ');
????});
????//?微任務
????p.then((res)?=>?{
??????console.log(3);
????});
????//?nextTick
????this.$nextTick(()?=>?{
??????console.log(4);
????});
????//?輸出結果?1?3?4?2
????//??nextTick?宏任務2之前,執行
??}
};
?
總結
2.3 Vue.set
Vue.set( target, propertyName/index, value )
參數:
{string?|?number}?propertyName/index
{any}?value
返回值:設置的值。
用法:
向響應式對象中添加一個 property,并確保這個新 property 同樣是響應式的,且觸發視圖更新。它必須用于向響應式對象上添加新 property,因為 Vue 無法探測普通的新增 property (比如 this.myObject.newProperty = 'hi')
- 示例
const?vueSet?=?{
??data()?{
????return?{
??????msg:?'123',
??????show:?false,
??????showNum:?false,
??????data:?{}
????};
??},
??methods:?{
????//?不使用set?直接改變數據,數據改變后頁面不會自動更新數據
????addProps()?{
??????this.data.count?=?this.data.count???this.data.count?+?1?:?1;
??????this.show?=?true;
??????console.log('this:?',?this);
????},
????//??使用set 增加新數據后,數據被vue監聽。會自動更新數據
????setProps()?{
??????this.data.num???(this.data.num?+=?1)?:?this.$set(this.data,?'num',?1);
??????this.showNum?=?true;
??????console.log('this:?',?this);
????},
????//??可以通過?更新引用對象。使vue重新監聽整個對象。這樣新增的屬性也會被監聽
????setData()?{
??????this.data?=?{?count:?pNum++?};
??????this.show?=?true;
????}
??},
??template:?`
????Vue.set?使用msg:{{msg}}msg=clickcount:{{data.count}}增加count屬性
????使用set增加響應式屬性num:{{data.num}}增加count屬性
????設置對象count:{{data.count}}增加count屬性`
};
?
總結
2.4 Vue.delete
Vue.delete( target, propertyName/index )
參數:
{string?|?number}?propertyName/index
僅在?2.2.0+?版本中支持 Array + index 用法。
- 用法:
刪除對象的 property。如果對象是響應式的,確保刪除能觸發更新視圖。這個方法主要用于避開 Vue 不能檢測到 property 被刪除的限制,但是你應該很少會使用它。
2.5 Vue.directive
- Vue.directive( id, [definition] )
- 參數:
{Function?|?Object}?[definition]
- 用法:
注冊或獲取全局指令。
?參考 vue 基礎入門二[2]
?2.6 Vue.filter
Vue.filter( id, [definition] )
參數:
{Function}?[definition]
- 用法:
注冊或獲取全局過濾器。
//?注冊Vue.filter('my-filter',?function?(value)?{
??//?返回處理后的值
})
//?getter,返回已注冊的過濾器
var?myFilter?=?Vue.filter('my-filter')
?
參考管道操作符vue 過濾器[3]
?2.7 Vue.component
Vue.component( id, [definition] )
參數:
{Function?|?Object}?[definition]
- 用法:
注冊或獲取全局組件。注冊還會自動使用給定的 id 設置組件的名稱
//?注冊組件,傳入一個擴展過的構造器Vue.component('my-component',?Vue.extend({?/*?...?*/?}))
//?注冊組件,傳入一個選項對象?(自動調用?Vue.extend)
Vue.component('my-component',?{?/*?...?*/?})
//?獲取注冊的組件?(始終返回構造器)
var?MyComponent?=?Vue.component('my-component')
?
總結
2.8 Vue.use
Vue.use( plugin )
參數:
- 用法:
安裝 Vue.js 插件。如果插件是一個對象,必須提供 install 方法。如果插件是一個函數,它會被作為 install 方法。install 方法調用時,會將 Vue 作為參數傳入。
該方法需要在調用 new Vue() 之前被調用。
當 install 方法被同一個插件多次調用,插件將只會被安裝一次。
- 示例
??install(Vue){
????//?一些操作,如使用Vue.components()批量注冊全局組件。
??}
}
function?vueUseFn(Vue){
??//?一些操作,如使用Vue.components()批量注冊全局組件。
}
//?使用
Vue.use(vueUse);
Vue.use(vueUseFn)
?
總結
2.9 Vue.mixin
-Vue.mixin( mixin )
- 參數:
{Object} mixin
- 用法:
全局注冊一個混入,影響注冊之后所有創建的每個 Vue 實例。插件作者可以使用混入,向組件注入自定義的行為。不推薦在應用代碼中使用。
- 示例
??// vue的options,包括life cycle,methods,computed 等。被混入的對象都可以使用混入對象的屬性
};
Vue.mixin(vueMixin);
?
總結
2.10 Vue.compile
Vue.compile( template )
參數:
{string} template
- 用法:
將一個模板字符串編譯成 render 函數。只在完整版時可用。
var?res?=?Vue.compile('{{?msg?}}')new?Vue({
??data:?{
????msg:?'hello'
??},
??render:?res.render,
??staticRenderFns:?res.staticRenderFns
})
?
總結
2.11 Vue.observable
Vue.observable( object )
參數:
{Object} object
- 用法:
讓一個對象可響應。Vue 內部會用它來處理 data 函數返回的對象。
返回的對象可以直接用于渲染函數和計算屬性內,并且會在發生變更時觸發相應的更新。也可以作為最小化的跨組件狀態存儲器,用于簡單的場景:
const?state?=?Vue.observable({?count:?0?})const?Demo?=?{
??render(h)?{
????return?h('button',?{
??????on:?{?click:?()?=>?{?state.count++?}}
????},?`count?is:?${state.count}`)
??}
}
?
總結
2.12 Vue.version
- 細節:
提供字符串形式的 Vue 安裝版本號。這對社區的插件和組件來說非常有用,你可以根據不同的版本號采取不同的策略。
- 用法:
if?(version?===?2)?{
??//?Vue?v2.x.x
}?else?if?(version?===?1)?{
??//?Vue?v1.x.x
}?else?{
??//?Unsupported?versions?of?Vue
}
關注不迷路
Reference
[1]參考: https://cn.vuejs.org/v2/guide/reactivity.html#%E5%BC%82%E6%AD%A5%E6%9B%B4%E6%96%B0%E9%98%9F%E5%88%97
[2]參考 vue 基礎入門二: https://github.com/FearlessMa/FENotes/blob/master/docs/vue/vueBase/vue%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8%E4%BA%8C.md
[3]vue 過濾器: https://cn.vuejs.org/v2/guide/filters.html
[4]vue 編譯: https://cn.vuejs.org/v2/guide/render-function.html
創作挑戰賽新人創作獎勵來咯,堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的vue devtools面板没有显示_vue 基础入门(四)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 控制面板项 .cpl 文件说明
- 下一篇: React 是怎样炼成的