5. 简单说一说uniapp中的语法吧

前言

如果你 知道Vue3并且对Vue3的语法有一定了解，请跳过这一章，由于后续项目主要是基于Vue3+TypeScript，因此提前简单概述一些Vue3的基础语法~

本文的目的是 期望通过对本文的阅读后能对Vue3的每个语法有一个简单的印象，至少要知道文中常见语法的作用是什么，算是进行比较初级的扫盲吧；

概述

阅读时间：约7～10分钟；

本文重点：

• 通过本文你可以知道一些Vue3中的基本语法与结构；
• 大致知道一下常见语法的作用是什么；

正文

看一个例子吧，我们通过示例代码进行说明，例子如下：

<template>
    <view class="app-container">
          <u-skeleton :rows="3" :title="false" loading />
    </view>
</template>

<script lang="ts" setup>
import { ref, type Ref } from 'vue';
const swiperList1 = ref([
    'https://cdn.uviewui.com/uview/swiper/swiper1.png',
    'https://cdn.uviewui.com/uview/swiper/swiper2.png',
    'https://cdn.uviewui.com/uview/swiper/swiper3.png',
]);

const loading = ref(false);

function refresh() {
    loading.value = true;

    setTimeout(() => {
        loading.value = false;
    }, 1000);
}
</script>

<style scoped lang="scss">
.app-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
</style>

这段代码是一个简单的uniapp中的某个页面，从整体结构上看看代码可以分成三部分，分别是由template，script，style三块组成（PS：这三块可以约等于视同前端领域中的HTML+Javascript+CSS）

template

template，类似于传统前端中的html部分，它主要的作用是制作页面的骨架、结构；

思考一个场景，当我们前端拿到一张设计稿后首先应该做什么？肯定是先思考页面的整体结构，比如整体是上下结构还是左右结构，只有结构上思考完善了才考虑接下来的部分，否则一旦存在没有考虑到的情况，当某个功能点出现html结构不支持的时候那问题就大了...

静态显示

什么是静态显示？在开发中存在少部分页面是纯静态展示页面的，这部分页面不需要与后台交互，这类写法比较简单，直接写就是了

<template>
    <view class="app-container">
        <view class="app-title">这是本页面的标题</view>
    	<view class="app-content">这是本页面的内容</view>
    </view>
</template>

很简单，直接写，不需要其他配置

动态显示

和静态显示对应，动态显示是绝大多数页面上的显示方式，比如用户名显示，这个取决于登录用户是哪一个；

动态显示需要和script结合使用，在script存储变量名字，然后将变量嵌入到template里，进而变量的值是什么，页面上则显示什么；

双花括号

嵌入的核心语法：双花括号 语法，它的作用就是将变量嵌入到template中，如下

<template>
    <view class="app-container">
        <view class="app-title">这是本页面的标题</view>
		<view class="app-content">{{ text }}</view>
    </view>
</template>

<script lang="ts" setup>
const text="这是本页面的内容"
</script>

此时显示在页面上的text的区域文字是：这是本页面的内容

v-if（条件渲染）

除了正常的显示外，有这么一种情况，有时候需要对显示的内容进行一个判断，如果有值显示内容，如果没有值则显示“暂无内容”，这种v-if就起到作用了；

它书写的位置在template里的标签上，如下：

<template>
    <view class="app-container">
    	<view v-if="swiperList1.length>2">{{ text }}</view>
    	<view v-else-if="swiperList1.length===1">{{ text }}</view>
    	<view v-else>无显示内容</view>
    </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const text="这是本页面的内容"
const swiperList1 = ref([
    'https://cdn.uviewui.com/uview/swiper/swiper1.png',
    'https://cdn.uviewui.com/uview/swiper/swiper2.png',
    'https://cdn.uviewui.com/uview/swiper/swiper3.png',
]);
</script>

这里出现了关于v-if的一套用法，一共三个，分别是：v-if，v-else-if，v-else，含义也很好理解，哪个后面的条件符合就显示那个内容，如果都不满足，则显示v-else里面的

v-for（列表渲染）

除了条件渲染，还有这么种场景，页面上需要重复显示一列内容，如新闻列表，对于这种我们可以使用v-for进行重复显示

<template>
    <view class="app-container">
        <view class="app-title">这是本页面的标题</view>
        <view v-for="item in newsList" :key="item.id">{{ item.title }}</view>
    </view>
</template>

<script lang="ts" setup>
import { ref, type Ref } from 'vue';

