vue 自學筆記(1)

從to do list  開始 

　　　　一: 安裝 

　　　　　1: 導入cdn

　　　　　　　　　　<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
　　　　二: 建立一個vue實例
　　　　　　　　　　在script中建立vue 對象
　　　　　　　　　　全部的 Vue 應用都是從建立一個實例開始的，它經過函數建立
　　　　　　　　Vue

　　　　　　　　　　從這個實例建立後，Vue 框架就經過這個vm實例管理它能夠管理的內容。但它管理的是哪一部分呢？

　　　　　　　　　　

　　　　　　　　　　在 html 中，有一個 id 爲 app 的 div 盒子，想必你也知道了，這個 id 爲 app 的內容就是被vm實例管理的頁面內容。

　　　　　　　　　　

　　　　　　　　　　

　　　　　　　　　　　　

　　　　　　　　咱們將 app 掛載到了vm實例上，如今vm就能夠正式接管 app 下全部的內容了。vm中的數據寫在 data 中， 這些數據也就是流向頁面的數據，頁面和數據相互影響。

　　　　　　　　頁面的將數據呈如今頁面的方式又是什麼？Vue提供了不少方式，如今咱們在 demo 中使用最經常使用的小鬍子語法。

　　　　　　　　

 

 

　　　　三:建立第一個組件
　　　　　　組件開發是使用框架開發的特點，對於頁面能夠重複使用的部分，咱們能夠將其樣式和功能抽離出來，以便之後反覆使用。這裏的 TodoList 的列表部分咱們能夠抽離成獨立的組件。


　　　　　　

　　　　組件分爲全局組件和局部組件，這裏咱們使用哪一種方式均可以。組件的 props 中的內容，是父組件傳遞進來的值。 這時，父組件就能夠作，經過直接在子組件上寫屬性傳值。

　　

　　　　三:實現單機刪除todo

　　　　

咱們想實現單擊 item 就刪除該項，以前在渲染 TodoItem 的時候，咱們就給子組件綁定了一個 handleItemClick 方法。那咱們能直接在這個方法裏寫一個方法，把父組件的 state.list 中的一項刪除掉麼？

很顯然是不能夠的，這個時候咱們須要明確單向數據流的概念。

 

 

　　　　四:單項數據流

　　　　　　　單向數據流目的

 　　　　　　

通俗的來說，父組件能夠給子組件傳值，但子組件不能夠直接去修改父組件的值。React 中也是這種設計思想。

其實這樣作是一種安全的作法，在項目較大，子組件層級過多的狀況下，層層傳遞，不少子組件使用一個父組件的傳值，如果子組件直接改動父組件的值，就可能會形成其餘子組件依賴的值出現問題。

 

　　　　　　五:傳遞數據

 

例如,咱們但願把父組件Home.vue的數據傳遞給子組件，例如Header.vue.

 

能夠經過props屬性來進行傳遞.

 

傳遞數據三個步驟：

 

 

 

　　　　　　傳遞數據總結