vue第一天

huangfu92
144 阅读3分钟

  1. 安装 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，全局安装，在任何文件夹下都可以直接使用）

  2. 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

  3. 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

  4. 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（以开发模式启动项目）
avatar
文章
阅读
粉丝