vue - 准备知识

一、知识

http://www.cnblogs.com/majj/
https://www.cnblogs.com/majj/category/1216624.html

阮一峰 es6
http://es6.ruanyifeng.com/

http://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 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>

三、模板字符串

var str = `hahaha${a}heiheihei${b}`

<!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 Animal(name,age){

        this.name = name

        this.age = age

    }

    Animal.prototype.showName = function(){

        console.log(this.name)

    }

　　var dog = new Animal("wangwang",18)

es6 构造方法的方式创建对象

    class Animal2{

        constructor(name,age){

            this.name = name

            this.age = age

        }

        showName(){

            console.log(this.name)

        }

    }

　　var d = new Animal2("张三",19)

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<body>

<script type="text/javascript">

    // es5 构造函数的方式创建对象

    function Animal(name,age){

        this.name = name

        this.age = age

    }

    Animal.prototype.showName = function(){

        console.log(this.name)

    }

    Animal.prototype.showAge = function(){

        console.log(this.age)

    }

    var dog = new Animal("wangwang",18)

    console.log(dog) // Animal {name: "wangwang", age: 18}

    dog.showName()

    dog.showAge()

    // es6 方式创建对象

    class Animal2{

        constructor(name,age){

            this.name = name

            this.age = age

        }

        showName(){

            console.log(this.name)

        }

    }

    var d = new Animal2("张三",19)

    console.log(d) // Animal2 {name: "张三", age: 19}

    d.showName() // 张三

</script>

</body>

</html>