视频地址
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 -ynpm install vue
初始化会产生一个pacakge.json的文件这个文件用来描述项目的依赖,不能有大写 特殊字符 中文,而且不要和安装的包的名字相同
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 不支持returnarr.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(''));