uniapp学习【vue3在uniapp中语法，使用element，使用uView UI】

你真的可爱呀2025-10-14 13:42

均基于setup语法糖

1.Vue3 核心语法

1.1 响应式数据（核心！页面交互的基础）

Vue3 通过ref和reactive实现响应式（数据变化时，页面自动更新）

方法 适用类型 访问 / 修改方式 示例
ref 基本类型（Number、String、Boolean） 访问：变量名.value；修改：变量名.value = 新值 const count = ref(0); count.value = 1
reactive 对象 / 数组 直接访问 / 修改（无需.value） const user = reactive({name: '张三'}); user.name = '李四'
复制代码 
<script setup>
import { ref, reactive } from 'vue'

// 1. ref示例（基本类型）
const username = ref('小白')
const age = ref(18)
const isShow = ref(false)

// 修改ref数据
const changeName = () => {
  username.value = 'Uniapp开发者'  // 必须用.value
}

// 2. reactive示例（对象）
const user = reactive({
  name: '张三',
  address: {
    city: '北京'
  }
})

// 修改reactive数据
const changeCity = () => {
  user.address.city = '上海'  // 直接修改，无需.value
}

// 3. reactive示例（数组）
const list = reactive([
  { id: 1, text: '学习Uniapp' },
  { id: 2, text: '学习Vue3' }
])

// 向数组添加元素
const addItem = () => {
  list.push({ id: list.length + 1, text: '学习Element Plus' })
}
</script>

1.2生命周期钩子（控制页面 / 组件的执行时机）

Uniapp 支持两种生命周期：Vue3 生命周期 和Uniapp 页面生命周期。开发小程序时，优先使用 Uniapp 页面生命周期（更贴合小程序场景）。

1.2.1 Uniapp 页面生命周期（常用）

钩子函数 触发时机 常用场景
onLoad 页面加载时触发（只触发一次） 初始化数据、接收路由参数
onShow 页面显示时触发（每次切换到前台都触发） 刷新页面数据（如从详情页返回首页）
onReady 页面初次渲染完成时触发（只触发一次） 操作 DOM、初始化第三方组件
onHide 页面隐藏时触发（如切到其他 tab、退到后台） 保存页面状态
onUnload 页面卸载时触发（如关闭页面） 清理定时器、取消网络请求

1.2.2 Vue3 生命周期

常用onMounted（组件渲染完成）、onUnmounted（组件卸载）

javascript 复制代码 
<script setup>
import { onMounted, onUnmounted } from 'vue'

// 组件渲染完成时触发
onMounted(() => {
  console.log('自定义组件渲染完成')
})

// 组件卸载时触发
onUnmounted(() => {
  console.log('自定义组件卸载')
})
</script>

1.3 事件处理（页面交互的核心）

1.3.1 绑定事件（@事件名）

@click（点击事件）、@input（输入事件）、@change（选择事件）

javascript 复制代码 
<template>
  <view>
    <!-- 点击事件 -->
    <button @click="handleClick">点击</button>
    <!-- 输入事件（实时获取输入内容） -->
    <input @input="handleInput" placeholder="请输入内容" />
    <!-- 选择事件（如下拉选择） -->
    <picker @change="handlePickerChange" range="{{['北京','上海','广州']}}">
      <view>选择城市：{{ selectedCity }}</view>
    </picker>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const selectedCity = ref('北京')

// 点击事件处理
const handleClick = () => {
  uni.showToast({ title: '点击成功' })
}

// 输入事件处理（e.detail.value是输入框的值）
const handleInput = (e) => {
  console.log('输入内容：', e.detail.value)
}

// 选择事件处理（e.detail.value是选中的索引）
const handlePickerChange = (e) => {
  const cities = ['北京','上海','广州']
  selectedCity.value = cities[e.detail.value]
}
</script>

1.3.2 事件传参（@click="handleClick(参数)"）

javascript 复制代码 
<template>
  <view>
    <!-- 传固定参数 -->
    <button @click="handleSend('hello')">发送hello</button>
    <!-- 传响应式数据 -->
    <button @click="handleSend(username.value)">发送用户名</button>
    <!-- 传事件对象+参数（需用$event） -->
    <input @input="handleInputWithParam($event, 'input1')" placeholder="输入框1" />
  </view>
