Vue基礎一
MVC
M Model 數據層
V View 視圖層
C Controller 控制器 ( 業務邏輯 ) MVC
P Presenter 提出者（ Controller 改名得來的 ） MVP
VM ViewModel 視圖模型（ 業務邏輯 VM 是由 P 改名得來的） MVVM
參考：MVC,MVP 和 MVVM 的圖示 - 阮一峯的網絡日誌
一、Vue發展歷史
Vue 1.0 MVVM 2014/07
Vue 2.0 MVVM 2016/09
作者：尤雨溪
Vue.js是一個MVVM框架
Vue.js它是一個單項數據流的框架
Vue.js是一個Js漸進式框架
二、Vue源代碼
匿名函數
(function (形參1，形參2) {
/* 你的代碼 */
})(實參1，實參2)
(function ( global,factory ) {
/*
! global是瀏覽器的全局對象 window
*/
global.MiniVue = factory();
})( this,function () {
'use strict';//啓用嚴格模式
function MiniVue (options) {
if (!(this instanceof MiniVue)) {
warn('MiniVue is a constructor and should be called with the `new` keyword');
}
this._init(options);
}
MiniVue.prototype._init = function ( options ) {
console.log( options );
document.querySelector( options.el ).innerHTML = options.data.msg;
}
return MiniVue;
});
好處：
1.防止全局作用域
2.防止命名衝突
3.防止一些腳本的攻擊
4.封裝js庫基本上都是用它來完成
三、Hello Vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"> {{ msg }} </div> <- V View ->
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
new Vue({
el: '#app', // 掛載：將一個已有的DOM元素的選擇器掛載在構造函數的選項上,也確定了vue實例作用範圍
data: {
msg: 'hello vue' // M Model
}
}); // VM ViewModel 實例化Vue的對象
</script>
</html>
四、Vue數據驅動視圖
- 意義：當數據發生改變時，視圖也隨之改變
- 我們從現在開始，不在關注v的變化了，我們關注data
五、Vue雙向綁定
<body>
<div id="app">
<input type="text" v-model = "msg">
<p> {{ msg }} </p>
</div>
</body>
<script src="../../../lib/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: 'Hello Vue'
}
})
</script>
new Vue() 得到的結果，我們是以標籤化呈現的，<Root></Root> ，我們稱之爲： 根實例組件