一、前端渐进式框架Vue基本概念

1、简介

  • 官方网址：
  • 是一套用于构建用户界面的渐进式框架，Vue被设计为可以自底向上逐层应用
  • MVVM响应式编程，避免直接操作DOM，降低DOM操作的复杂性

  • MVVM：页面输入改变数据，数据改变影响页面数据展示与渲染

    • M(model)：普通的JavaScript数据对象
    • V(view)：前端展示页面
    • VM(ViewModel)：用于双向绑定数据的与页面【Vue实例】

      2、核心功能

  • 基础功能：页面渲染、表单处理提交、管理虚拟DOM节点

  • 组件化开发：增强代码复用性，代码维护更简单
  • 前端路由
  • 状态集中管理：MVVM响应式模型基础上实现多组件之间的状态数据同步管理

  • 前端工程化：结合webpack(vite)前端打包工具，整合前端大型项目

    3、渐进式框架

    就是用你想用或者能用的功能特性，你不想用的部分功能可以先不用。Vue不强求你一次性接受并使用它的全部功能特性

    二、快速起步

    1、安装Vue

  • 通过CDN方式引入

  • vue2：

    1. <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

  • vue3:

    1. <script src="https://unpkg.com/vue@next"></script>

    2、实现第一个vue程序

  • vue2写法

    • image.png

  • vue3写法：

    • image.png
    • createApp表示创建一个Vue应用，存储到app变量中

      3、实现字符串反转和内容隐藏

  • 实现字符串反转

    • image.png
    • v-on绑定事件，v-on:click绑定点击事件
    • methods：定义需要用到的函数
    • split(“).reverse(‘’).jion()：字符串变成数组——反转——连接成字符串

  • 内容隐藏

    • image.png
    • 控制显示隐藏：
      • v-if：根据条件渲染出结点
      • v-show：已经渲染出结点

        4、实现TodoList,了解循环和双向绑定

  • 代码实现

    • image.png
    • v-for:对数组内容循环
    • v-model:实现数据和input输入框的双向绑定

      5、组件初探：对TodoList进行组件拆分

  • 代码实现

    • image.png
    • 注册组件：component
    • 在props中注册的组件属性，实现组件传参
    • v-bind+:+属性名/:+属性名实现数据和组件属性的绑定

      三、ES6常用语法

  • var-const-let

    • JS作用域
      • ES6之前，只有var，没有块级作用域
    • var的局限性
    • let的用法详解
    • const用法详解
  • 对象的增强写法
    • ES5对象的定义语法——原型链
    • ES6对象的定义语法
      • class关键字声明对象
      • constructor
      • this:当前对象
    • ES6的字面量定义对象简写
    • 箭头函数与this指针
      • 箭头函数简写形式
      • 对象中this指针
      • 全局环境以及函数中的this指针
      • this指针使用过程中存在的问题，如何用箭头函数解决
      • 在严格模式下this:undefined