</template>

<script setup>
import { ref } from 'vue'

const username = ref('小白')

const handleSend = (msg) => {
  console.log('发送的消息：', msg)
}

const handleInputWithParam = (e, inputId) => {
  console.log(`输入框${inputId}的值：`, e.detail.value)
}
</script>

1.4 模板语法（渲染页面 UI）

1.4.1 文本渲染（{``{ 变量名 }}）

javascript 复制代码 
<template>
  <view>
    <text>用户名：{{ username }}</text>
    <text>年龄：{{ age + 1 }}</text>  <!-- 支持简单运算 -->
    <text>是否成年：{{ age >= 18 ? '是' : '否' }}</text>  <!-- 支持三元表达式 -->
  </view>
</template>

<script setup>
import { ref } from 'vue'
const username = ref('小白')
const age = ref(18)
</script>

1.4.2 条件渲染（v-if/v-else-if/v-else）

根据条件显示 / 隐藏元素（v-if会销毁 / 创建元素，v-show只是隐藏 / 显示，频繁切换用v-show）

javascript 复制代码 
<template>
  <view>
    <!-- v-if条件渲染 -->
    <text v-if="isShow">显示这段文字</text>
    <text v-else>隐藏时显示这段文字</text>
    
    <!-- v-show条件渲染 -->
    <text v-show="isShow">用v-show显示</text>
    
    <button @click="toggleShow">切换显示/隐藏</button>
  </view>
</template>

<script setup>
import { ref } from 'vue'
const isShow = ref(true)

const toggleShow = () => {
  isShow.value = !isShow.value
}
</script>

1.4.3 列表渲染（v-for）

循环渲染数组或对象，必须加key（唯一标识，提高性能）

javascript 复制代码 
<template>
  <view>
    <!-- 循环数组 -->
    <view v-for="(item, index) in list" :key="item.id">
      <text>索引：{{ index }}，内容：{{ item.text }}</text>
    </view>
    
    <!-- 循环对象 -->
    <view v-for="(value, key) in user" :key="key">
      <text>{{ key }}：{{ value }}</text>
    </view>
  </view>
</template>

<script setup>
import { reactive } from 'vue'

// 循环数组
const list = reactive([
  { id: 1, text: '学习Uniapp' },
  { id: 2, text: '学习Vue3' }
])

// 循环对象
const user = reactive({
  name: '张三',
  age: 18
})
</script>

1.4.4 样式绑定（:class/:style）

javascript 复制代码 
<template>
  <view>
    <!-- :class绑定（对象形式） -->
    <view :class="{ active: isActive, red: isRed }">动态class</view>
    
    <!-- :class绑定（数组形式） -->
    <view :class="[activeClass, redClass]">动态class数组</view>
    
    <!-- :style绑定（对象形式） -->
    <view :style="{ fontSize: fontSize + 'rpx', color: textColor }">动态style</view>
    
    <button @click="toggleStyle">切换样式</button>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// :class相关
const isActive = ref(true)
const isRed = ref(false)
const activeClass = ref('active')
const redClass = ref('red')

// :style相关
const fontSize = ref(32)
const textColor = ref('#333')

const toggleStyle = () => {
  isActive.value = !isActive.value
  isRed.value = !isRed.value
  fontSize.value = 40
  textColor.value = '#007aff'
}
</script>

<style>
.active {
  border: 2rpx solid #007aff;
}
.red {
  color: red;
}
</style>

2. Element Plus 引入与使用

Element Plus 是 Vue3 的 UI 组件库，需适配 Uniapp（部分组件需调整样式）

2.1 安装 Element Plus

打开 HBuilderX 的 "终端"（底部工具栏），输入以下命令（确保项目根目录正确）

javascript 复制代码 
npm install element-plus --save

等待安装完成（终端显示 "added xxx packages" 即成功）

2.2 全局引入 Element Plus

在main.js中全局引入 Element Plus 和样式，无需在每个页面单独引入

