vue文件可以直接寫(xiě)template標(biāo)簽？如果文件格式?jīng)]有問(wèn)題的話(huà)，可以直接寫(xiě)這個(gè)標(biāo)簽vue怎樣實(shí)現(xiàn)hover效果？使用Vue來(lái)實(shí)現(xiàn)鼠標(biāo)懸停效果?？梢允褂檬录幚砥鱲-on指令（簡(jiǎn)寫(xiě)為：@）來(lái)完成。為

vue文件可以直接寫(xiě)template標(biāo)簽？

如果文件格式?jīng)]有問(wèn)題的話(huà)，可以直接寫(xiě)這個(gè)標(biāo)簽

vue怎樣實(shí)現(xiàn)hover效果？

使用Vue來(lái)實(shí)現(xiàn)鼠標(biāo)懸停效果。

可以使用事件處理器v-on指令（簡(jiǎn)寫(xiě)為：@）來(lái)完成。為標(biāo)簽綁定mouseenter以及mouseleave事件即可。hover是css中的選擇器，用于選擇鼠標(biāo)指針浮動(dòng)在上面的元素。所以a:hover可用于設(shè)置當(dāng)鼠標(biāo)懸停在超鏈接之上時(shí)超鏈接的樣式。

vue為什么必須包含div？

我們?cè)诔鯇W(xué)Vue時(shí)，第一個(gè)上手的例子基本都是 new Vue({el:'#app'})，但是為什么Vue實(shí)例只能掛載在一個(gè)div上呢？同樣的當(dāng)我們開(kāi)始寫(xiě)第一個(gè)Vue頁(yè)面的時(shí)候，我們?cè)噲D在template標(biāo)簽下寫(xiě)兩個(gè)div，Vue提醒我們只能寫(xiě)一個(gè)元素，但是為什么只能有一個(gè)元素呢？很多時(shí)候我們都已經(jīng)習(xí)以為常，但是卻說(shuō)不上來(lái)為什么。

　　筆者入坑Vue也有一段時(shí)間了，對(duì)Vue也算了解，Vuex、Vue-Router也用了不少；但是前幾天一看到這個(gè)面試問(wèn)題卻感覺(jué)一下子回答不上了，想來(lái)每次寫(xiě)代碼也都是拿來(lái)就用，也沒(méi)有仔細(xì)的思考過(guò)里面的原因；每每報(bào)錯(cuò)了就換一種寫(xiě)法，能用就行，僅此而已。

這個(gè)問(wèn)題要從兩個(gè)方面來(lái)說(shuō)：

當(dāng)我們實(shí)例化Vue的時(shí)候，填寫(xiě)一個(gè)el選項(xiàng)，來(lái)指定我們的SPA入口：　　如果我們把代碼改造一下，變成兩個(gè)入口。

這時(shí)候會(huì)發(fā)現(xiàn)只有第一個(gè)div被渲染出來(lái)，而第二個(gè)div還是原封不動(dòng)。我們簡(jiǎn)單來(lái)看一下Vue的源碼是如何實(shí)現(xiàn)的可以看到掛載函數(shù)傳了一個(gè)el參數(shù)，這個(gè)參數(shù)可以是string類(lèi)型，也可以是一個(gè)element元素，也就是dom節(jié)點(diǎn)。最重要的是el el ampamp query(el)這一行代碼，那就繼續(xù)看一下query函數(shù)是做什么的：首先query函數(shù)判斷是否是string類(lèi)型，如果是string類(lèi)型，就通過(guò)querySelector函數(shù)獲取頁(yè)面中的元素，但是querySelector僅僅返回匹配指定選擇器的第一個(gè)元素，所以這就解釋了為什么第二個(gè)div會(huì)原封不動(dòng)。

　　Vue其實(shí)并不知道哪一個(gè)才是我們的入口，因?yàn)閷?duì)于一個(gè)入口來(lái)講，這個(gè)入口就是一個(gè)Vue類(lèi)，Vue需要把這個(gè)入口里面的所有東西拿來(lái)渲染、處理，最后再重新插入到dom中。如果同時(shí)設(shè)置了多個(gè)入口，那么vue就不知道哪一個(gè)才是這個(gè)類(lèi)。