目录
- 知识
- 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 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 [email protected]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
`-- [email protected]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)
原文地址：https://www.cnblogs.com/jjwxy/p/9679905.html
时间： 2024-11-02 22:41:02