uni-app中的样式和数据绑定(五)

---

1.uni-app种的样式

• rpx即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750px恰好为屏幕宽度。屏幕变宽，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:text1-icon;
	src:url('~@/static/iconfont.ttf')
}

1.1使用图标

<template>
	<view>
		<view>样式的学习</view>
		<view class="box1">
			测试文字
			<text>123</text>
		</view>
		<view class="iconfont icon-tupian"> </view>
	</view>
</template>

<script>
</script>

<style lang="scss">
	@import url("./a.css");
	.box1{
		width: 750rpx;
		height: 750rpx;
		background: $global-color;
		font-size: 30rpx;
		text{
			color: pink;
		}
	}
</style>

2.uni-app中的数据绑定

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

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

插值表达式的使用

• 利用插值表达式渲染基本数据

<view> {{msg}}</view>

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

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

• 基本运算

<view>{{1+1}}</view>

3.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循环值

	<view v-for="(item,index) in arr" :key="item.id">
			序号：{{index}},
			名字：{{item.name}},
			年龄：{{item.age}}
		</view>
			data() {
			return {
				msg: "hello",
				flag: true,
				img: "http://destiny001.gitee.io/image/monkey_02.jpg",
				arr: [{
						name: "宋小宝",
						age: 20,
						id: 1
					},
					{
						name: "刘能",
						age: 20,
						id: 2
					},
					{
						name: "赵四",
						age: 20,
						id: 3
					},
					{
						name: "小沈阳",
						age: 20,
						id: 4
					}
				]
			}
		}

4.uni中的事件

事件绑定
在uni中事件绑定和vue中是一样的，通过v-on进行事件的绑定，也可以简写为@

<button @click="tapHandle">点我啊</button>

事件函数定义在methods中

methods:{
tapHandle(){
	console.log("真的点我了")
	}
}

事件传参

• 默认如果没有传递参数，事件函数第一个形参为事件对象

//template
<button @click="tapHandle"> 点我啊</button>
//script
methods:{
	tapHandle(e){
	 console.log(e)
	}
}

• 传入指定参数和事件对象

		<button type="primary" v-on:click="clickHandle(20,$event)">按钮</button>
			
		methods:{
				clickHandle(num,e){
					console.log("点击我了",num,e)
				}