Vue 3简介Vue 3中文官网:https://cn.vuejs.org/官方发版地址:https://github.com/vuejs/core/releases截止2024年7月17日,最新的公开版本为:v3.4.32。创建Vue 3工程前提条件:已安装 18.3 或更高版本的Node.js安装好pnpm:npm i -g pnpmVite是新一代前端构建工具,官方推荐基于Vite创建项目,具体操作如下。创建项目命令:pnpm create vue@latest,将会安装并执行 create-vue,它是 Vue 官方的项目脚手架工具。具体配置:√ 请输入项目名称: ... vue-project √ 是否使用 TypeScript 语法? ... 是 √ 是否启用 JSX 支持? ... 否 √ 是否引入 Vue Router 进行单页面应用开发? ... 否 √ 是否引入 Pinia 用于状态管理? ... 否 √ 是否引入 Vitest 用于单元测试? ... 否 √ 是否要引入一款端到端(End to End)测试工具? » 不需要 √ 是否引入 ESLint 用于代码质
核心步骤子组件中:props通过value接收,事件触发input父组件中:v-model给组件直接绑数据src\components\BaseSelect.vue文件:<template> <div> <select :value="value" @change="handleChange"> <option value="101">北京</option> <option value="102">上海</option> <option value="103">广州</option> <option value="104">深圳</option> </select> </div> </template> <script>
非父子组件通信事件总线非父子组件之间,进行简易消息传递,可以使用事件总线(Event Bus)。使用步骤:创建一个都能访问的事件总线(空Vue实例,放到utils/EventBus.js)A组件(接收方)监听Bus实例的事件(订阅消息)B组件(发送方)触发Bus实例的事件(发布消息)src\utils\EventBus.js文件:// 1. 创建一个都能访问的事件总线(空Vue实例) import Vue from 'vue' const Bus = new Vue() export default Bussrc\components\BaseA.vue文件:<template> <div> A组件(接收方) <p>{{ msg }}</p> </div> </template> <script> import Bus from '../utils/EventBus' export default { created() { // 2. A组件(接收方)监听Bu
Vue CLI是Vue官方提供的一个全局命令工具。可以快速创建一个开发Vue项目的标准化基础架子,集成了webpack配置。使用脚手架的好处是:开箱即用,零配置内置babel等工具标准化使用步骤全局安装脚手架:npm i -g @vue/cli查看版本:vue --version创建项目架子:vue create vue-demo,不喜欢用命令行界面创建项目的话,可通过图形化界面向导来创建项目:vue ui启动项目:cd vue-demo然后npm run serve修改配置webpack文档地址:https://webpack.js.org/configuration/dev-server/修改vue.config.js文件:const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, devServer: { port: 8080, // 修改端口 // 添加代理 proxy: {
Vue生命周期过程中,会自动运行一些函数,被称为生命周期钩子,让开发者可以在特定阶段运行自己的代码。创建阶段(准备数据)beforeCreate()、created()挂载前阶段(渲染模板)beforeMount()、mounted()更新阶段beforeUpdate()、updated()卸载阶段beforeDestroy()、destroyed()
三毛
头发渐少,仅剩三根