Vue 學習筆記介紹

原帖完整收藏於it老兵驛站，並會不斷更新。

17年上半年，學習了一些vue的知識，但是現在反觀回去，感覺在那個時候，因為著急做專案，很多東西消化的不夠清楚，這一點同樣體現在對angular的學習上，現在有點時間進行修整，那就花點時間去好好整理一下。

大體翻譯：vue是乙個進步的框架（progressive framework），用來構建使用者介面。它不像別的大而全的框架，由很小的部分，逐步增量吸收完善。它的核心庫僅僅專注於view層，很容易使用，或者說是和專案的其他庫整合。

這段前言，好像是第一次這麼清楚地讀明白，枉費了作者的一番心血。

在你的index.html中引入

這個是開發版本，在控制台會有一些有用的輸出。

或者：

生產版本，優化了大小和速度。

還有一些別的安裝幫助，在installation ，初學者不建議立刻使用vue-cli（類似乙個腳手架），這樣你會搞不清原理，但我相信，大多數的人還是會立刻去使用這個，因為立刻可以做出一些東西來，能做出東西來就行，誰會在意什麼原理不原理呢？

js檔案中：

data:

})to see my dynamically bound title!

data: })

data:

}) data: ,,]

}})reverse message

data: ,

methods:

}})data:

})元件的概念，是乙個預定義好的一些選項的vue的例項。

定義乙個元件，語法如下：

// define a new component called todo-item
vue.component('todo-item', )

其實，這個就相當於自定義了乙個http元素，並且這個元素是在js中得到解釋的，解釋成html原生的元素。這樣可以把它組裝在另外乙個元件的模板裡：

但是這樣，這個元件的內容是固定的，這樣沒有太大意義，所以，這個內容應該是乙個變數，由使用者來定義，所以，這裡又設計乙個props，來定義這個變數，如下：

vue.component('todo-item', }'
})

now we provide each todo-item with the todo object

it's representing, so that its content can be dynamic.

we also need to provide each component with a "key",

which will be explained later.

-->

vue.component('todo-item', }'
})

data: ,,]

}})

Vue 學習筆記 介紹