![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue3
BradyCC
这个作者很懒,什么都没留下…
展开
-
Vue3 异步组件的使用
Vue3 中 使用 defineAsyncComponent 定义异步组件,配置选项 component 替换为 loader ,用法如下:<template> <!-- 异步组件的使用 --> <AsyncPage /></tempate><script>import { defineAsyncComponent } from "vue";export default { components: { // 无.原创 2020-11-28 10:02:40 · 3590 阅读 · 0 评论 -
Vue3 函数式组件的使用
Vue3 中废除了 functional 特性声明,具体使用方法如下:<template> <!-- 函数式组件的使用 --> <Functional level="3">这是一个动态的h元素</Functional></template><script>export default { components: { Functional, }}</script><scrip.原创 2020-11-27 16:36:38 · 4825 阅读 · 1 评论 -
Vue3 渲染函数 Api 的使用
Vue3 中 渲染函数的用法更简单、直接,插槽统一使用 $slots 获取。<template> <!-- 渲染函数 Render Api 使用 --> <RenderTest v-model:counter="counter"> <template #default>title</template> <template #content>content...</template> &l.原创 2020-11-27 16:12:06 · 1648 阅读 · 0 评论 -
Vue3 全局 Api 与 v-model 的使用
Vue2 中的 Global Api 在 Vue3 中 改为 应用程序实例调用,如自定义组件// Vue2 使用 Vue.component 方式import Vue from "vue";import App from "./App.vue";Vue.component('App', App);// Vue3 使用 createApp().component 方式import { createApp, h } from "vue";import App from "./App.vue.原创 2020-11-27 15:42:11 · 665 阅读 · 0 评论 -
Vue3 Composition API - 数据监听
Vue3 提供了两种方式进行数据监听:watchEffect 和 watchwatchEffect 基于 Proxy 代理的响应式数据,主动监听响应式数据的变化watch 完全等效于 2.x this.$watch,属于懒执行基本用法<template> <div> <h3>{{ title }}</h3> <!-- ref --> <p>支持人数:{{ supNum }}</p> .原创 2020-08-03 20:37:22 · 1888 阅读 · 0 评论 -
Vue3 Composition API - 响应式API
Vue3 提供了两种方式构建响应式数据:ref 和 reactive基本用法<template> <div> <!-- ref --> <p>支持人数:{{ supNum }}</p> <p>反对人数:{{ oppNum }}</p> <p>支持率:{{ ratio }}</p> <button @click="changeNum(0)">.原创 2020-08-03 20:32:46 · 568 阅读 · 0 评论 -
Vue3 Composition API - setup
Vue3 推荐的 Composition API 相较于 Options API,使用更加灵活、逻辑更加清晰、易于维护、重用。具体用法详见:官方文档Composition API 入口setup 函数是一个新的组件选项。作为在组件内使用 Composition API 的入口点。setup() 在 初始化 props 之后 与 生命周期 beforeCreate 之前调用。所以,this 在 setup() 中不可用。基本用法:<template> <div>.原创 2020-07-29 07:37:16 · 391 阅读 · 0 评论 -
Vue3 项目搭建
两种方式搭建 Vue3 项目基于 vue/cli 搭建 Vue2 项目后,升级至 Vue3 (vue-cli-plugin-vue-next)基于 vite 直接搭建 Vue3 项目第一种方式# 创建项目vue create vue3demo# 安装依赖yarn# 升级至 Vue3vue add vue-next# 运行yarn serve第二种方式# 创建项目yarn create vite-app vue3vite# 安装依赖yarn# 运行yar.原创 2020-07-29 07:05:44 · 214 阅读 · 0 评论