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> ，我们称之为： 根实例组件