uniapp组件知识记录

devtools/2024/10/18 4:53:47/

style标签的lang

<template><view class="content"><h1 class="test"><span class="test1">我</span></h1>是谁</view>
</template>

<style lang="scss">.content {// content中允许定义下个层级标签或多层级中的样式，不能定义同级标签或者样式.test1 {background-color: red;}// h1和 test属于同级则不生效h1 {.test {background-color: red;}}}</style>

scss是css样式增强版定义
样式中可以嵌套，标签或者class定义

在这里插入图片描述

视图容器

组件scroll-view的使用(滚动)

<template><view class="content"><!-- 左右上下滑动 --><scroll-view class="scroll" scroll-x="true"><image class="item" src="../../static/img/小猫测试.jpeg"></image><image class="item" src="../../static/img/小猫测试.jpeg"></image><image class="item" src="../../static/img/小猫测试.jpeg"></image></scroll-view></view>
</template>

<style lang="scss">.content {.scroll {// scroll标签中内容不换行white-space: nowrap;.item {width: 300rpx;height: 200rpx;margin-right: 1rpx;// 在父级的标签中排列一行，超过父级宽度则在下一行display: inline-block;}}}
</style>

在这里插入图片描述

组件swiper的使用(轮播)

<swiper indicator-dots class="swiper"><swiper-item><image class="swiper-image" src="/static/img/小猫测试.jpeg" mode="aspectFill"></image></swiper-item><swiper-item><image class="swiper-image" src="/static/img/小猫测试.jpeg" mode="aspectFill"></image></swiper-item><swiper-item><image class="swiper-image" src="/static/img/小猫测试.jpeg" mode="aspectFill"></image></swiper-item>
</swiper>

.swiper {height: 300rpx;.swiper-image {height: 300rpx;width: 750rpx;}
}

在这里插入图片描述

媒体组件

组件image的使用(图片)

<view><image class="image-t" src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
</view>

aspectFill: 始终保持宽或者高全部展示
当容器image的宽度小于图片宽度时，图片高度完全展示，当容器image的高度小于图片高度时，图片宽度完全展示

图片: 320px 240px

.image-t {width: 200px;// height: 300px;
}

在这里插入图片描述

路由与页面跳转

navigator

<navigator url="/pages/list/list">跳转到list页面(保留历史页面，左上角有返回按钮)</navigator>
<navigator url="/pages/list/list" open-type="redirect">跳转到list页面，打开新页面，左上角没有返回按钮</navigator>

在这里插入图片描述

navigate: 保留历史页面，可以跳转到非 tabBar 的页面的路径
redirect: 不保留历史页面打开新页面，不可跳转到非tabBar页面路径
switchTab: url不能携带参数
reLaunch: url可以携带参数，可以跳转到非 tabBar 的页面的路径但不能带参数

tabBar底部导航配置

{	"tabBar": {"color": "#7A7E83","selectedColor": "#3cc51f","borderStyle": "black","backgroundColor": "#ffffff","list": [{"pagePath": "pages/index/index","text": "首页"},{"pagePath": "pages/list/list","text": "列表"}]}
}

在这里插入图片描述

表单提交

<template><view><form @submit="toSubmmit"><view class="name row"><input type="text" name="username"></view><view class="desc row"><textarea name="content"></textarea></view><view class="row"><radio-group name="gender"><label><radio value="1" /><text>男</text></label><label><radio value="0" /><text>女</text></label><label><radio value="2" checked /><text>保密</text></label></radio-group></view><view class="row"><picker :range="options" name="address" :value="selectedAddress" @change="selectedName">地址: {{options[selectedAddress]}}</picker></view><view class="row"><button form-type="submit" type="primary">提交表单</button><button form-type="reset">重置表单</button></view>{{form}}</form></view>
</template><script>export default {data() {return {form: null,options: ['北京', '上海', '广州', '深圳'],selectedAddress: 2}},methods: {toSubmmit(e) {console.log(e.detail.value);this.form = e.detail.value},selectedName(e) {this.selectedAddress = e.detail.value;}}}
</script><style lang="scss">.name {border: 1px solid #000000;padding: 10rpx;}.desc {border: 1px solid #000000;// 内边距padding: 10rpx;}.row {margin-bottom: 10rpx;}
</style>

在这里插入图片描述

提交表单三个条件:
1.标签中添加name
2.button添加form-type=‘submit’
3.form标签添加提交事件方法

组件

根目录下在components目录下创建组件文件夹，符合‘components/组件名称/组件名称.vue’目录结构

在这里插入图片描述

<template><view><view class="block">自定义组件</view></view>
</template><script>export default {name: "myitem",data() {return {};}}
</script><style lang="scss">.block {width: 100%;height: 200rpx;background-color: red;// 居中display: flex;justify-content: center;align-items: center;}
</style>

引入组件myitem

<myitem></myitem>

动态赋值子组件的属性字段props

props 可以是数组或对象，用于接收来自父组件的数据

新闻标题组件

<template><view><view class="pub-title"><view class="first">{{title}}</view><view class="second">新闻二标题</view><view class="line"></view><view>组件中data属性:{{commonData}}</view><view>组件中data属性随机值只加载一次:{{randomNum}}</view><view>组件中数组类型:{{list}}</view><view>组件中Object类型:{{obj}}</view></view></view>
</template><script>export default {props: {title: {type: String,// 属性默认值default: '新闻大标题'},subTitle: {type: String,default: '新闻二标题'},// 数组字段必须使用function返回list: {type: Array,default: function() {return [1, 2, 3]},},// 对象字段必须使用function返回obj: {type: Object,default: function() {return {name: '张三',age: 18}}}},data() {return {"commonData": "初始化commonData","randomNum": Math.random().toFixed(2)}}}
</script><style lang="scss">.pub-title {background-color: #FFEAC5;display: flex;flex-direction: column;align-items: center;justify-content: center;margin: 30rpx 0;.first {font-size: 40rpx;font-weight: bold;margin-right: 10rpx;}.second {font-size: 30rpx;color: #666;margin-right: 10rpx;}.line {width: 80rpx;height: 5rpx;background-color: #666;border-radius: 2rpx;margin-top: 20rpx;}}
</style>

使用组件

<!-- 把newBigTitle值赋值给组件的title属性 -->
<pub-title :title="newBigTitle"></pub-title>

export default {data() {return {newBigTitle: "demo4新闻大标题"}}
}

在这里插入图片描述

1.组件中定义props属性字段
2.组件中使用props属性
3.引入组件，赋值props属性值

组件中的数组类型和Object类型，必须使用function函数返回。

VUE语法

data 属性

data 必须声明为返回一个初始数据对象的函数（注意函数内返回的数据对象不要直接引用函数外的对象）；否则页面关闭时，数据不会自动销毁，再次打开该页面时，会显示上次数据。

data: 初始化页面属性值

//正确用法，使用函数返回对象data() {return {title: 'Hello'}}//错误写法，会导致再次打开页面时，显示上次数据data: {title: 'Hello'}//错误写法，同样会导致多个组件实例对象数据相互影响const obj = {title: 'Hello'}data() {return {obj}}

数据不会自动销毁，再次打开该页面时，会显示上次数据

<view>data属性随机值只加载一次:{{randomNum}}</view>

export default {data() {return {"randomNum": Math.random().toFixed(2)}}
}

刷新页面重新加载
在这里插入图片描述

指令

v-if/v-else

<view v-if="state">显示</view><!-- v-else必须在v-if下面 -->
<view v-else>不显示</view>

data() {return {title: 'Hello',state: true}
},

在这里插入图片描述

v-show

<view v-if="state">显示</view>
<view v-else>1</view>
<view v-show="state">v-show展示</view>
<view v-show="!state">v-show不展示</view>

在这里插入图片描述
v-show: 通过判断属性值真假，使用css样式控制内容是否显示

v-for循环

<view v-for="(item,index) in products" :key="index"><view>产品:{{item.name}} {{index}}</view><view>价格:{{item.price}} {{index}}</view>
</view>
<view v-for="(value,key,index) in forObject"><view>{{key}}: {{value}},脚标: {{index}}</view>
</view>

	export default {data() {return {title: 'Hello',state: true,products: [{name: "好物",price: "20.18"},{name: "好物1",price: "20.19"},forObject: {name: "张三",age: "29"}]}}}

在这里插入图片描述

<view class="test-for" v-for="index in 3"><image :src="image"></image>
</view>

v-for会遍历标签及其子内容

v-html标签

<!-- 解析html标签 -->
<view v-html="title"></view>
<view v-html="htmlStr"></view>

htmlStr: "<h1>Hello</h1>",
title: 'Hello',

在这里插入图片描述

v-bind动态绑定

v-bind: 动态绑定组件中的属性值

<view><!-- v-bind缩写 --><image :src="image" mode=""></image>
</view>

image: "/static/img/小猫测试.jpeg",

v-on 指令

指的是事件

<view v-on:click="onlickOn">{{title}}
</view>
<!-- 缩写 -->
<view @click="onlickOn">{{title}}
</view>

class与style绑定

<view class="box" :style="{background: bgcolor}"></view>

export default {data() {return {bgcolor: "#000"}}
}

在这里插入图片描述

<!-- 动态使用类样式 -->
<view class="box" :class="{myclass: state}"></view>

export default {data() {return {state: true}}
}

.myclass{width: 200rpx;height: 200rpx;border: 1rpx solid red;background: blue;
}
.box {width: 200rpx;height: 200rpx;border: 1rpx solid red;background: red;
}

在这里插入图片描述
动态指定myclass生效，背景色为蓝色，但仍被box样式覆盖了。说明动态指定的样式优先级低于静态样式的

使用三元表达式使类样式生效

<view class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">222</view><!-- 三元表达式 -->

导航栏示例

默认首页tab背景色红色，选中tab背景色变为红色，其他tab无背景色

<view class="nav"><view class="item" :class="activeIndex!=index ? '' : 'active'" v-for=" (item,index) in navs" :key="index"@click="activeNav(index)">{{item.name}}</view>
</view>

export default {data() {return {activeIndex: 0,navs: [{name: "首页"},{name: "介绍"},{name: "产品"},]}},methods: {activeNav(index) {this.activeIndex = index;}}}

.nav {// 子标签内容展示在同一行display: flex;.item {// 使view的宽度在父标签中平均分布flex: 1;// 内容行间距，可以让内容垂直居中line-height: 100rpx;// 水平居中text-align: center;&.active {background-color: red;}}
}

在这里插入图片描述

v-model双向绑定

<template><view><view @click="changeInput">标题: {{title}}</view><input class="text" v-model="title" /></view>
</template><script>export default {data() {return {title: '双向绑定',}},methods: {changeInput() {this.title = '改变后的标题'}}}
</script><style lang="scss">.text {width: 100%;height: 100rpx;border: 1px solid #000;}
</style>

双向绑定: 修改input值，data属性值跟着改变，修改data属性值，input值也会改变。
在这里插入图片描述

v-model示例

<view class="out"><view class="row"><input class="border" type="text" placeholder="请输入姓名" v-model="message.name"></view><view class="row"><input class="border" type="text" placeholder="请输入电话" v-model="message.mobile"></view><view class="row"><textarea class="border" placeholder="请输入内容" v-model="message.content"></textarea></view><button type="primary">提交</button>{{message}}
</view>

message: {name: '',mobile: '',content: ''
}

.out {padding: 30rpx;.row {margin-bottom: 20rpx;}.border {width: 100%;// 四个边填充10rpxpadding: 10rpx;border: 1px solid #000;// 内填充box-sizing: border-box;// 设置圆角border-radius: 10rpx;}
}

在这里插入图片描述

计算属性和侦听器

计算属性computed

<view>{{ message.split('').reverse().join('') }}
</view>

在模板中绑定表达式是非常便利的，但是它们实际上只用于简单的操作。在模板中放入太多的逻辑会让模板过重且难以维护，这里是想要显示变量 message 的翻转字符串。当你想要在模板中多包含此处的翻转字符串时，就会更加难以处理。

所以，对于任何复杂逻辑，你都应当使用计算属性。计算属性完全可以使用方法代替，区别在于计算属性存在缓存，对于加载不变数据计算属性性能高于方法。

<view><!-- 使用方法 -->第一次加载计算属性computeTitle值: {{computeTitle}}<br>第二次加载计算属性computeTitle值: {{computeTitle}}<br>第一次加载方法computeTitle值: {{computeTitleMethod()}}<br>第二次加载方法computeTitle值: {{computeTitleMethod()}}
</view>

methods: {computeTitleMethod() {return Math.random();}
},
computed: {computeTitle() {return Math.random();}
}

在这里插入图片描述

子组件触发自定义事件传递给父组件

子组件my-event

<input type="text" placeholder="请输入" @input="onInput" />methods: {onInput(e) {// 使用emit向父组件传递数据console.log("子组件输入值:" + e.detail.value);this.$emit('customEventName', e.detail.value)}
}

引入my-event

<!-- 引用子组件传值 -->
<my-event @customEventName="inputValue"></my-event>methods: {inputValue(e) {console.log("父组件接收值:" + e);}
}

在这里插入图片描述

  1. 子组件自定义事件名称
  2. 父组件引入子组件
  3. 父组件使用子组件定义的事件名称
  4. 子组件触发事件传递到父组件

父组件引入子组件时，如果使用原生事件，需要指定事件为本地事件

如:

<my-event @customEventName="inputValue" @clink.native="onClick"></my-event>

在使用子组件的同时，使用原生事件click，指定.native标识。

子组件向上传值案例

实现弹窗隐藏的功能

子组件my-pop弹窗

<template><view><!-- 弹出层 --><view class="box" :hidden="hiddenStatus"><view class="row"><view class="pop">弹窗内容</view></view><view class="row"><button @click="shut">关闭</button></view></view></view>
</template><script>export default {name: "my-pop",data() {return {};},props: {hiddenStatus: {type: Boolean,default: false}},methods: {shut() {this.$emit('shut');}},}
</script><style lang="scss">.box {background-color: #000000;opacity: 0.5;position: fixed;top: 0;left: 0;// 屏蔽父页面不可点击z-index: 999;// 屏蔽父页面滚动height: 100%;width: 100%;.row {display: flex;justify-content: center;align-items: center;.pop {width: 300rpx;height: 200rpx;background-color: #FFFFFF;border-radius: 10rpx;text-align: center;line-height: 300rpx;font-size: 40rpx;margin-top: 80%;}button {height: 100rpx;background-color: #000000;border-radius: 10rpx;color: #FFFFFF;}}}
</style>

父组件引入

<!-- 弹出框 -->
<view><button @click="showPopStatusClick">点击弹出框</button><my-pop :hiddenStatus="hiddenPop" @shut="shutPop"></my-pop>
</view>data() {return {hiddenPop: true}
},
methods: {showPopStatusClick() {this.hiddenPop = false},shutPop(e) {this.hiddenPop = true}
}

在这里插入图片描述

  1. 父组件默认弹窗隐藏
  2. 父组件点击事件显示弹窗
  3. 子组件弹窗触发自定义关闭事件
  4. 父组件接收事件，关闭弹窗

.sync 修饰符

当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。 .sync 它会被扩展为一个自动更新父组件属性的 v-on 监听器

使用sync修饰符，通过修改子组件的props可以修改父组件的属性值，因此在上面的案例中，可以通过修改子组件的hiddenStatus值，从而修改父组件的hiddenPop值。

<!-- <my-pop :hiddenStatus="hiddenPop" @shut="shutPop"></my-pop> -->
<!-- 这里不再需要点击事件修改hiddenPop值，而是通过sync修饰，把父组件的hiddenPop和子组件的hiddenStatus属性进行绑定 -->
<my-pop :hiddenStatus.sync="hiddenPop"></my-pop>

子组件修改

export default {props: {hiddenStatus: {type: Boolean,default: true}},methods: {shut() {// 子组件修改绑定值格式为update:hiddenStatus，从而修改了父组件的hiddenPop值this.$emit('update:hiddenStatus', true);}},
}
  1. 父组件使用.sync修改子组件hiddenStatus属性，从而绑定父组件的hiddenPop值
  2. 子组件自定义触发事件，事件名格式为 update:子组件属性值
  3. 通过子组件修改hiddenStatus值，从而修改了父组件的hiddenPop值
  4. 父组件监听hiddenPop改变，动态赋值子组件props属性值

sync修饰作用就像v-model双向绑定，只是作用在父子组件之间。


http://www.ppmy.cn/devtools/107874.html

相关文章

云原生存储Rook部署Ceph

云原生存储Rook部署Ceph

Rook 是一款云原生存储编排服务工具&#xff0c;Ceph 是一种广泛使用的开源分布式存储方案&#xff0c;通过Rook 可以大大简化 ceph 在 Kubernetes 集群中的部署和维护工作。 Rook 由云原生计算基金会( CNCF )孵化&#xff0c;且于 2020 年 10 月正式进入毕业阶段。Roo…
阅读更多...
证书过期傻瓜解决方案

证书过期傻瓜解决方案

20240906上午处理了一个gdd服务器SSL证书过期的问题&#xff0c;特此记录一下。 首先客户反映抖音小程序不能用然后百度阿里云&#xff0c;扫码登录阿里云到控制台界面查看证书域名到期情况&#xff0c; 发现阿里云那边记录的有效期是十月&#xff0c;按理说未到期&#xff0c…
阅读更多...
前端框架vue3中的条件渲染（v-show,v-if,v-else-if,v-else）

前端框架vue3中的条件渲染（v-show,v-if,v-else-if,v-else）

目录 v-show: 需求&#xff1a; v-if 区别与v-show&#xff1a; v-if和v-show的选择&#xff1a; v-else-if和v-else 联合使用&#xff1a; v-show: 部分代码如图&#xff1a; <body><div id"root"><div ><h1>n的值为{{n}}</h1>…
阅读更多...
虚幻地形高度图生成及测试

虚幻地形高度图生成及测试

虚幻地形高度图生成及测试 虚幻引擎地形系统将高度数据存储在高度图中&#xff0c;这是一个灰阶图像&#xff0c;使用黑白色值来存储地貌高程。在高度图中&#xff0c;纯黑色值表示最低点&#xff0c;纯白色值表示最高点。支持16位灰阶PNG、8位灰阶r8及16位灰阶r16格式。 本文…
阅读更多...
行为型设计模式-解释器（interpreter）模式

行为型设计模式-解释器（interpreter）模式

设计模式汇总&#xff1a;查看 通俗示例 想象一下你正在编写一个简单的计算器程序&#xff0c;用户可以输入类似 “3 4” 或 “5 * 2” 这样的表达式&#xff0c;并且你的程序需要计算出结果。为了解析和计算这些表达式&#xff0c;你可以设计一个解释器&#xff0c;它能够理…
阅读更多...
rancher搭建k8s及jenkins自动化部署

rancher搭建k8s及jenkins自动化部署

1、准备环境 角色IP用途k8s-rancher-master192.168.3.63master节点k8s-rancher-node01192.168.3.64node节点k8s-rancher-node02192.168.3.66node节点k8s-rancher-server192.168.2.33rancher-server节点注： 服务器名需要配置不同，相同服务器名不能加入node节点 在所有节点进行…
阅读更多...
macos下的 sed命令安装与使用 gnu-sed

macos下的 sed命令安装与使用 gnu-sed

sed命令是我们在linu类系统中非常重要的一个命令, 但是在macos下面默认是没有sed命令的, 不过我们可以通过brew install gnu-sed ( 或者通过 sudo port install gsed )这个软件包来获得这个命令 GNU sed 命令安装 下面2种方式,选择一种安装即可 # brew安装 brew install gn…
阅读更多...
记录 PyQt6 / PySide 6 自定义边框窗口的 Bug 及可能可行的解决方案：窗口抖动和添加 DWM 环绕阴影的大致原理

记录 PyQt6 / PySide 6 自定义边框窗口的 Bug 及可能可行的解决方案：窗口抖动和添加 DWM 环绕阴影的大致原理

前言&#xff1a; 本篇文章将要讨论我在前不久发表的关于 PyQt6 / PySide6 自定义边框窗口代码及内容中的问题&#xff1a; &#xff08;终&#xff09;PyQt6 / PySide 6 Pywin32 自定义标题栏窗口 完全还原 Windows 原生窗口边框特效_pyside6 win32 无边框窗口-CSDN博客ht…
阅读更多...
最新文章

Copyright @ 2022~2023