vue准备知识-es6基础

Posted 2021-01-07 jjwxy

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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/

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:路飞学城VUE02>npm install jquery --save
02@1.0.2 D:路飞学城VUE02
`-- [email protected]3.3.1

npm WARN 02@1.0.2 No repository field.

D:路飞学城VUE02>


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基础的主要内容，如果未能解决你的问题，请参考以下文章

前端知识：es6 以及基础的 Vue

vue2.0 代码功能片段

本仓库是自己总结的前端开发一些基础知识，包括html5、css3、canvas、jQuery、less、ES6、webpack、Vue等，也包含了一些算法和数据结构方面的练习，同时也记录了自己工作中的

vue 基础知识随笔

Vue知识Vue基础语法

后端学习前端 Vue 框架基础知识