vue實(shí)例的選項(xiàng)總結(jié)
一、數(shù)據(jù)
API：https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E6%95%B0%E6%8D%AE
1. data
類型：Object | Function
限制：組件的定義只接受 function
詳細(xì)：Vue 實(shí)例的數(shù)據(jù)對(duì)象。Vue 將會(huì)遞歸將 data 的屬性轉(zhuǎn)換為 getter/setter，從而讓 data 的屬性能夠響應(yīng)數(shù)據(jù)變化。對(duì)象必須是純粹的對(duì)象 (含有零個(gè)或多個(gè)的 key/value 對(duì))。當(dāng)一個(gè)組件被定義，data 必須聲明為返回一個(gè)初始數(shù)據(jù)對(duì)象的函數(shù)，因?yàn)榻M件可能被用來(lái)創(chuàng)建多個(gè)實(shí)例。如果 data 仍然是一個(gè)純粹的對(duì)象，則所有的實(shí)例將共享引用同一個(gè)數(shù)據(jù)對(duì)象！通過(guò)提供 data 函數(shù)，每次創(chuàng)建一個(gè)新實(shí)例后，我們能夠調(diào)用 data 函數(shù)，從而返回初始數(shù)據(jù)的一個(gè)全新副本數(shù)據(jù)對(duì)象。
var data = { a: 1 }// 直接創(chuàng)建一個(gè)實(shí)例var vm = new Vue({ data: data})vm.a // => 1vm.$data === data // => true// Vue.extend() 中 data 必須是函數(shù)var Component = Vue.extend({ data: function () { return { a: 1 } }})
2. computed
類型：{ [key: string]: Function | { get: Function, set: Function } }
詳細(xì)：計(jì)算屬性將被混入到 Vue 實(shí)例中。所有 getter 和 setter 的 this 上下文自動(dòng)地綁定為 Vue 實(shí)例。計(jì)算屬性的結(jié)果會(huì)被緩存，除非依賴的響應(yīng)式屬性變化才會(huì)重新計(jì)算。注意，如果某個(gè)依賴 (比如非響應(yīng)式屬性) 在該實(shí)例范疇之外，則計(jì)算屬性是不會(huì)被更新的。
var vm = new Vue({ data: { a: 1 }, computed: { // 僅讀取 aDouble: function () { return this.a * 2 }, // 讀取和設(shè)置 aPlus: { get: function () { return this.a + 1 }, set: function (v) { this.a = v - 1 } } }})vm.aPlus // => 2vm.aPlus = 3vm.a // => 2vm.aDouble // => 4
3. methods
類型：{ [key: string]: Function }
詳細(xì)：methods 將被混入到 Vue 實(shí)例中。可以直接通過(guò) VM 實(shí)例訪問(wèn)這些方法，或者在指令表達(dá)式中使用。方法中的 this 自動(dòng)綁定為 Vue 實(shí)例。
var vm = new Vue({ data: { a: 1 }, methods: { plus: function () { this.a++ } }})vm.plus()vm.a // 2
4. watch
類型：{ [key: string]: string | Function | Object | Array }
詳細(xì)：一個(gè)對(duì)象，鍵是需要觀察的表達(dá)式，值是對(duì)應(yīng)回調(diào)函數(shù)。值也可以是方法名，或者包含選項(xiàng)的對(duì)象。Vue 實(shí)例將會(huì)在實(shí)例化時(shí)調(diào)用 $watch()，遍歷 watch 對(duì)象的每一個(gè)屬性。
5. props
類型：Array<string> | Object
詳細(xì)：props 可以是數(shù)組或?qū)ο螅糜诮邮諄?lái)自父組件的數(shù)據(jù)。props 可以是簡(jiǎn)單的數(shù)組，或者使用對(duì)象作為替代，對(duì)象允許配置高級(jí)選項(xiàng)，如類型檢測(cè)、自定義驗(yàn)證和設(shè)置默認(rèn)值。
你可以基于對(duì)象的語(yǔ)法使用以下選項(xiàng)：
1 type: 可以是下列原生構(gòu)造函數(shù)中的一種：String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定義構(gòu)造函數(shù)、或上述內(nèi)容組成的數(shù)組。會(huì)檢查一個(gè) prop 是否是給定的類型，否則拋出警告。Prop 類型的更多信息在此。
2 default: any 為該 prop 指定一個(gè)默認(rèn)值。如果該 prop 沒(méi)有被傳入，則換做用這個(gè)值。對(duì)象或數(shù)組的默認(rèn)值必須從一個(gè)工廠函數(shù)返回。
3 required: Boolean 定義該 prop 是否是必填項(xiàng)。在非生產(chǎn)環(huán)境中，如果這個(gè)值為 truthy 且該 prop 沒(méi)有被傳入的，則一個(gè)控制臺(tái)警告將會(huì)被拋出。
4 validator: Function 自定義驗(yàn)證函數(shù)會(huì)將該 prop 的值作為唯一的參數(shù)代入。在非生產(chǎn)環(huán)境下，如果該函數(shù)返回一個(gè) falsy 的值 (也就是驗(yàn)證失敗)，一個(gè)控制臺(tái)警告將會(huì)被拋出。你可以在這里查閱更多 prop 驗(yàn)證的相關(guān)信息。
二、DOM
API：https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-DOM
1.el
類型：string | Element
限制：只在用 new 創(chuàng)建實(shí)例時(shí)生效。
詳細(xì)：
(1)提供一個(gè)在頁(yè)面上已存在的 DOM 元素作為 Vue 實(shí)例的掛載目標(biāo)。可以是 CSS 選擇器，也可以是一個(gè) HTMLElement 實(shí)例。
(2)在實(shí)例掛載之后，元素可以用 vm.$el 訪問(wèn)。
(3)如果在實(shí)例化時(shí)存在這個(gè)選項(xiàng)，實(shí)例將立即進(jìn)入編譯過(guò)程，否則，需要顯式調(diào)用 vm.$mount() 手動(dòng)開啟編譯。
提供的元素只能作為掛載點(diǎn)。不同于 Vue 1.x，所有的掛載元素會(huì)被 Vue 生成的 DOM 替換。因此不推薦掛載 root 實(shí)例到 <html> 或者 <body> 上。
如果 render 函數(shù)和 template property 都不存在，掛載 DOM 元素的 HTML 會(huì)被提取出來(lái)用作模板，此時(shí)，必須使用 Runtime + Compiler 構(gòu)建的 Vue 庫(kù)。
2.template
類型：string
詳細(xì)：一個(gè)字符串模板作為 Vue 實(shí)例的標(biāo)識(shí)使用。模板將會(huì)替換掛載的元素。掛載元素的內(nèi)容都將被忽略，除非模板的內(nèi)容有分發(fā)插槽。
如果值以 # 開始，則它將被用作選擇符，并使用匹配元素的 innerHTML 作為模板。常用的技巧是用 <script type='x-template'> 包含模板。
出于安全考慮，你應(yīng)該只使用你信任的 Vue 模板。避免使用其他人生成的內(nèi)容作為你的模板。
如果 Vue 選項(xiàng)中包含渲染函數(shù)，該模板將被忽略。
3.render
類型：(createElement: () => VNode) => VNode
詳細(xì)：字符串模板的代替方案，允許你發(fā)揮 JavaScript 最大的編程能力。該渲染函數(shù)接收一個(gè) createElement 方法作為第一個(gè)參數(shù)用來(lái)創(chuàng)建 VNode。
如果組件是一個(gè)函數(shù)組件，渲染函數(shù)還會(huì)接收一個(gè)額外的 context 參數(shù)，為沒(méi)有實(shí)例的函數(shù)組件提供上下文信息。
Vue 選項(xiàng)中的 render 函數(shù)若存在，則 Vue 構(gòu)造函數(shù)不會(huì)從 template 選項(xiàng)或通過(guò) el 選項(xiàng)指定的掛載元素中提取出的 HTML 模板編譯渲染函數(shù)。
4.renderError
2.2.0 新增
類型：(createElement: () => VNode, error: Error) => VNode
詳細(xì)：只在開發(fā)者環(huán)境下工作。
當(dāng) render 函數(shù)遭遇錯(cuò)誤時(shí)，提供另外一種渲染輸出。其錯(cuò)誤將會(huì)作為第二個(gè)參數(shù)傳遞到 renderError。這個(gè)功能配合 hot-reload 非常實(shí)用。
示例：
new Vue({ render (h) { throw new Error(’oops’) }, renderError (h, err) { return h(’pre’, { style: { color: ’red’ }}, err.stack) }}).$mount(’#app’)
以上就是vue實(shí)例的選項(xiàng)總結(jié)的詳細(xì)內(nèi)容，更多關(guān)于VUE 實(shí)例選項(xiàng)的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！
相關(guān)文章：
1. python 如何在 Matplotlib 中繪制垂直線2. bootstrap select2 動(dòng)態(tài)從后臺(tái)Ajax動(dòng)態(tài)獲取數(shù)據(jù)的代碼3. ASP常用日期格式化函數(shù) FormatDate()4. python中@contextmanager實(shí)例用法5. html中的form不提交（排除）某些input 原創(chuàng)6. CSS3中Transition屬性詳解以及示例分享7. js select支持手動(dòng)輸入功能實(shí)現(xiàn)代碼8. 如何通過(guò)python實(shí)現(xiàn)IOU計(jì)算代碼實(shí)例9. 開發(fā)效率翻倍的Web API使用技巧10. vue使用moment如何將時(shí)間戳轉(zhuǎn)為標(biāo)準(zhǔn)日期時(shí)間格式
網(wǎng)公網(wǎng)安備