vue准备知识-es6基础

目录

  1. 知识
  2. let和const
  3. 模板字符串
  4. 箭头函数
  5. 对象的单体模式
  6. 面向对象

一、知识

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

vue准备知识-es6基础的相关文章

ES6基础整理（1）

刚开始用vue,很多时候我们都会把ES6这位大兄dei加入我们的技术栈中.但是ES6那么多那么多特性,我们真的需要全部都掌握吗?掌握好常用的.有用的这个可以让我们的开发快速起飞. 接下来我们就聊聊ES6基础常用的知识的总结. es6中的声明变量的方式: // let // 1. let声明变量不可以进行重复声明 // 2. let声明的变量有块级作用域 // const // 声明的叫做常量 // 1. const声明变量不可以进行重复声明 // 2. const声明页有块级作用域 // 3.

知识图谱基础之RDF，RDFS与OWL

https://blog.csdn.net/u011801161/article/details/78833958 https://blog.csdn.net/baidu_15113429/article/details/82144731 RDF:单纯的三元组,没有本体概念,如果构建一个公司的知识图谱,公司的董事和中层以及普通员工都是员工,你在查找员工的时候,就需要把董事以及各个职位的人都查找出来. RDFS:会添加本体,例如员工下面有董事以及中层和普通员工,这样就能直接通过抽象的员工而不用访问

ES6基础知识（Reflect）

<!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" con

Vue 2.6版本基础知识概要(一)

挂载组件 //将 App组件挂载到div#app节点里 new Vue({ render: h => h(App), }).$mount('#app') VueComponent.$mount 封装组件 <template> <div id="app"> Hello Vue </div> </template> <script> export default { name: 'app', } </script>

ES6 基础知识-----简记 let const

ES5中只有函数作用域和全局作用域,声明变量使用var,在es6中添加声明变量 let const let 声明块级作用域变量, let 不存在变量提升 var命令会发生"变量提升"现象,即变量可以在声明之前使用,值为undefined.这种现象多多少少是有些奇怪的,按照一般的逻辑,变量应该在声明语句之后才可以使用. 为了纠正这种现象,let命令改变了语法行为,它所声明的变量一定要在声明后使用,否则报错. var 声明的变量可以在声明之前使用,是undifind,存在变量提升现象,le

vue快速入门~必备基础知识

和JQ完全操作dom不同,他是通过一些特殊的html语法,将dom和数据绑定,创建了这种绑定,DOM和数据保持同步,一更新数据,dom自动更新. vue.js是javascript MVVM库(model-view-ViewModel) ViewModel是vue.js核心,它是一个vue实例.vue实例作用在某个html元素上,可以是body,也可以是某个指定id的元素. vue.js可以实现双向绑定.双向绑定是什么呢?两个'向'分别是UI界面和js里的vue实例的data属性,改变其中的一个

es6基础知识

1.超引用:(...) 用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中 function fun(...args){ console.log(args); //[1,2,3,4,5,6] args.push(7); console.log(args); //[1,2,3,4,5,6,7] }fun(1,2,3,4,5,6) 2.解构赋值: 赋值: var a = 10,b = 20,c = 30; console.log(a,b,c) //10 20 30 解构: //数组的格式 var

ES6基础知识汇总

1.如何理解ECMAScript6? ECMAScript是什么.ECMASCript的作用 2.新增let关键字 let的用途 3.关键字const const作用.传址赋值 4.解构赋值 解构赋值是什么,解构赋值方式 5.字符串新特性 模板字符串.标签模板

ES6基础知识（Generator 函数应用）

1.Ajax 是典型的异步操作,通过 Generator 函数部署 Ajax 操作,可以用同步的方式表达 function* main() { var result = yield request("http://some.url"); var resp = JSON.parse(result); console.log(resp.value); } function request(url) { makeAjaxCall(url, function(response){ it.nex