当前位置：首页 > article >正文

Vue开发系列——VUE入门？

article 2025/1/11 3:43:41

一、为什么还需要学习Vue呢？

二、什么是Vue？

三、Vue快速开发举例

一、为什么还需要学习Vue呢？

既然JavaScript、HTML等可以开发负责的用户界面，为什么还需要学习Vue呢？

答案也非常明显，为了更方便、更快捷地完成界面开发。举个例子，如果一个项目有10个界面，使用传统的开发方法需要15天，而使用Vue只需要5天，那么显而易见使用Vue开发就好了。而且，考虑到后面页面的维护、升级成本，Vue带来的便捷就更好了。

二、什么是Vue？

用一句话说，Vue就是一款用于构建用户界面的JavaScript框架。它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，可以高效地开发用户界面。无论是简单还是复杂的界面，Vue都可以胜任。

如果要说Vue和HTML、js、css的关系，那么 Vue ~= HTML + js + css

既然是框架，那么就需要了解一下其优点。Vue的核心特点包括：

‌渐进式框架‌：开发者可以根据项目需求逐步引入Vue的功能，灵活性高。
‌组件化‌：Vue的组件系统使得代码易于复用和维护，开发者可以通过构建组件来封装HTML、CSS和JavaScript。
‌双向数据绑定‌：数据和视图保持同步，简化了数据的管理和展示。
‌虚拟DOM‌：使用虚拟DOM来提高性能，这是一种轻量级的JavaScript对象，能够在数据变化时高效地更新视图。

三、Vue快速开发举例

如果要开发一个表格，并且要求行与行之间底色不同，第一行固定、第一列固定。

那么使用 HTML + js + css必然可以开发完成。但如果一位对css、js不太熟悉的人呢？开发起来必然会需要提前熟悉其语法，不断调试css等等。如果使用Vue开发，你就不需要费脑细胞了，因为它有别人开发好的现成模板你可以随意挑选：

模板1：使用带斑马纹的表格

<template>
  <el-table
    :data="tableData"
    stripe
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    }
  }
</script>

模板2：固定表头