vue元件化的應用

前言：vue元件化的應用涉及到vue-cli的內容，所以在應用之前是需要安裝node和vue-cli的，具體如何安裝我就不一一贅述了。可能一會兒我心情好的時候，可以去整理一下。

1、應用的內容：在乙個頁面中，需要乙個固定的內容，這個內容可以多次引用，那麼就可以考慮把他分離出來，在下次需要的時候，實現引用就好。

比如：

"

text
" v-model="
content
" >
新增

通過輸入框新增列表項，原本是這樣的，但我可以考慮優化一下，把ul中的內容分離出去，再來引用它。作為乙個簡單的demo來學習。

2、父元件中給子元件命名，li-item

"

text
" v-model="
content
" >
新增

在元件中，必須有key值做索引，index值和content。

3、此時我們把分離的內容（子元件）寫在乙個新的叫liitem的頁面中。

"

deleteitem
"> }

子元件name，方便引用。子元件的值需要傳在props中作為記錄。在父元件中有需要呼叫。

4、然後在父元件中引入子元件的內容。

import liitem from

'@/components/liitem
'

在components裡面加入子元件的值。

components:

5、此時就分離出來了，如果還子元件上面還有相應的點選函式，那麼就需要在子元件中定義。比如上面的**中，有乙個刪除函式，即刪除新增的選項deleteitem，方法需要在methods中定義。

deleteitem () 

@delete="deleteitem"

deleteitem()

vue元件化專案應用的問題

最近一周都在回顧年前的專案，其中的乙個用vue做的專案，發現了很多可以優化的問題 元件化的拆分，記得之前剛入職工作的時候，部門老大給我們布置了乙個任務，就是拆分頁面，當時覺得有什麼還拆分的，不就是直接寫?來到北京之後，恰巧是公司業務比較急的時候，拿到需求之後，看到頁面就直接去寫了，因為業務的需要，當...

vue元件化程式設計應用2

寫幾個小案例來理解vue的元件化程式設計思想,下面是乙個demo.效果圖示 需求 header部輸入任務,進行新增,在list中顯示 list中每個item項,滑鼠移入時,背景變灰並顯示delete按鈕.點選按鈕可刪除該項 滑鼠移出時,恢復原樣 footer部 1.根據列表勾選狀態及數量顯示已完成數...

Vue的元件化

元件化是vue的精髓，vue就是由乙個乙個的元件構成的。vue的元件化設計到的內容又非常多，當在面試時，被問到 談一下你對vue元件化的理解。這時候又有可能無從下手，因此在這裡闡釋一下個人對vue的元件化的理解。一般來說，元件大致可以分為三類 頁面級別的元件。業務上可復用的基礎元件。與業務無關的獨立...