什么是Vue

Vue是一款用于构建用户界面的渐进式框架。

  • 其中，”渐进式”是指在使用Vue核心库时，可以在核心库的基础上根据实际需要逐步增加功能。
  • 基于MVVM模式的框架。MVVM住要包含：
    • Model：数据模型，负责业务数据处理
    • View：视图，用户界面，负责视图处理
    • ViewModel：视图模型，连接Model和View，负责监听Model或者View的变化。工作原理：DOM Listeners监听DOM变化自动同步Model，Data Bindings监听数据变化自动更新View。
  • 特性：
    • 数据驱动的视图：Vue监听数据变化。当页面数据发生变化时，Vue会自动重新渲染页面结构。
    • 双向数据绑定：数据变化会影响视图，视图变化也会影响数据。
    • 指令：Vue提供了一些指令，用于操作DOM。
    • 插件：Vue Router、Vuex、Pinia等。
  • Vue3的新特性
    • 体积更小：采取按需编译
    • 性能提升
    • 更好的TypeScript支持
    • 暴露更底层API
    • 更先进组件
    • 提供组合式API

Vue开发环境

Node.js

Node.js是一个基于V8引擎的JavaScript运行环境，提供了一些功能性的API

包管理工具

npm是node.js默认的包管理工具

1
2
3
npm install bootstrap  
npm uninstall bootstrap
npm update bootstrap

yarn是Facebook开发的包管理工具

1
2
3
4
yarn add bootstrap
yarn remove bootstrap
yarn up bootstrap
yarn add bootstrap@4.5.0

-g：全局安装

npm和yarn的区别：

  • 使用npm安装同一个包时，每次安装都需要重新下载，而yarn会缓存每个下载过的包，再次使用时无需重复下载
  • npm按照队列安装每个包，而yarn会并行安装
  • npm输出信息冗长，yarn输出信息更简洁，只输出必要的信息

Vite与Webpack

Vite是一个轻量级、运行速度快的前端构建工具，支持模块热替换（HMR）

模块热替换可以及时准确的更新模块，当代码修改时无需重新加载页面或清除应用程序状态。

在Vue3出现前，Vue2一般使用Vue CLI创建。Vue CLI基于Webpack构建并配置项目。在项目启动时，Webpack需要从入口文件索引整个项目的文件，编译成一个或多个单独的.js文件。

虽然Webpack对代码进行了拆分，但是仍可能一次生成所有路由下的编译后的文件，导致项目启动慢。

而Vite在项目启动时，会对模块代码进行按需加载，启动速度快

  1. 手动创建项目 
    1
    2
    npm create vite@latest
    yarn create vite
  2. 通过模板自动创建项目 
    1
    2
    npm create vite@latest my-vue-app -- --template vue
    yarn create vite my-vue-app --template vue

目录结构与运行过程

  • node_modules：存放项目依赖和安装的插件
  • public：存放不可编译的静态资源文件，项目构建时会原封不动的复制到dist目录下，用绝对路径访问
  • src：存放项目源码
  • src\assets：存放可编译的静态资源文件，如图片、样式文件等，用相对路径访问
  • src\components：存放单文件组件，如.vue文件
  • src\App.vue：根组件
  • src\main.js：入口文件，创建Vue应用实例
  • src\style.css：全局样式文件
  • .gitignore：git忽略文件
  • index.html：页面入口文件，默认的主渲染页面文件
  • package.json：项目配置文件
  • README.md：项目说明文件
  • vite.config.js：Vite配置文件
  • yarn.lock：yarn包管理文件

启动服务时，项目会通过src\main.js文件创建Vue应用实例，然后将App.vue组件渲染到index.html文件的指定区域。

Vue.js开发基础

单文件组件

每个单文件组件都包含三个部分：

  • 模板：搭建当前组件DOM结构，<template></template>标签包裹，容器标签，不会渲染为真正的DOM元素
  • 样式：设置当前组件的样式，<style></style>标签包裹。
  • 逻辑：通过Js代码处理组件的数据与业务逻辑，<script></script>标签包裹。

数据绑定

  • Mustache语法：{{}}，用于绑定数据到视图
  • 响应式数据绑定：Vue会监听数据的变化，当数据发生变化时，Vue会自动更新视图
    • ref()：将数据转换为响应式数据
    • reactive()：创建响应式对象或数组
    • toRef()：将响应式对象中某个属性转换为响应式数据，响应式数据 = toRef(响应式对象, ‘属性名’)
    • toRefs()：将响应式对象中所有属性转换为响应式数据。 所有属性组成的对象 = toRefs(响应式对象)

