目錄1. options 是什么2. 包含哪些屬性3.入門屬性eldatamethodscomponentsprops生命周期鉤子1. options 是什么

無論是 jQuery.js 還是 Vue.js，都是在 js 的基礎(chǔ)上再次封裝的庫，都需要?jiǎng)?chuàng)建對應(yīng)的實(shí)例來封裝對應(yīng)的操作。如通過 $(’div’) 獲得一個(gè) jQuery 的 div元素 實(shí)例，也稱為 jQuery 對象，jQuery 對象包含了對選中的 div元素 的各種操作API，因此 jQuery 實(shí)例封裝的是對選中元素的各種操作。

而 Vue.js 在此基礎(chǔ)上更近一步，封裝了對視圖的所有操作，包括數(shù)據(jù)的讀寫、數(shù)據(jù)變化的監(jiān)聽、DOM元素的更新等等，通過 new Vue(options) 來創(chuàng)建出一個(gè) Vue實(shí)例 ，也稱為 Vue對象 ，該 Vue實(shí)例 封裝了操作元素視圖的所有操作，可通過 Vue實(shí)例 來輕松操作對應(yīng)區(qū)域的視圖。

2. 包含哪些屬性

options 對象的具體可選屬性有很多，具體可分為五大類，可在 vue.js 官網(wǎng)查看到，如下：

3.入門屬性el

el 屬性又稱掛載點(diǎn)，可認(rèn)為是 element 的簡寫，創(chuàng)建一個(gè) vue實(shí)例 得知道是在哪一塊元素上創(chuàng)建 Vue實(shí)例 ，對哪一塊視圖進(jìn)行操作。

掛載點(diǎn)的定義有兩種方式，mount 就是掛載的意思

1. 設(shè)置 el 屬性

new Vue({ el: '#app', render: h => h(App)})

2. 使用 $mount 接口

new Vue({ render: h => h(App)}).$mount('#app');data

data 屬性又稱內(nèi)部數(shù)據(jù)，該屬性值可以是對象，也可以是函數(shù)，但優(yōu)先推薦使用函數(shù)，對象里的函數(shù)又稱方法。并且若是組件中的 data 則必須使用函數(shù)。

優(yōu)先推薦使用函數(shù)的原因是在使用同一個(gè) options 對象作為參數(shù)創(chuàng)建多個(gè) Vue實(shí)例 時(shí)，若 data 屬性值為對象，在使用 new Vue(options) 創(chuàng)建 Vue實(shí)例 時(shí)會(huì)將 options.data 屬性值直接賦值給 Vue實(shí)例.data的屬性 ，由于對象的賦值是復(fù)制的地址，因此多個(gè)實(shí)例的 data 屬性值都是指向同一個(gè)對象的地址，則多個(gè)實(shí)例會(huì)共用一個(gè) data對象，當(dāng)一個(gè)實(shí)例改變 data對象 時(shí)，另一個(gè)實(shí)例的 data對象 也會(huì)被改變。

而當(dāng) data 屬性值為函數(shù)時(shí)，Vue 創(chuàng)建實(shí)例時(shí)是會(huì)執(zhí)行該 data() 函數(shù)，并將函數(shù)執(zhí)行的結(jié)果返回的對象賦值給 Vue實(shí)例.data 屬性，每次函數(shù)執(zhí)行返回的對象都是不同的對象，因此多個(gè)實(shí)例的 data 屬性值對應(yīng)的是不同的對象，一個(gè)改變不會(huì)影響另外一個(gè)，各自獨(dú)立不影響。

1. 使用對象

data:{ n: 0}

2. 使用函數(shù)

data(){ return{ n: 0 }}methods

methods 屬性又稱方法，屬性值是一個(gè)對象，對象里面的屬性都是函數(shù)，這些函數(shù)可以是事件處理的回調(diào)函數(shù)，也可以是普通函數(shù)。特點(diǎn)是每次頁面渲染 methods 都會(huì)執(zhí)行，如下：

methods:{ add(){ this.n +=1 }}components

components 即組件的意思，也是基于模塊化的概念設(shè)計(jì)的便于復(fù)用的 Vue實(shí)例 ，使用方法有三種，如下：

1. 全局注冊

全局定義一個(gè)組件，就可以在整個(gè)項(xiàng)目中隨時(shí)使用，定義方法如下

Vue.component(’my-component-name’, { // ... 選項(xiàng) ... 該部分和創(chuàng)建vue實(shí)例的options是一樣的，畢竟組件就是vue實(shí)例 })new Vue({ el: ’#app’ })

<div id='app'> <my-component-name></my-component-name></div>

2. 局部注冊

//通過一個(gè)普通的 JavaScript 對象來定義組件var ComponentA = { options }//然后在 components 選項(xiàng)中定義你想要使用的組件new Vue({ el: ’#app’, components: {component-a: ComponentA //或直接在里面定義對象component-b: { //和options一樣的內(nèi)容，但data必須是函數(shù)} } })

<div id='app'> <component-a></component-a></div>

3. 模塊系統(tǒng)

通過將組件單獨(dú)為一個(gè) *.vue 文件，然后通過 import 導(dǎo)入并引用，如下main.js

import ComponentA from ’./ComponentA.vue’new Vue({ el: ’#app’, components:{ComponentA: ComponentA//在ES6語法中，當(dāng)屬性和屬性值相同時(shí)可只寫一個(gè)//ComponentA }})

<div id='app'> <ComponentA></ComponentA></div>

總結(jié)

推薦使用最后的模塊系統(tǒng)組件，更加模塊化，結(jié)構(gòu)更清晰。完整版介紹請看vuejs官網(wǎng)-components

props

props 又稱外部數(shù)據(jù)，一般用于組件中接受外來傳遞的數(shù)據(jù)，在組件使用時(shí)，通過標(biāo)簽全局屬性的方式進(jìn)行傳參。以下以引入完整版 vue.js 為例

HelloWorld.vue

<template> <div class='hello'> <h1>{{ msg }}</h1> </div></template><script>export default { name: 'HelloWorld', props: { msg: String }};</script>

數(shù)據(jù)的傳遞

main.js

import HelloWorld from ./HelloWorld.vuenew Vue({ template:`<HelloWorld msg='hello my world'/> //這樣只能傳遞字符串<HelloWorld :msg='ms'/> //這樣是傳遞變量，即 this.ms//也可用:傳遞函數(shù)名<HelloWorld :msg='fn'/> `， data:{ms: ’hello my world’ }, methods:{fn(){ ...} }})生命周期鉤子

在 Vue 中，將每個(gè)狀態(tài)轉(zhuǎn)變點(diǎn)稱之為鉤子，如實(shí)例創(chuàng)建后，和實(shí)例創(chuàng)建前，則實(shí)例創(chuàng)建就是個(gè)鉤子，對應(yīng)前后兩個(gè)階段，即是 beforeCreate 實(shí)例創(chuàng)建前，和 created 實(shí)例創(chuàng)建后，以下都是成對出現(xiàn)的，因此只需記一個(gè)就行。

該屬性是一個(gè)函數(shù)，在其對應(yīng)的時(shí)期被調(diào)用。

created 實(shí)例出現(xiàn)在內(nèi)存中 mounted（該鉤子處可進(jìn)行數(shù)據(jù)請求） 實(shí)例出現(xiàn)在頁面中 updated 實(shí)例更新了 destroyed 實(shí)例從頁面和內(nèi)存中消亡了

以上就是詳解Vue的options的詳細(xì)內(nèi)容，更多關(guān)于Vue的options的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！