vue第一天

安装 Nodejs

• 验证安装成功

  • 命令：node -v
  • 命令：npm -v

• Nodejs 简介

  • Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境
  • Npm 是 Node.js 的包管理器

• Npm 简介

  • npm install 包名（从 npm 中下载包）
  • npm init 生成 package.json（npm 的配置文件）
  • npm install 包名 --save（把安装的包写入配置文件的 ‘dependencies’ 中）
  • npm install 根据 package.json 文件中的配置自动安装项目依赖的包
  • npm install 包名 --save-dev（把安装的包写入配置文件的 ‘devDependencies’ 中）
  • npm install 包名 -g （-g 指 global，全局安装，在任何文件夹下都可以直接使用）

ES5

• ES 指的是 ECMAScript
• 实现有 javascript / actionscript
• ES 版本
  • ES3
  • ES5
  • ES6（ES2015） / 7
• ES5
  • ie9 开始支持 ES5，但不支持 ES5 的严格模式
  • ES5 的严格模式
    • 在 JS 文件或是函数的顶部添加 "use strict" 即可启用严格模式
    • 未声明的变量赋值抛出一个 ReferenceError, 而不是创建一个全局变量
    • 不止一次对对象字面量分配相同的属性会抛出 SyntaxError
    • 使用 with 语句抛出 SyntaxError
  • JSON
    • stringify()
    • parse()
  • 附加对象
    • !!!
  • 额外的数组方法
    • indexOf
    • every
    • some
    • forEach
    • map
    • filter
    • isArray

ES6

• babel 转码器

  • 是一个把 ES6 转换成对等功能的 ES5 代码的工具

• let / const

  • 是 ES6 引入的，新的声明变量的方式

  • 用它们声明的变量，有块级作用域

  • 立即执行函数

    • 写法

    (function() {
    
    })();
    
    // 或者
    !function(){
    
    }()
    // !可以替换为：~, -, + 
    

    • 用途：
      • 利用其函数作用域，回收函数内声明变量的内存
      • 利用函数作用域外不能访问作用域内变量的特点，保护内部变量

  • 声明前置

  • const

    • 用来声明一个常量（一旦声明，不能修改）
    • 需要在声明时立即初始化
    • 通常可以用来避免误修改

• 解构赋值

  • =
  • 数组的解构
    • 要求变量的顺序一一对应
  • 对象的解构
    • 要求变量名和被解构对象的属性名必须一致
  • 函数参数的结构

• 模板字符串

  • 写法

  `${变量}`
  

  反撇号中 ${} 内的变量会被解析

• 数组的扩展

  • from()
  • of()
  • find()
  • fill()
  • includes()

• 函数的扩展

  • 参数默认值

  function test(age=20) {
      // ...
  }
  

  • rest 参数 // TODO

  • 箭头函数

    • 写法

    var test = () => {}
    

    • 如果函数只有一个参数，小括号可以省略
    • 如果函数体只有一行，函数体的花括号可以省略（此时会默认 return 这一行）
    • 不改变函数内 this 的指向

  • 对象的扩展

    • 属性的简写方式

    let obj = {
        name: 'ccc',
        age: 25,
        gender, // !!!
        test: function() {
            alert(1)
        },
        test2() { // !!!
            alert(2)
        }
    }
    

• 面向对象

  • class
  • extends

• 模块化

  • export
  • export default
  • import

Vue 项目环境搭建

• 前提
  • 系统已经安装 nodejs & npm
  • 安装 vue-cli（vue 命令行工具） npm install vue-cli
    • 安装完成后就可以使用vue命令
  • 安装脚手架
    • 脚手架名：webpack-simple
    • 执行命令： vue init webpack-simple 项目名 // webpack-simple 是脚手架名
    • 执行命令：cd 项目名
    • 执行命令：npm install
    • 执行命令：npm run dev（以开发模式启动项目）