视频地址

https://pan.baidu.com/s/1sndXz3Z?fid=1022860228744596

笔记

VUE数据驱动（主要操作的是数据）

• 操作DOM

JS数据类型

• 基本 number string boolean null undefined
• object function
• Symbol(es6)

数组的变异(括号中的能改变原数组)

• 操作数组的方法 (pop push unshift shift splice reverse sort) indexOf lastIndexof concat slice

forEach filter(过滤) map(映射) some every reduce (includes find es6)

node版本>8.5 webstorm(vscode,sublime) > 2017以上版本

框架和库

• 框架 vue 拥有完整的解决方案 我们写好人家调用我
• 库 jquery underscore zepto animate.css 我们调用他

渐进式 （渐进增强）

• vue全家桶 vuejs + vue-router + vuex + axios
• 通过组合 完成一个完整的框架

MVC（backbone） 单向

• model数据
• view 视图
• controller 控制器

MVVM(angular,vue) 双向的

• model数据
• view 视图
• viewModel 视图模型

Object.defineProperty(es5)的没有替代方案

• 不支持ie8<=

安装vue

• cdn的方式
• npm安装 node package manager

npm init -y
npm install vue

初始化会产生一个pacakge.json的文件这个文件用来描述项目的依赖，不能有大写 特殊字符 中文，而且不要和安装的包的名字相同

mvvm

https://github.com/DMQ/mvvm

// 配置npm 和 语法
// file->setting中配置 npm
// file->setting中配置 reactJSX
// http://www.jetbrains.com/webstorm/download/#section=windows
//console.log('ok');
let arr = [1,2,3,4,5];
arr.b = '100';
for(let i =0;i<arr.length;i++){ // 编程式
console.log(arr[i]);
}
//面试：forEach,for in, for,for of的区别
//1) forEach 不支持return
arr.forEach(function (item) { // 声明式（不关心如何实现）
console.log(item);
});
for(let key in arr){ // key会变成字符串类型，包括数组的私有属性也可以打印出来
console.log(key);
}
let obj = {school:'zfpx',age:8}; //Object.keys将对象的key作为新的数组
//             ['school','age']
for(let val of Object.keys(obj)){ // 支持return 并且是值of数组（不能遍历对象）
console.log(obj[val]);
}
 
//2)filter 是否操作原数组： 不  返回结果： 过滤后的新数组   回调函数的返回结果： 如果返回true 表示这一项放到新数组中      (删除)
let newAry = [1,2,3,4,5].filter(function (item) {
return item>2&&item<5;
});
console.log(newAry);
//3)map 映射 将原有的数组映射成一个新数组 [1,2,3] <li>1</li><li>2</li><li>3</li>                      (更新)
// 不操作原数组  返回新数组  回调函数中返回什么这一项就是什么
let arr1 = [1,2,3].map(function (item) {
return `<li>${item}</li>`// ``是es6中的模板字符串 遇到变量用${}取值
});
console.log(arr1.join(''));