vue3速览

简介: vue3速览

在您的Vue.js 3应用中,createApp 是用于创建一个Vue应用实例的函数。您已经正确地引入了它并开始创建应用,但目前根组件内部是空的。下面我将为您展示一个更完整的例子,说明如何设置根组件的模板、数据、方法等选项,并挂载到DOM上。

import { createApp } from 'vue'

const app = createApp({
  // 根组件的模板可以使用template属性定义
  template: `
    <div>
      <h1>{{ message }}</h1>
      <button @click="reverseMessage">{{ buttonText }}</button>
    </div>
  `,
  
  // 数据属性定义在setup函数中,返回一个对象
  setup() {
    let message = 'Hello Vue 3!';
    let buttonText = 'Reverse Message';

    // 方法也定义在setup函数内
    const reverseMessage = () => {
      message = message.split('').reverse().join('');
      buttonText = message === 'Hello Vue 3!' ? 'Reverse Message' : 'Original';
    };

    // 返回一个包含要注入到模板中的属性和方法的对象
    return {
      message,
      buttonText,
      reverseMessage
    };
  }
})

// 挂载应用到DOM的一个元素上,例如ID为'app'的元素
app.mount('#app')

在这个示例中,我们定义了一个简单的Vue 3应用,其根组件有一个欢迎信息和一个按钮。点击按钮会触发reverseMessage方法,该方法反转消息文本,并改变按钮的文本以反映是否显示原始消息或已反转的消息。最后,我们使用app.mount('#app')将这个应用挂载到HTML中ID为app的元素上。


记得在您的HTML文件中包含一个挂载点:

<div id="app"></div>
• 1

并且确保在使用此代码之前已经通过CDN或构建工具引入了Vue 3。

当然可以,Vue 3 应用允许你向根组件传递props。这在创建可复用的组件或需要根据外部条件初始化组件状态时非常有用。不过,与Vue 2不同,在Vue 3中,你需要在创建应用实例之后,使用app.provide()来提供全局属性,或者在挂载时直接传递props给根组件。这里展示如何直接向根组件传递props:


首先,修改你的JavaScript代码以接收props:

import { createApp } from 'vue'

const app = createApp({
  // ...
  setup(props) {
    // 现在你可以在这个函数内通过props访问传入的参数
    console.log(props.initialMessage);
    
    // 假设我们使用props来初始化message
    let message = props.initialMessage;
    // ... 其他逻辑保持不变 ...
  },
  // ...
})

然后,在挂载应用到DOM时传递props:

app.mount('#app', { initialMessage: 'Hello from props!' });

在这个例子中,我们向根组件传递了一个名为initialMessage的prop,并在setup函数中通过props参数访问它。这样,你就可以根据传递的参数来初始化应用的状态或其他配置了。


请注意,这种方式适用于简单场景或快速原型开发。对于更复杂的应用,推荐使用Vue的依赖注入系统(provide/inject)或者利用路由参数、状态管理库(如Vuex)来传递和管理状态。


目录
相关文章
|
9天前
|
JavaScript 前端开发 开发者
vue3+ts配置跨域报错问题解决:> newpro2@0.1.0 serve > vue-cli-service serve ERROR Invalid options in vue.
【6月更文挑战第3天】在 Vue CLI 项目中遇到 &quot;ERROR Invalid options in vue.config.js: ‘server’ is not allowed&quot; 错误是因为尝试在 `vue.config.js` 中使用不被支持的 `server` 选项。正确配置开发服务器(如代理)应使用 `devServer` 对象,例如设置代理到 `http://xxx.com/`: ```javascript module.exports = { devServer: {
24 1
|
9天前
|
JavaScript 前端开发 数据安全/隐私保护
vue3+ts+elementplus写一个登录页面教程
【6月更文挑战第3天】本文介绍了如何使用 Vue 3 和 TypeScript 创建一个登录页面。首先,需安装 Vue CLI,然后创建新项目并启用 TypeScript 支持。接着,创建 `Login.vue` 组件,设计登录表单,包括用户账号、密码和验证码字段,并实现相关验证规则。页面样式包括背景、登录框和按钮等元素的布局与样式。最后,展示了`&lt;script&gt;`部分的代码,包括表单验证逻辑、生成验证码的函数以及登录提交处理。文章还提供了一个登录页面的截图和完整代码示例。
31 1
|
11天前
|
JavaScript 编译器 API
vue2和vue3区别
vue2和vue3区别
16 4
|
1天前
|
JSON JavaScript 前端开发
在Vue3项目中,Vite起到的作用及其可以做的事情
Vite是Vue 3项目的关键快速开发服务器和高效的热模块替换(HMR)。它的亮点包括:使用ES模块实现快速启动和动态加载,模块级别HMR提升开发效率,Rollup打包优化生产构建。此外,Vite还支持插件系统、自定义配置、静态资源处理和现代JS特性。通过`npm create vite`可快速搭建Vue项目,配置文件`vite.config.js`可定制行为,`.env`文件管理环境变量。Vite优化了开发与构建流程,提高开发者效率并保证构建性能。
|
9天前
|
JavaScript API
vue3+element实现一个公告面板
vue3+element实现一个公告面板
36 0
vue3+element plus图片预览点击按钮直接显示图片的预览形式
vue3+element plus图片预览点击按钮直接显示图片的预览形式
|
10天前
|
存储 JavaScript 前端开发
vue3获取本地的当前时间转化为年月日显示然后计算之后一周的时间
vue3获取本地的当前时间转化为年月日显示然后计算之后一周的时间
|
10天前
|
存储 JavaScript API
Vue 3 中实现引导页
Vue 3 中实现引导页