javascript 复制代码 
// main.js
import { createSSRApp } from "vue";
import App from "./App.vue";

// 1. 引入Element Plus
import ElementPlus from 'element-plus'
// 2. 引入Element Plus样式（必须引入，否则组件无样式）
import 'element-plus/dist/index.css'

export function createApp() {
  const app = createSSRApp(App);
  // 3. 注册Element Plus到Vue实例
  app.use(ElementPlus);
  return {
    app,
  };
}

2.3 常用组件示例（适配小程序）

Element Plus 的大部分组件可在 Uniapp 中使用，以下是常用组件的示例（注意：部分组件如ElMenu（导航菜单）在小程序中可能需要调整样式）

2.3.1 按钮

javascript 复制代码 
<template>
  <view class="btn-container">
    <el-button type="primary">主要按钮</el-button>
    <el-button type="success">成功按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger">危险按钮</el-button>
    <el-button @click="handleBtnClick">点击事件按钮</el-button>
  </view>
</template>

<script setup>
const handleBtnClick = () => {
  uni.showToast({ title: 'Element Plus按钮点击成功' })
}
</script>

<style scoped>
.btn-container {
  display: flex;
  gap: 20rpx;
  flex-wrap: wrap;
  padding: 20rpx;
}
</style>

2.3.2 输入框

javascript 复制代码 
<template>
  <view class="input-container" style="padding: 20rpx;">
    <el-input 
      v-model="inputValue" 
      placeholder="请输入内容" 
      @change="handleInputChange"
    />
    <text style="display: block; margin-top: 20rpx;">输入内容：{{ inputValue }}</text>
  </view>
</template>

<script setup>
import { ref } from 'vue'
const inputValue = ref('')

const handleInputChange = (value) => {
  console.log('输入框内容变化：', value)
}
</script>

2.3.3 弹窗

javascript 复制代码 
<template>
  <view style="padding: 20rpx;">
    <el-button @click="dialogVisible = true">打开弹窗</el-button>
    <el-dialog 
      v-model="dialogVisible" 
      title="Element Plus弹窗"
      width="80%"  <!-- 小程序中建议用百分比控制宽度 -->
    >
      <div>这是一个Element Plus的弹窗组件</div>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确定</el-button>
      </template>
    </el-dialog>
  </view>
</template>

<script setup>
import { ref } from 'vue'
const dialogVisible = ref(false)
</script>

2.3.4 列表

javascript 复制代码 
<template>
  <view style="padding: 20rpx;">
    <el-table :data="tableData" border style="width: 100%;">
      <el-table-column label="ID" prop="id" align="center" />
      <el-table-column label="名称" prop="name" align="center" />
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </view>
</template>

<script setup>
import { reactive } from 'vue'

// 表格数据
const tableData = reactive([
  { id: 1, name: 'Uniapp' },
  { id: 2, name: 'Vue3' },
  { id: 3, name: 'Element Plus' }
])

// 编辑事件（scope.row是当前行数据）
const handleEdit = (row) => {
  uni.showToast({ title: `编辑：${row.name}` })
}
</script>

2.4 小程序适配注意事项

  1. 样式冲突 ：Element Plus 默认样式可能与 Uniapp 冲突，可在样式中用::v-deep穿透scoped修改组件样式：

    css

    复制代码 
    <style scoped>
/* 修改ElButton的样式 */
::v-deep .el-button--primary {
  background-color: #007aff !important;  /* 小程序主题色 */
}
</style>

  2. 组件尺寸 ：Element Plus 组件默认尺寸较大，可通过size属性（如size="small"）或自定义样式缩小尺寸，适配小程序屏幕。

  3. 不支持的组件 ：部分 Element Plus 组件（如ElCarousel（轮播）、ElUpload（上传））在小程序中可能存在兼容性问题，建议优先使用 Uniapp 自带的swiper（轮播）、uni.chooseImage（图片选择）等 API。

3. uView UI引入与使用（推荐小程序组件库）

3.1 安装 uView UI

