小程序开发之路uni-app 03「这是我参与2022首次更文挑战的第13天，活动详情查看：2022首次更文挑战」使用

「这是我参与2022首次更文挑战的第13天，活动详情查看：2022首次更文挑战」

使用vue3+vite开发uniApp

HbuilderX更新至3.3.0+，uni-app在App/H5/小程序全平台支持Vue 3.0开发。

HBuilderX创建支持 vue3 的 uni-app 项目

创建一个 uni-app 项目
在项目的 manifest 的「基础配置」中切换「vue 版本选择」，默认是 vue2，切换为 vue3 即可

cli 创建支持 vue3 的 uni-app 项目

创建 Vue3/Vite 工程

复制代码# 创建以 javascript 开发的工程  
npx degit dcloudio/uni-preset-vue#vite my-vue3-project  

# 创建以 typescript 开发的工程  
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

进入工程目录
```
复制代码cd my-vue3-project  
```
安装依赖
```
复制代码npm i  或  yarn  
```

运行

复制代码# 运行到 h5   
npm run dev:h5  
# 运行到 app   
npm run dev:app  
# 运行到 微信小程序  
npm run dev:mp-weixin

打包

复制代码# 打包到 h5   
npm run build:h5  
# 打包到 app   
npm run build:app  
# 打包到 微信小程序  
npm run build:mp-weixin

注意：

Vue3 中，调用成功会进入 then 方法，调用失败会进入 catch 方法
Vue2 中，调用无论成功还是失败，都会进入 then 方法，返回数据的第一个参数是错误对象，第二个参数是返回数据

Vue3 语法

支持三目运算

 <view>{{ ok ? 'YES' : 'NO' }}</view>

v-bind

动态地绑定一个或多个属性，v-bind缩写为‘ : ’

<!-- 完整语法 -->
    <image v-bind:src="imgUrl"></image>
    <!-- 缩写 -->
    <image :src="imgUrl"></image>

v-on

v-on 指令，它用于监听 DOM 事件。v-on缩写为‘ @ ’

<!-- 完整语法 -->
    <view v-on:click="doSomething">点击</view>    
    <!-- 缩写 -->
    <view @click="doSomething">点击</view>

v-once

只渲染元素和组件一次。

Class

<view class="static" :class="{ active: isActive}">hello uni-app</view>  
<view :class="[isActive ? activeClass : '', errorClass]"></view>  
<view class="container" :class="{active: isActive}">hello uni-app</view>

v-if和v-else

v-if 指令用于条件性地渲染一块内容。

<view>
  <view v-if="seen">现在你看到我了</view>
  <view v-else>你看不到我了</view>
</view>

v-show

与v-if不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性的 display 。

v-for

<view v-for="(item, index) in items">
  {{ parentMessage }} - {{ index }} - {{ item.message }}
</view>

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute。如不提供 :key，会报一个 warning

推荐在同一元素上使用 v-if 和 v-for

当它们处于同一节点，v-if 的优先级比 v-for 更高，这意味着 v-if 将没有权限访问 v-for 里的变量。

<!-- 这将引发错误，因为未在实例上定义属性“todo” -->
<view v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</view>

//修正
<template v-for="todo in todos">
	<view v-if="!todo.isComplete">
  {{ todo }}
  </view>
</template>

事件处理

v-on 指令 (通常缩写为 @ 符号)

<button @click="counter += 1">Add 1</button>
<button @click="greet">Greet</button>

methods: {
  greet(event){
    // `event` 是原生 DOM 事件
    console.log(event);
    uni.showToast({
      title: 'Hello ' + this.name + '!'
    });
  }
}

有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法

<button @click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

v-model

<input v-model="message" placeholder="edit me">

uni-app表单组件

建议使用uni-app表单组件。

computed

computed: {
  // 计算属性的 getter
    publishedBooksMessage() {
      // `this` points to the vm instance
      return this.author.books.length > 0 ? 'Yes' : 'No'
    }
  }
}

侦听器watch

监听数据变化，调用响应函数。

至此Vue的基础知识完成。