uniapp相关语法基础

模板语法 和 数据绑定

i模板语法

数据初始化

动态数据绑定

动态绑定类名

动态绑定类名

事件绑定

事件绑定

事件响应方法
简写方式

条件判断(某一块元素是否要渲染) v-if 和 v-else、v-else-if

v-if如果表达式返回真值,为true 那么我们就会正常的渲染内容

image.png
image.png
v-else
v-else-if

列表渲染: 通过一个数组来渲染一个列表

数组
列表渲染
元素和下标的别名
对象的打印

基础组件的使用:https://uniapp.dcloud.net.cn/component/

view: 占据整行
text: 相当于span

scroll-view


image.png

image.png
v-model双向绑定
数据初始化

自定义组件的使用

在根目录下创建目录 components

在components文件夹下 新建 组件


image.png

image.png

使用组件


image.png

组件的属性传递


props属性

属性传递

自定义组件的事件


onClick

onClick实现
事件传递

image.png

slot


组件内部使用slot
组件渲染

uniapp的基础api

官方文档:https://uniapp.dcloud.net.cn/api/

打印 :敲clog:可直接输出console.log();敲clogv:可输出console.log(": " + );

条件编译:

条件编译写法
条件编译1
条件编译2

页面布局:

页面布局

rpx : 是以750宽屏幕的相对单位, 不能使用在template的动态数值做单位

引入外部样式
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 单页面程序 uni-app 约定页面文件遵循 Vue 单文件组件 (SFC) 规范[https://vue-loa...
    Jagtu阅读 15,215评论 0 0
  • 1 升级/更新 uniapp升级/更新的文档 uni-app资源在线升级/热更新 以及 uni-app 整包升级/...
    司空洛一阅读 3,298评论 0 0
  • uni-app的基本使用 课程介绍: 基础部分: 环境搭建 页面外观配置 数据绑定 uni-app的生命周期 组件...
    绿茵场上的码者阅读 46,496评论 1 21
  • uni-app的基本使用 课程介绍: 基础部分: 环境搭建 页面外观配置 数据绑定 uni-app的生命周期 组件...
    __Mr_Xie__阅读 1,473评论 0 1
  • uni-app的基本使用 基础部分: +环境搭建 +页面外观配置 +数据绑定 +uni-app的生命周期 +组件的...
    你的胡霸霸阅读 562评论 0 2