Vue (发音为 /vjuː/,类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任。 来源官方解释-----简介 | Vue.js (vuejs.org)
简单来说:Vue是一个属于JS的库,可直接引入一个JS文件就可以使用,与传统JS和JQuery框架不同,Vue的渐进式框架表示开发者可以由简单组件写起,渐渐搭建出一个复杂的前端平台。
我们从以下方面分析:
这里对组件解释一下:组件就是对一个功能和样式进行独立的封装,让HTML元素得到扩展,从而使得代码得到复用,使得开发灵活,更加高效。与HTML元素一样,Vue.js的组件拥有外部传入的属性(prop)和事件,除此之外,组件还拥有自己的状态(data)和通过数据和状态计算出来的计算属性(computed),各个维度组合起来决定组件最终呈现的样子与交互的逻辑。
4.指令:Vue提供了许多内置的指令(如v-if、v-for、v-bind等),这些指令可以在模板中直接操作DOM元素,并绑定到Vue实例的数据和计算属性。
5.生命周期钩子:Vue实例在其生命周期中有多个不同的阶段,如创建、挂载、更新和销毁。在每个阶段,Vue都会运行一些特定的函数(称为“生命周期钩子”),以便你可以在这些阶段添加自己的代码逻辑。这里要强调的因为每个版本的不同,所用的生命周期钩子可能也会不同
6.路由:Vue Router是Vue.js官方的路由管理器。它和Vue.js深度集成,使构建单页面应用变得易如反掌。
7.状态管理:Vuex是Vue.js的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
8.轻量级:与Angular和React等其他主流前端框架相比,Vue更加轻量级和易于上手。这使得Vue成为许多开发者的首选框架。(轻量视图)
9.友好的中文文档和社区:Vue的官方文档非常详细且易于理解,尤其是中文文档更是受到了广大开发者的喜爱。此外,Vue社区也非常活跃,提供了大量的教程、插件和工具供开发者使用。
Vue.js是一款流行的JavaScript框架
vue,vue2,vue3都是vue.js的不同版本。
Vue:Vue.js的第一个版本,也称为Vue 1.x。它于2014年首次发布,并获得了广泛的应用和认可。
Vue2:Vue.js的第二个版本,也称为Vue 2.x。它在Vue 1.x的基础上进行了升级和改进,提供了更好的性能、更多的功能和更好的开发体验。Vue2是目前广泛应用的稳定版本,在许多项目中使用。
Vue3:Vue.js的最新版本,也称为Vue 3.x。它在Vue 2.x的基础上进行了重构和升级,引入了许多新特性和改进。Vue3提供了更快的渲染速度、更小的包大小、更好的响应性和更方便的开发工具。
Vue.js 1.x:
Vue.js 2.x:
Vue.js 3.x:
组件注册:
Vue.js 2.x:通常使用Vue.component()或Vue.extend()方法注册组件。
Vue.js 3.x:需要使用createApp().component()方式来注册一个组件。
数据绑定:
Vue.js 2.x 和 3.x 都支持双向数据绑定,但具体的实现和细节可能会有所不同。
选项式与组合式写法:
Vue.js 2.x 主要使用选项式写法,即将数据、方法、生命周期等选项分别写在不同的地方。
Vue.js 3.x 引入了组合式写法(Composition API),允许开发人员将相关逻辑组织在一起,更灵活地编写组件。Vue.js 3.x 同时支持选项式和组合式写法。
JSX 语法:
Vue.js 3.x 开始支持 JSX 语法,允许在 Vue 组件中使用类似 HTML 的 JSX 语法来编写模板。这使得开发者能够更灵活地编写组件,并利用 JavaScript 的所有特性。
生命周期:
Vue.js 2.x 和 3.x 的生命周期钩子有所不同。Vue.js 3.x 对一些生命周期钩子进行了重命名或合并(例如:setup),以更好地反映组件的生命周期状态。
插槽(Slots):
Vue.js 2.x 和 3.x 的插槽系统也有所不同。Vue.js 3.x 对插槽进行了改进,使其更加灵活和易于使用。
响应式原理:
Vue.js 2.x 的响应式原理基础依靠 Object.defineProperty 方法。
Vue.js 3.x 的响应式原理基础则依靠 Proxy 对象,这使得 Vue.js 3.x 在处理数组和对象时具有更好的性能和灵活性。
我们可以多看看几个例子
Vue.js图例1
效果
Vue3 图例2
效果是一样的
对比vue3之前的写法相比不同点还是很多的。
例如data在vue3中变成了一个函数,需要返回值
我们在图例2的基础上进行改变,先增加增加一个methods周期,在其中添加一个函数来控制Tel的显示
此时点击按钮触发的效果:
这样的写法是我们现将数据写在了data周期中,将要触发事件的函数写在了methods周期中,注意写法中的‘this’,在Vue3中setup周期里是不能出现this关键词的