uni-app（2）基础语法

最新推荐文章于 2024-05-08 14:36:34 发布

黑卡米

最新推荐文章于 2024-05-08 14:36:34 发布

阅读量715

点赞数

分类专栏： uni-app 文章标签： vue js uni-app

本文链接：https://blog.csdn.net/Aaren_Jiang/article/details/105923431

版权

uni-app 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

开发工具

HBuilderX，如果要开发uni-app肯定是官方的工具支持最好。

介绍

uni-app官方推荐使用flex布局，兼容性最好。
代码里的语法是小程序和vue的结合，uni-app之所以能兼容多平台也是因为小程序的出现。
并不是所有的代码都可以跑不同平台，有时候需要对不同平台进行独立编写。

工具

在HBuilderX工具里直接创建一个uni-app项目，就可以开始基础语法练习了。

模版语法与数据绑定

//正确用法，使用函数返回对象
    data() {
        return {
            title: 'Hello'
        }
    }
				
//错误写法，会导致再次打开页面时，显示上次数据
    data: {
        title: 'Hello'
    }

通过下面的方法引用数据

<span>标题: {{ title }}</span>

条件渲染

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
在data数据里，awesome为true的时候展示Vue is awesome.

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>

列表渲染

in和of都可以用做循环，没有区别
item是循环的内容，index是索引

<ul id="example-1">
  <li v-for="(item, index) in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>

var example1 = new Vue({
      el: '#example-1',
      data: {
        items: [
          { message: 'Foo' },
          { message: 'Bar' }
        ]
      }
    })

基础组建

uni-app为开发者提供了一系列基础组件，类似HTML里的基础标签元素。但uni-app的组件与HTML不同，而是与小程序相同，更适合手机端使用。

了解View和ScrollView的内容（点击小标题可以传送过去）

自定义组件

先了解Vue组件的基础

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。在uni-app里的easycom将其精简为一步。只要组件安装在项目的components目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用。如下：

<template>
    <view class="container">
        <uni-list>
            <uni-list-item title="第一行"></uni-list-item>
            <uni-list-item title="第二行"></uni-list-item>
        </uni-list>
    </view>
</template>
<script>
    // 这里不用import引入，也不需要在components内注册uni-list组件。template里就可以直接用
    export default {
        data() {
            return {

            }
        }
    }
</script>

注：HBuilderX 2.5.5起支持easycom组件模式。

条件编译

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

下面的简单例子，点我见更多详细。

#ifdef APP-PLUS
这里是app平台的代码
#endif

生命周期

在uni-app里面有三种什么周期：app生命周期、页面生命周期、组件生命周期。

APP生命周期函数名	说明
onLaunch	当uni-app 初始化完成时触发（全局只触发一次）
onShow	当 uni-app 启动，或从后台进入前台显示
onHide	当 uni-app 从前台进入后台
onError	当 uni-app 报错时触发
onUniNViewMessage	对 nvue 页面发送的数据进行监听，可参考 nvue 向 vue 通讯

页面生命周期

组件生命周期