uniapp中的样式和数据绑定(五)

• rpx即响应式px&＃xff0c;一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准&＃xff0c;750px恰好为屏幕宽度。屏幕变宽&＃xff0c;rpx实际显示效果会等比放大。
• 使用&＃64;import语句可以导入外联样式表&＃xff0c;&＃64;import后跟需要导入的外联样式表的相对路径&＃xff0c;用;表示语句结束
• 支持基本常用的选择器class&＃xff0c;id&＃xff0c;element等
• 在uni-app中不能使用*选择器。
• page相当于body节点
• 定义在App.vue中的样式为全局样式&＃xff0c;作用于每一个页面&＃xff0c;在pages目录下的vue文件中定义的样式为局部样式&＃xff0c;只作用在对应的页面&＃xff0c;并会覆盖App.vue中相同的选择器。
• uni-app支持使用字体图标&＃xff0c;使用方式与普通web项目相同&＃xff0c;需要注意以下几点&＃xff1a;
  • 字体文件小于40kb,uni-app会自动将其转化为base64格式&＃xff1b;
  • 字体文件大于等于40kb&＃xff0c;需开发者自己转换&＃xff0c;否则使用将不生效&＃xff1b;
  • 字体文件的引用路径推荐以~&＃64;开头的绝对路径。

&＃64;font-face{font-family:text1-icon;src:url(&＃39;~&＃64;/static/iconfont.ttf&＃39;)
}


1.1使用图标

<template><view><view>样式的学习</view><view class&＃61;"box1">测试文字<text>123</text></view><view class&＃61;"iconfont icon-tupian"> </view></view>
</template><script>
</script><style lang&＃61;"scss">&＃64;import url("./a.css");.box1{width: 750rpx;height: 750rpx;background: $global-color;font-size: 30rpx;text{color: pink;}}
</style>

2.uni-app中的数据绑定

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

export default{data(){return{msg:&＃39;hello-uni&＃39;}}
}


插值表达式的使用

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

{{msg}}


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

{{flag?’我是真的‘:&＃39;我是假的&＃39;}}


• 基本运算

{{1&＃43;1}}

3.v-bind动态绑定属性

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

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


利用v-bind进行渲染

还可以缩写成&＃xff1a;

利用v-for循环值

<view v-for&＃61;"(item,index) in arr" :key&＃61;"item.id">序号&＃xff1a;{{index}},名字&＃xff1a;{{item.name}},年龄&＃xff1a;{{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中是一样的&＃xff0c;通过v-on进行事件的绑定&＃xff0c;也可以简写为&＃64;

点我啊


事件函数定义在methods中

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


事件传参

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

//template
点我啊
//script
methods:{tapHandle(e){console.log(e)}
}


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

按钮methods:{clickHandle(num,e){console.log("点击我了",num,e)}