Uni-app-学习笔记 02
3、组件的基本使用
uni-app提供了丰富的基础组件给开发者，开发者可以像搭积木一样，组合各种组件拼接称自己的应用
uni-app中的组件，就像 HTML 中的 div 、p、span 等标签的作用一样，用于搭建页面的基础结构。
1) text文本组件的用法
text 组件的属性
text组件相当于行内标签、在同一行显示- 除了文本节点以外的其他节点都无法长按选中
代码案例
<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'> < > & '    </text> </view>
2) view视图容器组件的用法
View 视图容器， 类似于 HTML 中的 div
View组件的属性
代码案例
<view class="box2" hover-class="box2_active"> <view class='box1' hover-class='active' hover-stop-propagation, hover-start-time="2000",hover-stay-time='2000'> </view> </view>
3) button按钮组件的用法
button组件的属性
button组件默认独占一行，设置size为mini时可以在一行显示多个。
案例代码
<button size='mini' type='primary'>前端</button> <button size='mini' type='default' disabled='true'>前端</button> <button size='mini' type='warn' loading='true'>前端</button>
4）image组件的使用
image 图片
Tips
<image>组件默认宽度 300px、高度 225px；src仅支持相对路径、绝对路径，支持 base64 码；- 页面结构复杂，css样式太多的情况，使用 image 可能导致样式生效较慢，出现 “闪一下” 的情况，此时设置
image{will-change: transform},可优化此问题。
4、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
5、 uni-app中的数据绑定
在页面中需要定义数据，和我们之前的vue一摸一样，直接在data中定义数据即可
export default { data () { return { msg: 'hello-uniapp' } } }
插值表达式的使用
- 利用插值表达式渲染基本数据
<view>{{msg}}</view>
- 在插值表达式中使用三元运算
<view>{{ flag ? '肯定值':'否定值' }}</view>
- 基本运算
<view>{{1+1}}</view>
v-bind动态绑定属性
在data中定义了一张图片，我们希望把这张图片渲染到页面上
export default { data () { return { img: 'http://sunmiong.jpg' } } }
利用v-bind进行渲染
<image v-bind:src="img"></image>
还可以缩写成:
<image :src="img"></image>
v-for的使用
data中定以一个数组，最终将数组渲染到页面上
data () { return { arr: [ { name: 'sunming', age: 18 }, { name: '孙不坚', age: 18 } ] } }
利用v-for进行循环
<view v-for="(item,i) in arr" :key="i">名字：{{item.name}}---年龄：{{item.age}}</view>
- 在其他组件中导入该组件并注册
import login from "@/components/test.vue"
- 注册组件
components: {test}
- 使用组件
<test></test>
组件的生命周期函数
2、组件的通讯
父组件给子组件传值
通过props来接受外界传递到组件内部的值
<template> <view> 这是一个自定义组件 {{msg}} </view> </template> <script> export default { props: ['msg'] } </script> <style> </style>
其他组件在使用test组件的时候传递值
<template> <view> <test :msg="msg"></test> </view> </template> <script> import test from "@/components/test/test.vue" export default { data () { return { msg: 'hello' } }, components: {test} } </script>
子组件给父组件传值
通过$emit触发事件进行传递参数
<template> <view> 这是一个自定义组件 {{msg}} <button type="primary" @click="sendMsg">给父组件传值</button> </view> </template> <script> export default { data () { return { status: '打篮球' } }, props: { msg: { type: String, value: '' } }, methods: { sendMsg () { this.$emit('myEvent',this.status) } } } </script>
父组件定义自定义事件并接收参数
<template> <view> <test :msg="msg" @myEvent="getMsg"></test> </view> </template> <script> import test from "@/components/test/test.vue" export default { data () { return { msg: 'hello' } }, methods: { getMsg (res) { console.log(res) } }, components: {test} } </script>
