vue准备知识-es6基础
目录
- 知识
- let和const
- 模板字符串
- 箭头函数
- 对象的单体模式
- 面向对象
一、知识
http://www.cnblogs.com/majj/
https://www.cnblogs.com/majj/category/1216624.html
阮一峰 es6
http://es6.ruanyifeng.com/
https://www.bootcdn.cn/
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
http://www.cnblogs.com/majj/ 前端 VUE 博客每个人都要去写! html(语义化,除了语义,其他得都没什么) 结构 + css 样式表现 排版,布局 + js 行为 (ECMAScript)(JSDOM) (BOM) jquery(操作) bootstrap django 课程 --》 数据要展示 前端框架: react Facebook公司开发 后台硬 难 angular 谷歌公司 更新快 vue 语言简单, 三个框架类似 vue (中国人,尤雨溪) http://www.cnblogs.com/majj/p/9045243.html ---------------------------------------------- 前置得准备学习: ES6简单语法: es5 var 强类型 es6 let const 1.let和const 2.模板字符串 3.箭头函数 4.对象得单体模式 5.es6的面向对象 6.模块化 Visual Studio Code 阮一峰 es6 http://es6.ruanyifeng.com/ jquery 源码 http://www.bootcdn.cn/ http://www.bootcdn.cn/jquery/ 。。。。。 https://cdn.bootcss.com/jquery/3.3.1/jquery.js jquery 源码 ---------------- Node.js http://www.cnblogs.com/majj/p/9042541.html 原生的ajax .. xmlhttprequest js 能做什么 io不行, 操作 不能操作文件 os;前端与后台最大的区别! js 的引擎;js 会不会 django 前后端分离的项目; 服务器 不会运行 js ECMA6 7 8 上升 任何一门语言 运行在平台上, Nodejs 服务器的语言!! ------- NPM... 类似 python 的 pip node-v6.10.3-x64.msi 下载!! node -v v6.10.3 自带npm npm -v 3.10.10 $ sudo npm install npm@latest -g ---- Git Bash Here -------------- 安装包; 下载; 类似jquery; ---- npm init ------ Sublime Text 下载 ----- ... npm 下载 jquery npm init ------- nodejs 自带npm npm 一旦初始化 生成 package.json 下包 一定要初始化 npm init npm install jquery@1.2.1 --save npm install jquery --save npm uninstall jquery --save D:\路飞学城\VUE\02>npm install jquery --save 02@1.0.2 D:\路飞学城\VUE\02 `-- jquery@3.3.1 npm WARN 02@1.0.2 No repository field. D:\路飞学城\VUE\02> npm install bootstrap --save ----- "dependencies": { "bootstrap": "^4.1.1", "jquery": "^3.3.1", "swiper":"^4.2.6" } 没包 直接 npm install 根据依赖 下载 资源 --------------------- 服务器 不允许 传太大的文件 github 不允许 上传100M以上的代码 上传项目时,会忽略node_modules 。。。。 先npm install 如何跑git 上的代码 npm install 通过 git 操作 到 github 上面! npm run dev localhost:8080 http://localhost:8088/#/ VUE 主要用来做 移动端 PC端也没有问题!! ------ 负载均衡 服务器挂在任何的地方 就怕一个挂了 大的虚拟服务器 github .. 当出现在挂的时候,就处理了! ------------------ webpack 介绍 http://es6.ruanyifeng.com/#docs/module export import 命令 一个js 就是一个模块 <script></script> 同步 <script> import add from './js/main.js' </script> 浏览器 不识别 import add from 博客。。 webpack 打包成static/ css.js/ 写的在src 里面; webpack 不仅仅打包,编译 es6代码; "babel-loader": "^6.0.0", 工具 能把 不同浏览器 编译成 识别es6 http://babeljs.io/ // labeljs 功能 let person={ name:"zz", fav:()=>{} } "use strict"; var person = { name: "zz", fav: function fav() {} }; class Animal{} var Animal = function Animal() { _classCallCheck(this, Animal); }; 工具 编译成 浏览器 都能识别的!! 模块化; ------- amd 异步模块定义的 nodejs 用的是commonjs -------- npm webpacge 在线网上视频 简单用, ---- vue介绍; css 布局。。。 DOM 超快虚拟DOM ; 比js 加载速度快多了; VUE官网; 基础知识得打好! 基础讲2天,作业,学会看官网 https://cn.vuejs.org/ 博客。。 MVVM 谷歌商店 Vue Devtools -------------- VUE 得一个小项目; ƒ Vue (options) { if ("development" !== 'production' && !(this instanceof Vue) ) { warn('Vue is a constructor and should be called with the `new` keyword'); } this._init(options);… 构造函数 过博客;;;vue 得使用。。
二、let和const
let 声明的变量 块级作用域 局部的 不能重复声明 不存在变量提升
const 声明常量 一旦声明 立即初始化 不能重复声明
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <script type="text/javascript"> // 1. let 声明的变量是 块级作用域 局部的 不能重复声明 { // let a=12; let a=13 var b=12 var b=13 } console.log(a) console.log(b) var a=[] for(var i=0; i<10; i++){ a[i] = function(){ console.log(i) } } a[6]() // 10 注意var 是全局的 let 局部的 var a=[] for(let i=0; i<10; i++){ a[i] = function(){ console.log(i) } } a[6]() // 6 console.log(foo) // undefined var foo = 2 console.log(bar) // let 不存在变量提升 let bar = 2 const x = 2
// const声明常量,一旦声明,立即初始化,不能重复声明 </script> </body> </html>
三、模板字符串
let name='alex'
let s = `hello ${name}, welcome`
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <script type="text/javascript"> var a = 1 var b = 2 // var str = "哈哈哈" + a + "嘿嘿嘿" + b // 哈哈哈1嘿嘿嘿2 var str = `hahaha${a}heiheihei${b}` // hahaha1heiheihei2 console.log(str) </script> </body> </html>
四、箭头函数
function(){} === () => {}
坑:
1. this 指的是定义时的对象 Window ,不再是使用时的对象。
2. 第二个坑 arguments 不能用了。
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <script type="text/javascript"> var f = function(a){ return a } console.log(f(3)) // 3 var f = (a) => { return a } console.log(8) // 8 // function(){} === () => {} // 字面量方式创建对象 var person1 = { name:"alice", age:20, fav:function(){ console.log("喜欢 run") console.log(arguments) // Arguments(3) [1, 2, 3] console.log(this) // 使用时定义的对象 {name: "alice", age: 30, fav: ƒ} console.log(this.name) } } console.log(person1.name) // alice person1.fav() // 喜欢 run person1.fav(1,2,3) // 1.一个坑 this 定义时的对象 var person2 = { name:"egon", age:32, fav:()=>{ //如果使用了箭头函数,this指的是定义时所使用的对象,指向了window console.log("-->",this) // Window } } person2.fav() //2.第二个坑 arguments 不能用了 var person3 = { name:"alex", age:23, fav:()=>{ console.log(arguments) //arguments is not defined } } person3.fav(1,2,3) </script> </body> </html>
五、对象的单体模式
function(){} === ()=>{} === (){}
fav(){
console.log(this)
}
为了解决箭头函数this指向的问题 推出来一种写法 对象的单体模式
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <script type="text/javascript"> var person1 = { name:"张三", age:18, fav:function(){ console.log(this) } } person1.fav() // {name: "张三", age: 18, fav: ƒ} var person2 = { name:"李四", age:19, fav:()=>{ console.log(this) } } person2.fav() // Window // 对象的单体模式 var person3 = { name:"王五", age:23, fav(){ console.log(this) } } person3.fav() // {name: "王五", age: 23, fav: ƒ} </script> </body> </html>
六、面向对象
es5 构造函数的方式创建对象
function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype.showName = function(){
console.log(this.name,this.age)
}
var p1 = new Person('alex', 20)
p1.showName()
es6 构造方法constructor的方式创建对象
class Person{
// constructor 构造方法,{}后面不能跟,
constructor(name,age){
this.name = name
this.age = age
}
showName(){
console.log(this.name, this.age)
}
}
var p2 = new Person('davis', 120)
p2.showName()
<!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> <script> // es5 构造函数的方式创建对象 function Person(name,age){ this.name = name; this.age = age; } Person.prototype.showName = function(){ console.log(this.name,this.age) } var p1 = new Person('alex', 20) p1.showName() // es6 方式创建对象 class Person{ // constructor 构造方法,{}后面不能跟, constructor(name,age){ this.name = name this.age = age } showName(){ console.log(this.name, this.age) } } var p2 = new Person('davis', 120) p2.showName() </script> </body> </html>
person.fav(1,2,3)