vue準備知識-es6基礎
阿新 • • 發佈：2018-09-20
jquer 其他 wip 源碼 加載速度 add itl reac class a 
目錄
- 知識
- let和const
- 模板字符串
- 箭頭函數
- 對象的單體模式
- 面向對象
一、知識
http://www.cnblogs.com/majj/
https://www.cnblogs.com/majj/category/1216624.html
阮一峰 es6
http://es6.ruanyifeng.com/
https://www.bootcdn.cn/
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 const1.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)
vue準備知識-es6基礎