指令

  1. 内容渲染指令v-text、v-html
    v-text：替换元素的textContent，不会解析html标签, v-html：替换元素的innerHTML，会解析html标签

    1
    2
    <div v-text="msg"></div>
    <div v-html="msg"></div>

  2. 属性绑定指令v-bind
    v-bind：动态绑定元素属性，简写为:，v-bind:属性名=”表达式”

    1
    2
    <img v-bind:src="imgUrl" alt="图片">
    <img :src="imgUrl" alt="图片">

  3. 事件绑定指令v-on
    v-on：绑定事件监听器，简写为@，v-on:事件名=”事件处理函数”

    1
    2
    <button v-on:click="handleClick">点击</button>
    <button @click="handleClick">点击</button>

  4. 双向数据绑定指令v-model
    v-model：实现表单元素和数据的双向绑定，比如处理表单时，输入框与变量保持同步

    内部为不同元素绑定不同的属性和事件，如input元素绑定value属性和input事件，checkbox元素绑定checked属性和change事件等。

    3个修饰符：.number(将输入值转换为数字类型)、.trim(去除输入值两侧空格)、.lazy(将输入值转换为change事件触发)

    1
    2
    <input v-model="msg" type="text">
    <input v-model.number="num" type="number">

  5. 条件渲染指令v-if、v-else、v-else-if、v-show
    v-if：根据表达式的值，动态添加或删除元素，v-else：与v-if连用，表示v-if的反向条件，v-else-if：与v-if连用，表示v-if的另一条件

    1
    2
    <div v-if="isShow">显示</div>
    <div v-else>隐藏</div>

    v-show：根据表达式的值，动态显示或隐藏元素，v-show=”表达式”

    1
    <div v-show="isShow">显示</div>

    二者的区别是v-if是真正的条件渲染，v-show是通过display属性控制元素的显示与隐藏

  6. 列表渲染指令v-for
    v-for：根据数据生成列表，v-for=”item in items”，v-for=”(item, index) in items”

    key：为每个节点设置唯一标识，提高性能,如果list数组中删除一个元素后，index发生变化，Vue会重新渲染整个列表，而key可以保证每个元素的唯一性，以便它能跟踪每个节点的身份，从而对现有元素进行重用和重新排序。

    • 根据一维数组渲染列表

      1
      <li v-for="(item,index) in items" :key="index">{{item.name}}</li>

    • 根据对象数组渲染列表

      1
      <li v-for="item in items" :key="item.id">{{item.name}}</li>

    • 根据对象渲染列表(第一个参数是值，第二个参数是键)

      1
      <li v-for="(value,key) in obj" :key="key">{{key}}:{{value}}</li>

事件对象

事件对象是事件触发时产生的对象，保存了事件触发时的相关信息，例如事件类型，事件发生的时间戳，事件被触发时对应标签的一些属性值集合等。

  1. 通过事件方法等参数获取事件对象 
    1
    2
    3
    4
    5
    6
    7
    8
    <template>
       <button @click="handleClick">点击</button>
    </template>
    <script setup>
    const handleClick = (e) => {
        console.log(e)
    }
    </script>
  2. 通过$event获取事件对象``` 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <template>
       <button @click="handleClick($event)">点击</button>
    </template>
    <script setup>
    const handleClick = (e) => {
        console.log(e)
    }
    </script>

事件修饰符

  1. .prevent：阻止默认行为
  2. .stop：阻止事件冒泡
  3. .capture：事件捕获
  4. .once：只触发一次
  5. .self：只有事件在该元素本身触发时才会触发
  6. .passive：滚动事件的默认行为,滑动滚动条立即发生，无需等待onScroll方法执行完毕。
  7. .enter、.tab、.delete、.esc、.space、.up、.down：键盘事件修饰符
  8. .left、.right、.middle: 鼠标事件修饰符

计算属性

计算属性监听数据变化，将计算结果缓存起来，只有计算属性中依赖的数据源变化了，计算属性才会自动重新求值，并重新加入缓存

1
2
3
4
5
6
7
8
9
10
<template>
    <p>{{fullName}}</p>
</template>
<script setup>
  const firstName = ref('Tom')
  const lastName = ref('Jerry')
  const fullName = computed(() => {
      return firstName.value + ' ' + lastName.value
  })
</script>

侦听器watch(数据来源，回调函数，可选参数)

侦听器监听数据状态，数据更新后进行相应的操作

1
2
3
4
5
6
7
8
9
10
11
<template>
    <p>{{fullName}}</p>
</template>
<script setup>
  let firstName = ref('Tom')
  let lastName = ref('Jerry')
  const fullName = ref('')
  watch([firstName, lastName], ([newFirstName, newLastName]) => {
      fullName.value = newFirstName + ' ' + newLastName
  })
</script>

数据来源可以是一个有返回值的函数，一个响应式数据， 一个响应式对象，或者一个由以上类型的值组成的数组。

回调函数中有两个参数，第一个参数是新值，第二个参数是旧值。

可选参数是一个对象，有两个常用选项：deep和immediate。deep用于监听对象内部属性的变化，immediate用于在侦听器初次加载时立即执行回调函数。

样式绑定

  1. 绑定class属性

    • 字符串：<div :class="className"></div>
    • 对象：<div :class="{className: isActive}"></div>
    • 数组：<div :class="[className1, className2]"></div>

    可以使用三元表达式来切换，比如<div :class="{isActive ? 'active' : 'inactive'}"></div>

  2. 绑定style属性

    • 对象：<div :style="{color: 'red', fontSize: '16px'}"></div>
    • 数组：<div :style="[style1, style2]"></div>

    CSS中的属性名使用驼峰命名法，如backgroundColor或者短横线分隔命名法，如background-color，如果是第二种需要将属性写成字符串形式。