Vue 入门学习:环境搭建与 Element UI 组件使用

一、引言

Vue.js 是一个流行的 JavaScript 前端框架,它以简洁、灵活和高效的特点受到广大开发者的喜爱。本文将带领大家从 Vue 的环境搭建开始,逐步深入了解 Vue 的基本使用,并详细介绍 Element UI 中一些常用组件的使用方法,帮助大家快速入门 Vue 开发。

二、Vue 运行环境搭建

(一)安装 Node.js

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时,它使得我们可以在服务器端运行 JavaScript 代码,同时也是 Vue 开发所依赖的环境。

  1. 前往 Node.js 官方网站(Node.js --- Run JavaScript EverywhereNode.js --- 在任何地方运行 JavaScriptNode.js --- Run JavaScript Everywhere)下载适合自己操作系统的安装包。
  2. 按照安装向导进行安装,安装过程中可以选择默认配置。

(二)验证 Node.js 和 npm 安装

安装完成后,打开命令提示符(Windows)或终端(Mac/Linux),输入以下命令:

复制代码
node -v
npm -v

如果正确安装,将分别显示 Node.js 和 npm 的版本号。

(三)安装 Vue CLI

Vue CLI 是一个官方提供的脚手架工具,用于快速搭建 Vue 项目。

在命令提示符或终端中执行以下命令进行全局安装:

复制代码
npm install -g @vue/cli

然后启动项目:

复制代码
npm run serve

此时,在浏览器中访问 http://localhost:8080,看到 Vue 项目的默认欢迎页面,这意味着 Vue 开发环境已经搭建成功。

三、Element UI 组件使用

Element UI 是一套基于 Vue.js 的桌面端组件库,提供了丰富的组件,能够帮助我们快速构建美观且功能强大的前端界面。在使用 Element UI 之前,需要先将其安装到我们的 Vue 项目中

主要组件使用教程

1. 输入框(Input)
  • 在 Vue 组件的模板中,使用 <el-input> 标签来创建一个输入框。

    <template>
    <el-input v-model="inputValue" placeholder="请输入内容"></el-input>

    你输入的内容是:{{ inputValue }}

    </template> <script> export default { data() { return { inputValue: '' }; } }; </script>
  • v-model 指令用于实现双向数据绑定,使得输入框中的值与组件的 data 中的 inputValue 同步更新。

2. 选择器(Select)
  • 使用 <el-select> 标签创建选择器,配合 <el-option> 标签来定义选项。

    <template>
    <el-select v-model="selectedOption" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" ></el-option> </el-select>

    你选择的是:{{ selectedOption }}

    </template> <script> export default { data() { return { selectedOption: '', options: [ { value: 'option1', label: '选项 1' }, { value: 'option2', label: '选项 2' }, { value: 'option3', label: '选项 3' } ] }; } }; </script>
  • v-model 绑定选择器的选中值,通过 v-for 循环遍历 options 数组来生成选项列表。

3. 单选框(Radio)
  • 使用 <el-radio-group> 标签包裹多个 <el-radio> 标签来创建单选框组。

    <template>
    <el-radio-group v-model="radioValue"> <el-radio :label="1">男</el-radio> <el-radio :label="2">女</el-radio> </el-radio-group>

    你选择的性别是:{{ radioValue === 1? '男' : '女' }}

    </template> <script> export default { data() { return { radioValue: 1 }; } }; </script>
  • v-model 绑定单选框组的选中值,每个 <el-radio>:label 属性用于标识每个单选框的值。

4. 多选框(Checkbox)
  • 类似单选框,使用 <el-checkbox-group> 包裹多个 <el-checkbox> 来创建多选框组。

    <template>
    <el-checkbox-group v-model="checkedValues"> <el-checkbox :label="1">苹果</el-checkbox> <el-checkbox :label="2">香蕉</el-checkbox> <el-checkbox :label="3">橙子</el-checkbox> </el-checkbox-group>

    你选择的水果是:{{ checkedValues }}

    </template> <script> export default { data() { return { checkedValues: [] }; } }; </script>
  • v-model 绑定一个数组,用于存储选中的多选框的值。

5. 计数器(InputNumber)
  • 使用 <el-input-number> 标签创建计数器。

    <template>
    <el-input-number v-model="count" :min="1" :max="10"></el-input-number>

    当前数量是:{{ count }}

    </template> <script> export default { data() { return { count: 1 }; } }; </script>
  • v-model 绑定计数器的值,:min:max 属性分别设置计数器的最小值和最大值。

6. 日期时间选择器(DatePicker)
  • 使用 <el-date-picker> 标签创建日期选择器,通过 type 属性可以指定选择日期、时间或日期时间。

    <template>
    <el-date-picker v-model="date" type="date" placeholder="选择日期" ></el-date-picker>

    你选择的日期是:{{ date }}

    </template> <script> export default { data() { return { date: '' }; } }; </script>
  • 如果要选择时间,可以将 type 属性设置为 time;如果要选择日期时间,可以设置为 datetime

相关推荐
paopaokaka_luck2 分钟前
基于SpringBoot+Vue的社区诊所管理系统(AI问答、webSocket实时聊天、Echarts图形化分析)
vue.js·人工智能·spring boot·后端·websocket
余道各努力,千里自同风16 分钟前
el-input 输入框宽度自适应宽度
javascript·vue.js·elementui
Southern Wind1 小时前
Vue 3 多实例 + 缓存复用:理念及实践
前端·javascript·vue.js·缓存·html
一大树1 小时前
Vue3优化指南:少写代码,多提性能
vue.js
涤生z1 小时前
list.
开发语言·数据结构·c++·学习·算法·list
90后的晨仔1 小时前
Webpack完全指南:从零到一彻底掌握前端构建工具
前端·vue.js
90后的晨仔2 小时前
Vue3项目全面部署指南:从构建到上线
前端·vue.js
重生之我要当java大帝2 小时前
java微服务-尚医通-数据字典-5
vue.js·微服务·云原生·架构
励志不掉头发的内向程序员2 小时前
【Linux系列】掌控 Linux 的脉搏:深入理解进程控制
linux·运维·服务器·开发语言·学习
Shi_haoliu2 小时前
Vue2 + Office Add-in关于用vue项目于加载项控制excel单元格内容(Demo版)
前端·javascript·vue.js·node.js·html·excel·office