在使用Vue.js時(shí),我們經(jīng)常要使用new Vue()來(lái)創(chuàng)建一個(gè)Vue實(shí)例。而在創(chuàng)建這個(gè)實(shí)例的時(shí)候,我們可以傳入一些參數(shù)來(lái)配置這個(gè)實(shí)例。下面就來(lái)詳細(xì)介紹下這些參數(shù)。
首先是el參數(shù),這個(gè)參數(shù)用來(lái)指定Vue實(shí)例所掛載的DOM元素。具體來(lái)說(shuō),就是一個(gè)css選擇器,可以是一個(gè)標(biāo)簽、class、id等等。比如:
<div id="app"></div> new Vue({ el: '#app' })
接下來(lái)是data參數(shù),這個(gè)參數(shù)用來(lái)定義Vue實(shí)例中的數(shù)據(jù)對(duì)象。這些數(shù)據(jù)可以被Vue實(shí)例中的各種方法或組件所訪問(wèn)和修改。例如:
new Vue({ el: '#app', data: { message: 'Hello Vue!' } })
除了data參數(shù),我們還可以使用computed、methods和watch等參數(shù)來(lái)定義Vue實(shí)例中的計(jì)算屬性、方法和觀察者。這些參數(shù)的使用方法類似data參數(shù),不再贅述。
另外,還有props、components、directives和filters等參數(shù),分別用來(lái)定義組件的屬性、組件和指令、過(guò)濾器等等。這些參數(shù)使用起來(lái)稍微有些不同,需要根據(jù)具體的場(chǎng)景進(jìn)行調(diào)整。
最后,還有生命周期鉤子參數(shù),包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed等。這些參數(shù)用來(lái)在Vue實(shí)例的各個(gè)生命周期階段加入我們自己的邏輯。例如:
new Vue({ el: '#app', data: { message: 'Hello Vue!' }, beforeCreate: function () { console.log('beforeCreate') }, created: function () { console.log('created') }, beforeMount: function () { console.log('beforeMount') }, mounted: function () { console.log('mounted') }, beforeUpdate: function () { console.log('beforeUpdate') }, updated: function () { console.log('updated') }, beforeDestroy: function () { console.log('beforeDestroy') }, destroyed: function () { console.log('destroyed') } })