npm 安装
复制代码 
npm install uview-plus@3.1.32  # 3.x版本适配Vue3
手动下载（备用，适合无网络环境）
  1. 前往 uView UI 官网（https://www.uviewui.com/）下载 3.x 版本压缩包
  2. 解压后将uview-plus文件夹复制到项目components目录下

3.2 配置 uView UI（关键步骤，否则组件无法使用）

1. 引入 uView UI 样式

打开uni.scss文件（全局样式变量），添加

复制代码 
@import 'uview-plus/theme.scss';  // 引入uView主题变量
2. 配置全局样式

打开App.vue，在<style>中添加（不要加 scoped）

复制代码 
@import "uview-plus/index.scss";  // 引入uView全局样式
3. 注册 uView UI 到 Vue 实例

main.js

复制代码 
import { createSSRApp } from "vue";
import App from "./App.vue";
// 引入uView UI
import uView from 'uview-plus'

export function createApp() {
  const app = createSSRApp(App);
  app.use(uView);  // 注册uView
  return { app };
}
4. 配置 easycom 规则（自动引入组件，无需手动 import）

打开pages.json，添加 easycom 配置（组件库核心特性，自动按需引入）

复制代码 
{
  "easycom": {
    // uView UI的easycom规则
    "^u-(.*)": "uview-plus/components/u-$1/u-$1.vue"
  },
  "pages": [/* 页面配置 */]
}

3.3 验证项目与组件库是否配置成功

打开pages/index/index.vue，替换为以下代码

复制代码 
<template>
  <view class="container">
    <u-button type="primary" @click="showToast">点击测试uView组件</u-button>
  </view>
</template>

<script setup>
import { showToast } from 'uview-plus'  // 引入uView的toast方法

const showToast = () => {
  showToast('uView UI配置成功！')
}
</script>

<style scoped>
.container {
  padding: 20rpx;
}
</style>
  1. 点击 HBuilderX 工具栏运行 > 运行到小程序模拟器 > 微信开发者工具
  2. 若微信开发者工具中显示蓝色按钮，点击后弹出提示框，则配置成功

3.4 使用

按照官方文档使用就可以了，类似element

相关推荐
宝绿特塑业再生科技12 小时前
改性HDPE再生颗粒在户外家具挤出发泡板材中的色差控制与高品质价值重构
经验分享·科技·学习·生活·1024程序员节·户外家具
andrsted15 小时前
练题簿在线免费刷题：让整理过的资料，变成能反复练习的题库
学习·微信小程序·小程序·学习方法·刷题·1024程序员节
Alsn8616 小时前
Windows 安装 Ollama 及本地模型部署
学习·1024程序员节
欣欣之王来了17 小时前
原始HTML插值：v-html指令的使用与安全风险
前端·学习·架构·项目·vue3教程
知识分享小能手19 小时前
C学习教程，从入门到精通，C语言学生信息管理系统 — 知识点详解(18）
c语言·学习·1024程序员节
破芽19 小时前
learn-claude-code-s05-s11-学习笔记
笔记·学习
pipixia2003319 小时前
C++ 面试高频：namespace 的 6 个知识点，从 using 到匿名命名空间
c语言·学习·算法·嵌入式·命名空间·c++面试·匿名命名空间
每天题库20 小时前
汽车维修工等级考试题库 理论实操核心考点一次梳理清
学习·安全·考试·题库·考证
神也畏惧菠萝20 小时前
想要学习Agent应用开发？：2026 AI Agent开发全栈通关路线
学习·langgraph·mcp协议·agent开发·rag架构·prompt高级工程
程序猿乐锅21 小时前
【从0-1学习Python | 第七篇】Python 面向对象基础
开发语言·笔记·后端·python·学习·1024程序员节
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02如何新建文件夹？ 电脑新建文件夹的4种方法03GitHub 镜像站点04历年考研数学一、数学二、数学三真题试卷及答案PDF05几个好用的ip纯净度检测网站06苹果iPA游戏软件资源下载网站07昇腾910B系列芯片完全指南：四款型号对比、服务器选型与大模型部署实战08ai安全工具:CyberStrikeAI安装部署与使用09蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接10乙二醇水溶液物性参数