当前位置: 首页 > Web前端 > vue.js

【译】Vue.js和Alpine.js对比

时间:2023-03-31 14:21:00 vue.js

(译自:https://medium.com/@wearethre...)Vue.js是目前世界上最流行的JavaScript框架之一,发布于2014年2010年,第三版即将出炉(译文:译文已出),不会有大的改动。那么,为什么我们还需要另一个JavaScript框架呢?为什么选择高山?与大多数现代JavaScript框架不同,有了Alpine,只需要简单的引用,不需要编译,所有的特性都可以使用。它非常轻巧,在撰写本文时,Alpine只有4.3kb(v.1.9.3)。但是,对我来说,Alpine.js最吸引人的地方在于它的语法,如果你已经很了解Vue,那么你基本上知道Alpine,这使得它非常适合Vue开发人员切换,而无需学习头疼的语法和一些奇怪的东西知识。Alpine作者CalebPorzio(LaravelLivewire的作者)使其大部分语法与Vue保持一致,eg:v-for变成了x-for,v-show变成了x-show等,它还引入了一些缩写语法,比如x-on,所以x-on:click=""可以简写为@click="",你可以在https://github.com/alpinejs/a...学习所有13种语法。(你可能想知道为什么Alpine用x-而不是a-,其实是因为在Alpine的名字没有定下来之前,Alpine被称为project-x,这是对他过去名字的致敬。)我们来看一个简单的-beOffice应用程序。“WWWWWHHHHHYYYY?为什么要做另一个TODO?”(我能听到你在问...)嗯,这个应用程序展示了很多基本概念,所以...从Vue开始Vue有多种使用方式,最简单的使用方式是直接从CDN导入:当然Vue提供了VueCLI,需要使用VueCLI,需要安装node,即可在这里找到相关资料:https://nodejs.org,然后在终端通过命令行安装:npminstall-g@vue/cli安装好你的VueCLI命令行后,你就可以创建你的项目了:vuecreatemy-project接下来进入你的项目目录:cdmy-projectnpmrunserve开始使用AlpineAlpine目前没有命令行工具,使用CDN导入即可:新建一个html文件,并添加如下标签即可被粘贴进去。创建我们的模板我们将创建一个todo应用程序,所以我们需要实现一些关键功能:Todo列表复选框,用于标记Todo任务已经完成Delete按钮,删除任何Todo表单,用于提交新的TodoCreateVue版本创建Alpine版本添加新任务

    删除
as如上所示,Vue版和Alpine.js版的实现代码除了一些细微差别外,非常相似。让我们来看看这些区别:最明显的变化是