const newsList = ref([
    {
        title: '新闻标题1',
        id: 1,
    },
    {
        title: '新闻标题2',
        id: 2,
    },
    {
        title: '新闻标题3',
        id: 3,
    },
]);

</script>

这样就可以快速显示三条信息

script

script，类似于传统前端中的Javascript部分，它的主要作用是进行逻辑处理，如动态获取页面内容

ref

ref，作用是 将变量的值定义为实时可变的，以上方双花括号为例

<template>
    <view class="app-container">
    	<view class="app-content">{{ text }}</view>
        <view class="app-content">{{ text1 }}</view>
    </view>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  
  const text="这是本页面的内容";
  const text1=ref("这是本页面的内容");
</script>

这两个最大的区别是，text1显示的内容，会随着其值的变化而变化，text则是不会，举个场景例子吧；

我们页面上显示的内容往往是通过api从后端获取的，通过ref定义的值显示在页面上时，它能随时动态改变，比如

<template>
    <view class="app-container">
    	<view class="app-content">{{ text }}</view>
        <view class="app-content">{{ text1 }}</view>
    </view>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  
  let text="这是本页面的内容";
  const text1=ref("这是本页面的内容");

  setTimeout(()=>{
    // 修改值必须修改其value值，不能直接text1="xxxx"
    text1.value="修改后的值"

    // 不使用ref则不需要使用到value，可直接修改
    text="修改后的值"
  },2000)
</script>

2秒后，text1显示在页面上的值会从"这是本页面的内容"变成"修改后的值", 如果不使用ref则不管怎么修改text，显示在页面上的值仍然是"这是本页面的内容"；

computed

计算属性，computed，其作用是被动的，动态的，改变值，可能不太好理解，举个例子吧，比如我们要显示的是列表中一共有多少行，如果使用ref那么我们需要这么写

<template>
    <view class="app-container">
        <view class="app-title">{{ number }}</view>
    </view>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';

const data: any = ref([]);
const number = ref(0);

setTimeout(() => {
    data.value = [
        {
            name: '1',
            value: 1,
        },
        {
            name: '2',
            value: 2,
        },
    ];

    number.value = data.value.length;
}, 2000);
</script>

如果使用computed就简单一些，它能被动的，根据值进行动态变化

<template>
    <view class="app-container">
        <view class="app-title">{{ number }}</view>
    </view>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';

const data: any = ref([]);
const number = computed(() => data.value.length);

setTimeout(() => {
    data.value = [
        {
            name: '1',
            value: 1,
        },
        {
            name: '2',
            value: 2,
        },
    ];
}, 2000);
</script>

watch

和computed不同，watch的目的是主动的监听某一个变量，当这个变量发生变化时以便我们主动的做出一些应对措施；

<template>
    <view class="app-container">
        <view class="app-title">{{ number }}</view>
    </view>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';

const data: any = ref([]);
const number = ref(0);

setTimeout(() => {
    data.value = [
        {
            name: '1',
            value: 1,
        },
        {
            name: '2',
            value: 2,
        },
    ];
}, 2000);

// 监听data的变化
watch(
    () => data.length,
    (value) => {
        // 具体的应对措施
        number.value = value.length;
    }
);
</script>

style

style，类似于传统前端中的CSS部分，它的主要作用是将骨架template以更美观的形式展现到用户面前，和传统CSS不同的是，在Vue中的style是支持三方库的，比如sass，less

lang

其作用是指的css的类型，比如指的style中的语法是less

<style lang="less">
.app-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.app-title {
    font-size: 24px;
    font-weight: bold;
}
</style>

值得注意的是，如果想要使用这些三方库并没有天然的集成在里面，使用前要进行安装；

scoped

scoped，其作用是防止样式污染，比如，我们在a页面存在一个样式名叫做"app-container"，然后在b页面也存在一个样式名叫做"app-container"，这是该怎么办？通常有两种做法

• 第一种：修改掉其中一个样式名；
• 第二种：都加上scoped，加上scoped之后，Vue会主动的给每一个样式加上唯一的标签，使其不会污染到别的页面里面的样式；

<style scoped>
.app-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.app-title {
    font-size: 24px;
    font-weight: bold;
}
</style>

本章小结

本章简单的分享了一下在Vue3中常用到的几种语法，通过本章我们知道了：

• 一个正常的Vue或者说uniapp页面通常包含三部分，别分是：template，script，style；
• template约等于传统前端开发的html，是页面的骨架；
• script约等于传统前端开发的Javascript，是页面上的逻辑；
• style约等于传统前端开发中的css，是用来丰富页面上显示效果；