-
• uni-app 项目目录
-
• 条件编译
-
• 文本渲染
-
• 样式渲染
-
• 条件渲染
-
• 遍历渲染
-
• 事件处理
-
• 事件修饰符
更多详细内容，请微信搜索“前端爱好者“， 戳我 查看 。
uni-app 项目目录
-
• 组件/标签 使用（类似）小程序
-
• 语法/结构 使用vue
具体项目目录如下：
条件编译
地址: https://uniapp.dcloud.net.cn/tutorial/platform.html#%E8%B7%A8%E7%AB%AF%E5%85%BC%E5%AE%B9
在 C 语言中，通过 #ifdef、#ifndef 的方式，为 windows、mac 等不同 os 编译不同的代码。uni-app 参考这个思路，为 uni-app 提供了条件编译手段，在一个工程里优雅的完成了平台个性化实现。
条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。
写法： 以 #ifdef 或 #ifndef 加 %PLATFORM%`` 开头，以 #endif` 结尾。
-
•
#ifdef：if defined 仅在某平台存在 -
•
#ifndef：if not defined 除了某平台均存在 -
•
%PLATFORM%：平台名称
%PLATFORM% 可取值如下：
支持的文件
-
• .vue
-
• .js
-
• .css
-
• pages.json
-
• 各预编译语言文件，如：.scss、.less、.stylus、.ts、.pug
注意：
-
• 条件编译是利用注释实现的，在不同语法里注释写法不一样，
js使用 // 注释、css 使用 /* 注释 */、vue/nvue 模板里使用 <!-- 注释 -->；
-
• 条件编译APP-PLUS包含APP-NVUE和APP-VUE，APP-PLUS-NVUE和APP-NVUE没什么区别，为了简写后面出了APP-NVUE ；
-
• 使用条件编译请保证编译前和编译后文件的语法正确性，即要保障无论条件编译是否生效都能通过语法校验。比如：json文件中不能有多余的逗号，js中不能重复导入；
更多详细内容，请查看
文本渲染
-
• {{ }}
-
• v-text [uni-app 不支持,需要进行
条件编译判断] -
• v-html [uni-app 不支持,需要进行
条件编译判断]
样式渲染
less
<template>
<view class="container">
<button @click="setNum">{{num}}</button>
</view>
</template>
<script setup>
import { ref } from 'vue'
const num = ref(2)
const setNum = () => {
let temValue = num.value + 5
num.value = temValue
}
</script>
<style lang="less" scoped>
.container {
padding: 0 20px 20px;
font-size: 14px;
line-height: 24px;
}
</style>scss
<template>
<view class="container">
<button @click="setNum">{{num}}</button>
</view>
</template>
<script setup>
import { ref } from 'vue'
const num = ref(2)
const setNum = () => {
let temValue = num.value + 5
num.value = temValue
}
</script>
<style lang="scss" scoped>
.container {
padding: 0 20px 20px;
font-size: 14px;
line-height: 24px;
}
</style>条件渲染
-
• v-if
-
• v-show [uni-app 不支持,需要进行
条件编译判断]
<template>
<view>
<view v-if="isShow">这段内容会在 isShow 为 true 时显示</view>
</view>
</template>遍历渲染
-
•
v-for和v-bind:key的组合
事件处理
事件修饰符
在uni-app中，事件修饰符与Vue框架中使用的事件修饰符基本相同。你可以使用事件修饰符来对事件进行额外的处理或修改事件的默认行为。以下是一些常用的事件修饰符：
-
•
.stop：阻止事件冒泡。 -
•
.prevent：阻止事件的默认行为。 -
•
.capture：使用事件捕获模式而非冒泡模式。 -
•
.self：只有当事件发生在元素自身时才触发事件。 -
•
.once：事件只会触发一次。 -
•
.passive：提升滚动性能，指示事件的默认行为不会被阻止。
下面是一些示例：
<template>
<div>
<!-- 阻止事件冒泡 -->
<button @click.stop="handleClick">Stop</button>
<!-- 阻止事件的默认行为 -->
<a href="#" @click.prevent="handleClick">Prevent</a>
<!-- 使用事件捕获模式 -->
<div @click.capture="handleClick">
<button>Click</button>
</div>
<!-- 只有当事件发生在元素自身时才触发事件 -->
<div @click.self="handleClick">
<button>Click</button>
</div>
<!-- 事件只会触发一次 -->
<button @click.once="handleClick">Once</button>
<!-- 提升滚动性能，不阻止事件的默认行为 -->
<div @touchmove.passive="handleTouchMove"></div>
</div>
</template>
<script>
export default {
methods: {
handleClick() {
console.log('Button clicked');
},
handleTouchMove(e) {
console.log('Touch moved');
}
}
}
</script>通过使用这些事件修饰符，你可以更加灵活地处理和控制事件的行为。
参考文档
-
• https://uniapp.dcloud.net.cn/component/navigator.html
-
• https://uniapp.dcloud.net.cn/api/router.html#navigateto
-
• https://uniapp.dcloud.net.cn/tutorial/vue3-composition-api.html#%E4%BD%BF%E7%94%A8-script-setup
发表评论