Uni-App 中常用的指令语句详解
Uni-App 是一个基于 Vue.js 的跨平台应用开发框架，能够同时编译到多个平台（如 H5、小程序、APP 等）。在开发过程中，使用 Uni-App 提供的指令语句可以大大提高开发效率和应用性能。本文将详细介绍 Uni-App 中常用的指令语句，包括数据绑定、条件渲染、列表渲染、事件处理等方面。
1. 数据绑定
数据绑定是 Uni-App 的核心功能之一，它允许你在模板和 JavaScript 代码之间建立动态关系。
1.1 单向数据绑定
使用 {``{}} 语法，可以将数据从 Vue 实例中的 data 绑定到模板中。
vue
<template>
<view>
<text>{{ message }}</text>
</view>
</template>
<script>
export default {
data() {
return {
message: 'Hello, Uni-App!'
};
}
};
</script>1.2 双向数据绑定
在表单元素中，使用 v-model 指令实现双向数据绑定。
vue
<template>
<view>
<input v-model="inputValue" placeholder="请输入"/>
<text>{{ inputValue }}</text>
</view>
</template>
<script>
export default {
data() {
return {
inputValue: ''
};
}
};
</script>2. 条件渲染
条件渲染允许你根据某个条件来决定是否渲染某个元素，通常使用 v-if、v-else-if 和 v-else 指令。
2.1 v-if
当条件为真时，渲染该元素。
vue
<template>
<view>
<button @click="toggle">切换显示</button>
<view v-if="isVisible">
<text>这是一个条件渲染的内容</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
isVisible: false
};
},
methods: {
toggle() {
this.isVisible = !this.isVisible;
}
}
};
</script>2.2 v-else-if 和 v-else
用于处理多重条件。
vue
<template>
<view>
<text>当前分数：{{ score }}</text>
<view v-if="score >= 90">
<text>优秀</text>
</view>
<view v-else-if="score >= 60">
<text>及格</text>
</view>
<view v-else>
<text>不及格</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
score: 75
};
}
};
</script>3. 列表渲染
使用 v-for 指令可以遍历数组，以生成列表。
3.1 基本用法
vue
<template>
<view>
<view v-for="item in items" :key="item.id">
<text>{{ item.name }}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' }
]
};
}
};
</script>3.2 嵌套列表
可以在列表项中再嵌套列表。
vue
<template>
<view>
<view v-for="category in categories" :key="category.id">
<text>{{ category.name }}</text>
<view v-for="item in category.items" :key="item.id">
<text> - {{ item.name }}</text>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
categories: [
{ id: 1, name: 'Category 1', items: [{ id: 1, name: 'Item 1' }] },
{ id: 2, name: 'Category 2', items: [{ id: 2, name: 'Item 2' }] }
]
};
}
};
</script>4. 事件处理
Uni-App 提供了丰富的事件处理机制，可以通过 @ 或 v-on: 指令绑定事件。
4.1 点击事件
vue
<template>
<view>
<button @click="handleClick">点击我</button>
</view>
</template>
<script>
export default {
methods: {
handleClick() {
console.log('按钮被点击了');
}
}
};
</script>4.2 输入事件
在表单输入元素中，监听输入事件。
vue
<template>
<view>
<input v-model="inputValue" @input="handleInput" placeholder="输入内容"/>
</view>
</template>
<script>
export default {
data() {
return {
inputValue: ''
};
},
methods: {
handleInput(event) {
console.log('输入内容:', event.detail.value);
}
}
};
</script>5. 表单处理
Uni-App 中表单元素的处理通过 v-model 和事件绑定来实现。
5.1 单选框
vue
<template>
<view>
<radio-group v-model="selected">
<label>
<radio value="1">选项1</radio>
</label>
<label>
<radio value="2">选项2</radio>
</label>
</radio-group>
<text>当前选择：{{ selected }}</text>
</view>
</template>
<script>
export default {
data() {
return {
selected: '1'
};
}
};
</script>5.2 复选框
vue
<template>
<view>
<checkbox-group v-model="checkedItems">
<label>
<checkbox value="A">选项A</checkbox>
</label>
<label>
<checkbox value="B">选项B</checkbox>
</label>
</checkbox-group>
<text>选中的选项：{{ checkedItems.join(', ') }}</text>
</view>
</template>
<script>
export default {
data() {
return {
checkedItems: []
};
}
};
</script>6. 计算属性和侦听器
6.1 计算属性
计算属性是 Vue.js 的强大特性，可以根据依赖的响应式数据自动计算出新的数据。
vue
<template>
<view>
<text>原始分数：{{ score }}</text>
<text>等级：{{ level }}</text>
</view>
</template>
<script>
export default {
data() {
return {
score: 85
};
},
computed: {
level() {
if (this.score >= 90) return '优秀';
if (this.score >= 60) return '及格';
return '不及格';
}
}
};
</script>6.2 侦听器
侦听器用于观察数据的变化并执行特定操作。
vue
<template>
<view>
<input v-model="score" placeholder="输入分数"/>
</view>
</template>
<script>
export default {
data() {
return {
score: 0
};
},
watch: {
score(newScore) {
console.log('分数变化:', newScore);
}
}
};
</script>7. 生命周期钩子
Uni-App 提供了多个生命周期钩子，可以在组件的不同阶段执行特定的代码。
7.1 mounted
在组件被挂载后执行。
vue
<template>
<view>
<text>组件已挂载</text>
</view>
</template>
<script>
export default {
mounted() {
console.log('组件已挂载');
}
};
</script>7.2 onLoad
在页面加载时执行，适用于页面组件。
vue
<template>
<view>
<text>页面加载</text>
</view>
</template>
<script>
export default {
onLoad() {
console.log('页面加载');
}
};
</script>8. 样式和类
8.1 动态类
使用 :class 绑定动态类。
vue
<template>
<view :class="{ active: isActive }">
<text>动态类示例</text>
</view>
</template>
<script>
export default {
data() {
return {
isActive: true
};
}
};
</script>
<style>
.active {
color: red;
}
</style>8.2 动态样式
使用 :style 绑定动态样式。
vue
<template>
<view :style="{ color: textColor }">
<text>动态样式示例</text>
</view>
</template>
<script>
export default {
data() {
return {
textColor: 'blue'
};
}
};
</script>9. API 调用
Uni-App 提供了丰富的 API 用于网络请求、文件操作等。
9.1 网络请求
使用 uni.request 进行网络请求。
javascript
uni.request({
url: 'https://example.com/api',
method: 'GET',
success: (res) => {
console.log('请求成功:', res.data);
},
fail: (error) => {
console.error('请求失败:', error);
}
});9.2 存储操作
使用 uni.setStorage 和 uni.getStorage 进行本地存储。
javascript
// 存储数据
uni.setStorage({
key: 'key',
data: 'value',
});
// 读取数据
uni.getStorage({
key: 'key',
success: (res) => {
console.log('存储的数据:', res.data);
}
});10. 组件化开发
Uni-App 支持组件化开发，可以通过 components 选项注册和使用组件。
10.1 注册组件
javascript
import MyComponent from '@/components/MyComponent.vue';
export default {
components: {
MyComponent
}
};10.2 使用组件
vue
<template>
<view>
<my-component />
</view>
</template>