Vue——邂逅Vue
Vue——Vue的基礎語法
Vue——Vue的組件化
Vue——slot_插槽的基本使用
1：爲什麼學習Vue
近兩年前端技術變革速度太快，vue不論針對web項目開發，網站製作，還是app，小程序開發，都越來越流行，其便捷性及易用程度都讓你不得不考慮去學習。如果僅僅還是傳統的各種cms開源代碼建站仿站，顯然你的技術已經跟不上了，如果你開發的項目數據交互較多，並且前後端分離明顯，那麼vue將會使你未來技術長足成長的不二選擇。如果你現在正在換工作,你會發現招聘前端的需求中, 10個有8個都對Vue有或多或少的要求。
2：Vue介紹
- Vue (讀音/vju:/ ,類似於view) ,不要讀錯。
- Vue是一個漸進式的框架,與其它大型框架不同的是，Vue 被設計爲可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠爲複雜的單頁應用提供驅動。
什麼是漸進式呢?
1：漸進式意味着你可以將Vue作爲你應用的一部分嵌入其中 ,帶來更豐富的交互體驗。
2：或者如果你希望將更多的業務邏輯使用Vue實現,那麼Vue的核心庫以及其生態系統。
3：比如Core+Vue-router+Vuex ,也可以滿足你各種各樣的需求。
- Vue有很多特點和Web開發中常見的高級功能
1：解耦視圖和數據
2：可複用的組件
3：前端路由技術
4：狀態管理
5：虛擬DOM
- Vue特點
組件化: 其中以 React 的組件化最爲徹底,甚至可以到函數級別的原子組件,高度的組件化可以是我們的工程易於維護、易於組合拓展。
天然分層: JQuery 時代的代碼大部分情況下是麪條代碼,耦合嚴重,現代框架不管是 MVC、MVP還是MVVM 模式都能幫助我們進行分層，代碼解耦更易於讀寫。
生態: 現在主流前端框架都自帶生態,不管是數據流管理架構還是 UI 庫都有成熟的解決方案。
這些特點,我們不需要一個個去記住 ,我們在後面的學習和開發中慢慢體會到
- 學習Vue的前提?
從零學習Vue開發,並不需要你具備其他類似於Angular，React ,甚至是jQuery的經驗。
但是你需要具備一定的HTML、 CSS、 JavaScript基礎。
3：Vue初體驗
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<h1> {{message}}</h1>
<h1> {{data}}</h1>
<ul>
<li v-for="item in movies">
{{item}}
</li>
</ul>
<h2>當前計數{{counter}}</h2>
<button v-on:click="add">+</button>,
<button v-on:click="sub">-</button>
</div>
<script>
const demo=new Vue({
el: '#app',
data: {
message: '你好vue',
data: "9點",
movies: ['戰狼','人民的名義','哪吒'],
counter: 0
},
methods: {
add: function(){
console.log("add執行");
this.counter++;
},
sub: function(){
this.counter--;
}
}
})
</script>
</body>
</html>
根據上面的代碼，我們得出下面的三張圖片的結論
進行測試結果如下
4：vue的生命週期
5：MVVM模型
View層:視圖層
- 在我們前端開發中，通常就是DOM層。其主要的作用是給用戶展示各種信息。
Model層:數據層
- 數據可能是我們固定的死數據，更多的是來自我們服務器，從網絡上請求下來的數據。在我們計數密的案例中，就是後面抽取出來的obj, 當然，裏面的數據可能沒有這麼簡單。
VueModel層:視圖模型層
-
視圖模型層是View和Model溝通的橋樑。
-
一方面它實現了Data Binding， 也就是數據綁定，將Model的改變實時的反應到View中
-
另一方面它實現了DOM Listener， 也就是DOM監聽，當DOM發生一些事件(點擊、滾動、touch等)時， 可以監聽到，並在需要的情況下改變對應的Data.
我們對上面的計數器模型作如下解釋
MVC和MVVM的關係圖解
