uniapp中组件的基本使用和数据绑定

最新推荐文章于 2024-11-07 09:35:12 发布

原创最新推荐文章于 2024-11-07 09:35:12 发布 · 1.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue #html #js #css

笔记专栏收录该内容

5 篇文章

订阅专栏

本文介绍了uni-app的基础组件使用，包括text、view、button和image组件，详细讲解了各组件的属性和用法，并提供了代码示例。同时，文章还涵盖了uni-app中的数据绑定，包括插值表达式、v-bind动态绑定和v-for循环，以及uni-app的样式单位rpx和样式使用规范。此外，还提到了如何在uni-app中使用scss或less。

组件的基本使用

uni-app提供了丰富的基础组件给开发者，开发者可以像搭积木一样，组合各种组件拼接称自己的应用

uni-app中的组件，就像 HTML 中的 div 、p、span 等标签的作用一样，用于搭建页面的基础结构

text文本组件的用法

001 - text 组件的属性

属性	类型	默认值	必填	说明
selectable	boolean	false	否	文本是否可选
space	string	.	否	显示连续空格，可选参数：`ensp`、`emsp`、`nbsp`
decode	boolean	false	否	是否解码

text 组件相当于行内标签、在同一行显示
除了文本节点以外的其他节点都无法长按选中

002 - 代码案例

<view>
  <!-- 长按文本是否可选 -->
  <text selectable='true'>来了老弟</text>
</view>

<view>
  <!-- 显示连续空格的方式 -->
  <view>
    <text space='ensp'>来了  老弟</text>
  </view>
  <view>
    <text space='emsp'>来了  老弟</text>
  </view>
  <view>
    <text space='nbsp'>来了  老弟</text>
  </view>
</view>

<view>
  <text>skyblue</text>
</view>

<view>
  <!-- 是否解码 -->
  <text decode='true'>&nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp;</text>
</view>

view视图容器组件的用法

View 视图容器，类似于 HTML 中的 div

001 - 组件的属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xH8VYTSW-1629612850764)(./images/2view.png)]

002 - 代码案例

<view class="box2" hover-class="box2_active">
  <view class='box1' hover-class='active' hover-stop-propagation :hover-start-time="2000" :hover-stay-time='2000'>
//冒号是一个表达式，不加的话里面的 2000 会被认为是一个字符串
  </view>
</view>

button按钮组件的用法

001 - 组件的属性

属性名	类型	默认值	说明
size	String	default	按钮的大小
type	String	default	按钮的样式类型
plain	Boolean	false	按钮是否镂空，背景色透明
disabled	Boolean	false	是否按钮
loading	Boolean	false	名称是否带 loading t图标

button 组件默认独占一行，设置 size 为 mini 时可以在一行显示多个

002 - 案例代码

<button size='mini' type='primary'>前端</button>

<button size='mini' type='default' disabled='true'>前端</button>

<button size='mini' type='warn' loading='true'>前端</button>

image组件的使用

image

图片。

属性名	类型	默认值	说明	平台差异说明
src	String		图片资源地址
mode	String	‘scaleToFill’	图片裁剪、缩放的模式

Tips

<image> 组件默认宽度 300px、高度 225px；
src 仅支持相对路径、绝对路径，支持 base64 码；
页面结构复杂，css样式太多的情况，使用 image 可能导致样式生效较慢，出现 “闪一下” 的情况，此时设置 image{will-change: transform} ,可优化此问题。

uni-app中的样式

rpx 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大。
使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束
支持基本常用的选择器class、id、element等
在 uni-app 中不能使用 * 选择器。
page 相当于 body 节点
定义在 App.vue 中的样式为全局样式，作用于每一个页面。在 pages 目录下的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器。
uni-app 支持使用字体图标，使用方式与普通 web 项目相同，需要注意以下几点：
- 字体文件小于 40kb，uni-app 会自动将其转化为 base64 格式；
- 字体文件大于等于 40kb，需开发者自己转换，否则使用将不生效；
- 字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。
```
 @font-face {
     font-family: test1-icon;
     src: url('~@/static/iconfont.ttf');
 }
```
如何使用scss或者less
- 点击工具–> 插件安装 --> 安装

uni-app中的数据绑定

在页面中需要定义数据，和我们之前的vue一摸一样，直接在data中定义数据即可

export default {
  data () {
    return {
      msg: 'hello-uni'
    }
  }
}

插值表达式的使用

利用插值表达式渲染基本数据
```
<view>{{msg}}</view>
```

在插值表达式中使用三元运算

<view>{{ flag ? '我是真的':'我是假的' }}</view>

基本运算
```
<view>{{1+1}}</view>
```

v-bind动态绑定属性

在data中定义了一张图片，我们希望把这张图片渲染到页面上

export default {
  data () {
    return {
      img: 'http://destiny001.gitee.io/image/monkey_02.jpg'
    }
  }
}

利用v-bind进行渲染

<image v-bind:src="img"></image>

还可以缩写成:

<image :src="img"></image>

v-for的使用

data中定以一个数组，最终将数组渲染到页面上

data () {
  return {
    arr: [
      { name: '刘能', age: 29 },
      { name: '赵四', age: 39 },
      { name: '宋小宝', age: 49 },
      { name: '小沈阳', age: 59 }
    ]
  }
}

利用v-for进行循环

<view v-for="(item,index) in arr" :key="index">序号：{{index}}，名字：{{item.name}}---年龄：{{item.age}}</view>
//加key是为了防止就近复用