网站下载地址,软件外包产业是什么意思,wordpress子菜单,有那些网站做结伴旅游的文章目录 简介什么是Vue概述优势MVVM框架 Vue的特性数据驱动视图双向数据绑定指令插件 Vue的版本版本概述新版本Vue 3Vue 3新特性UI组件库UI组件库概述常用UI组件库 安装Vue安装Vue查看Vue版本 实例利用Vue命令创建Vue项目切换工作目录安装vue-cli脚手架创建Vue项目启动Vue项目… 文章目录 简介什么是Vue概述优势MVVM框架 Vue的特性数据驱动视图双向数据绑定指令插件 Vue的版本版本概述新版本Vue 3Vue 3新特性UI组件库UI组件库概述常用UI组件库 安装Vue安装Vue查看Vue版本 实例利用Vue命令创建Vue项目切换工作目录安装vue-cli脚手架创建Vue项目启动Vue项目项目运行过程项目目录结构利用Vite工具创建Vue项目概述命令实战 简介
大家好今天我们将一起初探Vue前端框架。Vue是一款轻量级、易学且灵活的前端框架它通过虚拟DOM技术和组件化开发极大地提高了开发效率和项目的可维护性。
什么是Vue
概述
Vue读音/Vjuː/是一款用于构建用户界面的渐进式框架。其中“渐进式”是指在使用Vue核心库时可以在核心库的基础上根据实际需要逐步增加功能。
优势
轻量级Vue是一个轻量级的前端开发框架文件体积小。降低学习门槛Vue项目基于JavaScript语言开发开发者不用单独学一门陌生的语言从而降低了学习的门槛。使用灵活Vue在使用上比较灵活开发人员可以选择使用Vue开发一个全新项目也可以将Vue引入现有项目。虚拟DOM技术Vue通过虚拟DOM技术减少对DOM的直接操作并通过尽可能简单的API来实现响应的数据绑定可支持单向和双向数据绑定。组件化开发Vue支持组件化开发可提高项目的开发效率和可维护性使代码更易于复用便于团队的协同开发。工程化开发Vue可以与前端开发中用到的一系列工具以及各种支持库结合使用以实现前端工程化开发从而提高了项目的开发效率降低了大型项目的开发难度。
MVVM框架
Vue是基于MVVM模式的框架MVVM主要包含Model数据模型、View视图和ViewModel视图模型。Model是指数据部分负责业务数据的处理View是指视图部分即用户界面负责视图处理ViewModel用于连接视图与数据模型负责监听Model或者View的改变。
Vue的特性
数据驱动视图
在使用Vue的页面中Vue会监听数据变化当页面数据发生变化时Vue会自动重新渲染页面结构。
双向数据绑定
Vue实现了双向数据绑定即当数据发生变化时视图也会发生变化当视图发生变化时数据也会跟着同步变化。例如用户在填写表单时双向数据绑定可以辅助开发者在无须手动操作DOM的前提下自动同步用户填写的内容数据从而获取表单元素最新的值。
指令
指令主要包括内置指令和自定义指令内置指令是Vue本身自带的指令而自定义指令是由用户自己定义的指令。指令的名称以“v-”开头作用于HTML中的元素。将指令绑定在元素上时指令会给绑定的元素添加一些特殊的行为。例如v-bind指令用于实现单向数据绑定v-if指令用于实现页面条件渲染v-for指令用于实现页面列表渲染等。
插件
Vue支持插件通过加载插件可以实现更多的功能。常用的插件有Vue Router路由、Vuex状态管理库、Pinia轻量级状态管理库等这些插件经过简单配置就可以使用。
Vue的版本
版本概述
目前Vue共有3个大版本分别是Vue 1、Vue 2和Vue 3。其中Vue 1几乎被淘汰不建议学习与使用Vue 2和Vue 3目前被广泛应用并且Vue 3将会逐步替代Vue 2。
新版本Vue 3
Vue 3支持Vue 2中绝大多数的API与特性同时Vue 3还新增了一些特有的功能并废弃了Vue 2中的一些旧功能。Vue 3新增的功能包括组合式CompositionAPI、多根节点组件等废弃的旧功能包括过滤器Filter以及 o n ( ) 、 on()、 on()、off()和$once()实例方法等。虽然从表面上看Vue 3和Vue 2的使用方式没有太大的差异但Vue 3的底层代码发生了很大变化包括渲染、数据监听、双向绑定、生命周期等。
Vue 3新特性
体积更小采用按需编译的方式编译出来的文件体积比Vue 2的小。性能提升运行速度比Vue 2快1.5倍左右。具有更好的TypeScript支持。暴露了更底层的API可以通过多种方式组织代码代码使用上更加灵活。提供了更先进的组件。Vue创建了一个虚拟的Fragment节点允许组件中有多个根节点。提供组合式API能够更好地组合逻辑、封装逻辑、复用逻辑。
UI组件库
UI组件库概述
为了提高开发效率开发者可以在项目中添加UI组件库。UI组件库可以理解成一个可重复使用的界面设计元素的集合体使用它可以更快速地开发用户界面。
常用UI组件库
Element Plus组件库Element Plus是一款基于Vue 3的组件库提供丰富的UI组件和功能适用于快速开发现代化的Web应用。它遵循Material Design设计语言支持多平台和国际化。Vant组件库Vant是一个基于Vue 3的移动端组件库提供了丰富的UI组件和实用的工具函数旨在帮助开发者快速构建高性能的移动应用界面。它遵循Material Design设计语言支持按需引入具有良好的兼容性和可扩展性。从3.0版本开始支持Vue 3。Ant Design Vue组件库Ant Design Vue是一个基于Vue.js的UI组件库提供了一系列预制的组件和模板用于快速构建高质量的Vue应用程序界面。它遵循Ant Design的设计理念支持定制化和国际化。从2.0版本开始支持Vue 3。主流UI组件库都已经发布了支持Vue3的版本。
安装Vue
安装Vue
执行命令npm install -g vue
查看Vue版本
执行命令vue --version
实例
利用Vue命令创建Vue项目
切换工作目录
工作目录D:\project_practice
安装vue-cli脚手架
执行命令npm install -g vue/cli
创建Vue项目 方法一用vue init命令 执行命令vue init webpack vue3-demo-1 方法二用vue create命令 执行命令vue create vue3-demo-2 采用缺省预设模式 - 第一项直接敲回车
启动Vue项目 启动vue3-demo-1项目 进入项目目录 执行命令cd vue3-demo-1启动项目服务 执行命令npm run dev 编译成功访问网址http://localhost:8080查看项目首页 访问http://localhost:8080停止项目服务 按组合键Ctrl C 启动vue3-demo-2项目 进入项目目录 执行命令cd ../vue3-demo-2启动项目服务 执行命令npm run serve
项目运行过程
当执行npm run dev或npm run serve命令启动服务时项目就会运行起来该项目会通过src\main.js文件将src\App.vue组件渲染到index.html文件的指定区域。
项目目录结构
vue3-demo-1项目目录结构vue3-demo-2项目目录结构
利用Vite工具创建Vue项目
概述
通过模板自动创建项目的方式相对简单它通过附加的命令行选项直接指定项目名称和模板省去了填写项目名称、选择框架和变体等环节。Vite提供了许多模板预设可以创建ViteReactTS、ViteVue、ViteSvelte等类型的项目。
命令 使用npm 6或更低版本创建项目 npm create vitelatest 项目名称 --template 模板名称 使用npm 7或更高版本创建项目 npm create vite 项目名称 -- --template 模板名称 使用yarn create命令创建项目 yarn create vite 项目名称 --template 模板名称
实战 切换到工作目录 基于模板创建项目 使用yarn创建一个基于ViteVue模板的项目执行命令yarn create vite hello-vite --template vue 启动项目开启本地服务 切换到项目目录安装项目全部依赖 执行命令yarn dev启动服务 访问项目首页 在浏览器里访问http://localhost:5173 单击三次按钮程序自动计数
通过今天的实战希望大家能够对Vue有一个初步的了解并能够在实际项目中运用Vue来构建用户界面。
