最新的uniapp vue3的语法

一、模板指令？

1、条件渲染

Vue3 中的条件渲染和 Vue2 中基本相同，可以使用 v-if、v-else-if 和 v-else 指令来实现条件渲染	

<template>
  <div>
    <p v-if="isShow">这是一个条件渲染的示例</p>
    <p v-else>这是另一个条件渲染的示例</p>
  </div>
</template>

2、列表渲染

Vue3 中的列表渲染和 Vue2 中基本相同，可以使用 v-for 指令来实现列表渲染。

<template>
  <ul>
    <li v-for="(item, index) in list" :key="index">{{ item }}</li>
  </ul>
</template>

3、属性绑定

Vue3 中的属性绑定和 Vue2 中基本相同，可以使用 v-bind 指令来实现属性绑定。

<template>
  <div :class="className" :style="styleObject"></div>
</template>

4、表单绑定

Vue3 中的表单绑定和 Vue2 中基本相同，可以使用 v-model 指令来实现表单绑定。

<template>
  <input type="text" v-model="inputValue" />
</template>

5、事件绑定

Vue3 中的事件绑定和 Vue2 中基本相同，可以使用 v-on 指令来实现事件绑定。

<template>
  <button v-on:click="handleClick">点击</button>
</template>

6、修饰符

Vue3 中的修饰符和 Vue2 中基本相同。Vue3 中的修饰符分为三类：事件修饰符、表单修饰符和按键修饰符。

6.1 事件

Vue3 中的事件修饰符和 Vue2 中基本相同，可以使用 .stop、.prevent、.capture、.self 和 .once 修饰符。

<template>
  <button v-on:click.stop="handleClick">点击</button>
</template>

6.2 表单

Vue3 中的表单修饰符和 Vue2 中基本相同，可以使用 .lazy 和 .number 修饰符。

<template>
  <input type="text" v-model.lazy="inputValue" />
</template>

6.3 按键

Vue3 中的按键修饰符和 Vue2 中基本相同，可以使用 .enter 和 .tab 等修饰符。

<template>
  <input type="text" v-on:keydown.enter="handleEnter" />
</template>

二、选项

1、data

data是一个对象，用来存放Vue实例的状态信息。

2、methods

methods是一个对象，用来存放Vue实例的方法。

3、watch 监听

watch允许我们监听Vue实例中某个或某些特定的数据变化，从而执行异步或开销较大的操作。

4、computed 计算

computed是一个对象，用来存放Vue实例中的计算属性。计算属性的值可以根据它的依赖自动更新。

5、生命周期

Vue实例的生命周期指的是在实例创建，挂载，更新和销毁这四个不同阶段，Vue实例会调用不同的钩子函数。

5.1、创建前后

Vue 3 中增加了一个新的组件创建钩子，beforeCreate，在实例初始化之后，数据观测，事件/属性/方法的挂载之前被调用。

5.2、挂载前后

 挂载前后：Vue 3 中增加了一个新的组件挂载钩子，beforeMount，在挂载到DOM前调用，此时子组件还未挂载。

5.3、更新前后

Vue 3 中增加了一个新的组件更新钩子，beforeUpdate，在组件数据更新之前调用，可以用于访问更新之前的状态。

5.4、卸载前后

Vue 3 中增加了一个新的组件卸载钩子，beforeDestroy，在组件销毁之前调用，可以清理一些临时状态。

3、组件

1、创建组件

1. 在Vue3中创建一个新的Vue实例，或者使用Vue.extend()方法将其作为一个新的组件：

const MyComponent = Vue.extend({
  // ...
});

2. 给组件添加一些props：

MyComponent.props = {
  // ...props
};

3. 创建模板，在模板中使用props：

MyComponent.template = `
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
`;

4. 添加其他的生命周期钩子和方法：

MyComponent.created = function() {
  // ...
};
MyComponent.methods = {
  // ...methods
};

5. 最后，在UniApp中使用这个组件：

<my-component :title="title" :content="content"></my-component>

2、导入使用

3、父子传参

（1）在父组件中定义一个方法，通过该方法将父组件的数据传递给子组件：

//父组件中
methods: {
  sendDataToChild(data){
    this.$refs['childComp'].getData(data);
  }
}

（2）在子组件中定义一个方法，获取父组件传递的数据：

//子组件中
methods: {
  getData(data){
    console.log(data);
  }
}

（3）在父组件中定义一个按钮，点击按钮触发父组件中定义的方法，将数据传递给子组件：

//父组件中
<button @click="sendDataToChild(data)">点击传参</button>

以上就是uniapp中vue3父子传参的步骤，代码示例中的data可以是任意的数据类型，比如对象、数组、字符串等等。

3、子父传参

1. 子组件中使用 props 接收父组件传递的参数：

props: {
    parentData: {
        type: Object,
        required: true
    }
}

2. 在父组件中使用子组件时，通过 v-bind 绑定父组件的数据来实现父子组件传参：

<Child :parentData="parentData" />

3. 子组件中可以通过 this.parentData 来访问父组件传递的数据。

4、跨层传参

1. 在main.js中定义一个全局变量，用来储存需要传递的数据：

//main.js
Vue.prototype.$globalData = {
    data1: 'data1',
    data2: 'data2'
}

2. 在需要传递数据的页面（pageA）中获取全局变量：

//pageA.vue
const globalData = this.$globalData;

3. 在pageA.vue中，通过路由传参的方式，传递数据到pageB.vue：

//pageA.vue
this.$router.push({
  name: 'pageB',
  params: {
    data1: globalData.data1,
    data2: globalData.data2
  }
})

4. 在pageB.vue中获取传入的参数：

//pageB.vue
const data1 = this.$route.params.data1
const data2 = this.$route.params.data2

五、总结一下：

Vue 3 是 Vue.js 的最新版本，它基于 TypeScript 构建，提供了一些新的特性和改进，使得开发更加高效。

在 Uniapp 中使用 Vue 3，我们需要注意以下几点：

1. 数据响应式

Vue 3 使用了 Proxy 对象来实现数据响应式。在组件中声明的响应式数据会被转换成 Proxy 对象，从而在数据变化时能够自动触发更新。

2. 组件

Vue 3 中定义组件的方式与 Vue 2 有所不同。使用 defineComponent() 方法来定义组件。组件的 props、data、methods 等属性都需要在组件定义中声明。同时，Vue 3 支持 setup() 方法来进行组件的初始化操作。

3. 生命周期

Vue 3 中的生命周期钩子函数与 Vue 2 中的有所不同。Vue 3 中使用了新的生命周期函数，如 beforeMount、mounted、beforeUpdate、updated、beforeUnmount、unmounted 等。

4. 模板和渲染函数

Vue 3 支持使用模板和渲染函数来进行组件的渲染。在使用模板时，可以使用新的 v-model 语法来实现双向数据绑定。

5. 路由

Vue 3 中的路由与 Vue 2 中的基本相同。需要注意的是，Vue 3 中的路由需要使用 createRouter() 方法来创建路由实例。

总之，Vue 3 提供了很多新的特性和改进，使得开发更加高效。在 Uniapp 中使用 Vue 3，需要注意上述几点，并结合实际情况进行开发。

是黑子就给我投币点赞