Vue基础
想
### **Vue基础一**
##### **1. 前端框架发展历史**
```
html
html [1990]----> html5 [2008.1.12]
css
css 1.0 1996
css 2.0 1998
css 3.0 2001
EcmaScript
1997年诞生
2015 EcmaScript 2015
2016 EcmaScript 2016 dart语言 vs javascript
```
```
随着前端项目的逻辑越来越复杂和难以维护，那么前端这边引进了后端的架构思想（ MV* ）
M Model 数据层
V View 视图层
C Controller 控制器 ( 业务逻辑 ) MVC
P Presenter 提出者（ Controller 改名得来的 ） MVP
VM ViewModel 视图模型（ 业务逻辑 VM 是 由 P 改名得来的） MVVM
Vue 1.0 MVVVM 2014/07
Vue 2.0 MVVM 2016/09
React 2012 不太认可前端MVC这种架构思想， 你可以将React单纯看做是MVC中V
前端流行
移动 web && hybird app( 混合app )
app
1. native app ( 安卓 ios java ME)
2. webapp ( 应用在浏览器中的app )
3. Hybird app ( 混合app )
1. webapp 嵌入 第三方原生应用库（ 可以访问原生设备（手机） 的接口权限，比如：照相机 ）
2016年：
1. es6
2. vue2.0
3. angular2.0x
1. 微信小程序 / 微信小游戏
```
##### **2. js框架帮助开发者写js逻辑代码**
- 渲染数据
- 操作DOM
- 操作cookie等存储机制api
难题:
如何高效的操作dom、渲染数据是一个前端工程师需要考虑的问题，而且当数据量大，流向较乱的时候，如何正确使用数据，操作数据也是一个问题？？？
解决:
而js框架对上述的几个问题都有自己趋于完美的解决方案
开发成本降低。高性能高效率
唯一的缺点就是需要使用一定的成本来学习
##### **3.初识Vue**
1. vue版本
- vue 1.0 2014年
- vue 2.0 2016年
- vue 3.0【 试用版 】 2019年国庆
2. vue源代码 【 思维 】
- 匿名函数
```
javascript
(function (形参1，形参2) {
/* 你的代码 */
})(实参1，实参2)
```
- 好处
- 1. 防止全局作用域
- 2. 防止命名冲突
- 3. 防止一些脚本的攻击
- 4. 封装js库基本上都是用它来完成
##### **4.数据驱动视图**
- 意义： 当数据发生改变时，视图也会随之改变
- 我们从现在开始，不在关注v的变化了，我们关注data
##### **5.双向绑定**
```
<!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">
<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>
</html>
```
##### **6. new Vue() 得到的结果**
我们是以标签化呈现的，<Root></Root> ，我们称之为 : <u>根实例组件 </u>
##### **7.react 2013年开源**
浙公网安备 33010602011771号