js数据类型
- 基本 number string boolean null undefined
- Object function
- Symbol(es6)
{} []
数组的变异(括号中的能改变原数组)
- 操作数组的方法 es4 (pop push unshift shift splice reverse sort)
indexOf lastIndexOf concat splice
forEach filter(过滤) map(映射) some every reduce (includes)
node > 8.5 版本 LTS标准版(项目中使用) current最新版(自己学习)
webstorm > 2017版本
框架和库
- 框架 vue
- 库 jquery underscore zepto animate.css
渐进式(渐进增强)
- vue全家桶 vuejs + vue-router + vuex
- 通过组合完成一个完整的框架
- 声明式渲染
- 组件系统
- 客户端路由(vue-router)
- 大规模状态管理(vuex)
- 构建工具(vue-cli)
MVC(backbone)单向闭环数据绑定
- model数据
- view 视图
- controller 控制器
MVVM(angular vue) 视图和数据的双向数据绑定
(view <==> ViewModel <==> model)
- model数据(javascript对象)
- view 视图(dom)
- ViewModel 视图模型(Dom Listener && Data Bindings)
Object.defineProperty(es5)没有替代方案
- 不支持ie8及以下
es5实现双向数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>defineProperty</title>
</head>
<body>
<input type="text" id="input">
<p id="p"></p>
<script>
let obj = {};
let temp = {};
Object.defineProperty(obj, 'name', {
// configurable: true, // 是否可删除
// writable: true, // 是否可赋值
// enumerable: true, // 是否可枚举
// value: 1, //初始值
get(){ // 取obj的name属性时会触发get方法
return temp['name'];
},
set(val){ // 给obj的name属性赋值时会触发set方法
temp['name'] = val; //改变temp的结果
input.value = obj.name; //将值赋给输入框
p.innerText = val; //把输入框的值赋给p
}
});
// delete obj.name; //{}
// obj.name = 123; //{name: 123}
// for (let key in obj){
// console.log(key); //name
// }
input.value = 'lenhart'; //{1}页面加载时会调用get方法 相当于controller
input.addEventListener('input', function () {//{2}等待输入框变化
obj.name = this.value; //{3}当值变化是会调用set方法
});
</script>
</body>
</html>
安装vue
- cdn的方式
- npm安装
cd + 文件名 //change directory 直接用鼠标把文件夹拖过去
npm init //即可以初始化项目,又可以恢复node_modules
npm init -y //使用文件夹的命名快速初始化(不可出现中文、空格等非法字符)
npm init vue
思想转换:操作dom转变为操作数据