這篇文章主要介紹了vue 元件使用中的一些細節點，大概有兩大細節點，本文透過基礎實例給大家介紹的非常詳細，需要的朋友參考下吧
細節一
基礎範例
#運行結果:
以上大家都懂，這邊就不多說，回到程式碼裡，有時候我們需要tbody 裡面每一行是子元件，那我們程式碼可以怎麼寫呢？我們可以這樣寫，定義一個全域元件，如下：
然後我們在body 裡面可以這麼呼叫:
運行結果:
可以看到row 是有列印出來了，但它其實裡面沒有任務內容，那我們的問題出在哪裡？回到程式碼我們發現我們在創建vue 實例的時候沒有指定要掛載的點，所以我們透過el 來指定vue 接管的Dom ,如下:
屬性來解決這個問題。很簡單， tbody 裡面只能寫 tr, 那我們就都寫 tr，可是實際上我們要顯示 tr 並不是就真的只顯示 tr 空的內容，我們需要顯示 row 元件的內容，那怎麼做？
我們可以在tr 多一個屬性is 讓它等於row, 如下:
同樣我們使用 ul, select 標籤的時候，也可以用這種方法。
細節二
基礎範例
##我們定義了一個元件row，裡面有段文本，如果我們想把這段文本單獨提取出來用變數表示，那麼你很有可能會這樣寫:
看似完美，在開啟瀏覽器運行你會發現，bug 正向你招手:
主要意思是data 是要一個函數，而不是一個物件，什麼情況，在根元件，也就是最外層vue 的實例，我們透過物件定義是ok 的，但在非根組件的子組件這樣定義是不行滴。 data 定義要求是一個函數，同時這個函數要求回傳一個對象，如下:
#運行結果:
這樣問題就解決啦。
之所以這麼定義，原因是一個子元件不像根元件只被調用一次，而是可以多次調用，那麼每個子元件的資料我們不希望和<a href="http://www.php.cn/java/java-alibaba-qita.html" target="_blank">其它</a>的子元件產生衝突或說每個子元件都應該有一個自己的資料域，透過函數傳回一個物件就可以實現這個需求。
細節三
基礎範例
#運行，點擊彈出click，沒毛病。 vue 不建議我們在程式碼裡面操作 Dom, 但是在處理一些極其複雜的 動畫效果，我們還真得操作 Dom, 那麼在 vue 中如何操作 Dom 呢？我們可以透過ref 引用的方式，如下:
這時候我們有個需求，就是點擊p 的時候，把裡面的內容印出來，我們可以透過引用來取得p節點，然後列印p 裡面的內容即可:
#運行結果:
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是vue 元件使用中的一些細節點_vue.js的詳細內容。更多資訊請關注PHP中文網其他相關文章！
