一、模板指令?

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,需要注意上述几点,并结合实际情况进行开发。

是黑子就给我投币点赞

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