关闭

[译] Vue.js 和 Alpine.js 比较

时间: 2021-03-03阅读: 331标签: vue

(翻译自:https://medium.com/@wearethre...

vue.js 是当前世界上最流行的 JavaScript 框架之一,发布于 2014 年,第三个版本即将发布(译著:翻译时已经发布),不会有大的变化。

那么我们为什么需要另一个 JavaScript 框架呢?为什么是 Alpine?与大多数现代 JavaScript 框架不同,使用 Alpine,,只需要简单引用,不需要编译,即可执行,全部特性都可以使用。它超级轻量级,在本文编写时候,Alpine 只有 4.3kb(v.1.9.3)。但是,对我而言,Alpine.js 最吸引我的地方是它的语法,如果你已经熟知 Vue,那你基本上了解了 Alpine,这使其非常适合 Vue 开发人员转换过来,而无需学习头疼的语法和某些奇怪的知识。Alpine 的作者 Caleb Porzio(Laravel Livewire 的作者)使其大部分的语法与 Vue 保持一致,例如: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,这是对他过去名称的致敬。)

我们接下来看一个简单的待办事项应用。”WWWWW HHHHHYYYYY?为什么还要再做一个TODO?”(我能听到你在问……)嗯,这个应用显示了很多基本概念,所以……


从 Vue 开始

有多种方式可以使用 Vue,最简单的方式使用,是直接从 CDN引入:

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

当然,Vue 提供了 Vue CLI,要使用 Vue CLI,你需要安装 node,你可以在此找到相关信息:https://nodejs.org,然后在终端,通过命令行进行安装:

npm install -g @vue/cli

在你的 Vue CLI 命令行安装完毕后,你可以创建你的项目:

vue create my-project

接下来进入你的项目目录:

cd my-project
npm run serve


开始使用 Alpine

Alpine 当前没有命令行工具,使用 CDN 进行引入即可:新建一个 html 文件,将下面的标签贴进去即可。

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.9.3/dist/alpine.js" defer></script>

创建我们的模板

我们打算创建一个 todo 应用,所以我们需要实现一些关键特性:

  1. Todo 列表
  2. 复选框,用于标记 Todo 任务已经完成
  3. 删除按钮,删除任意 Todo
  4. 表单,用于提交新的 Todo

创建 Vue 版

<template>
    <div id="app">
       <form @submit.prevent="addNewTask()">
           <input type="text" v-model="task" />
           <button type="submit">Add new task</button>
       </form>
       <ul>
           <li v-for="todo in todos" :key="todo.id" :class="{ 'is-complete': todo.isComplete === true }">
               <span v-text="todo.task"></span>
               <input type="checkbox" v-model="todo.isComplete" />
               <button @click="removeTask(todo.id)">Delete</button>
           </li>
       </ul>
    </div>
</template>

创建 Alpine 版

<div id="app" x-data="todos()">
    <form @submit.prevent="addNewTask()">
        <input type="text" x-model="task" />
        <button type="submit">Add new task</button>
    </form>
    <ul>
        <template x-for="todo in todos" :key="todo.id">
            <li :class="{ 'is-complete': todo.isComplete === true }">
                <span x-text="todo.task"></span>
                <input type="checkbox" x-model="todo.isComplete" />
                <button @click="removeTask(todo.id)">Delete</button>
            </li>
        </template>
    </ul>
</div>

如上所示,除了一些微小的区别,Vue 版和 Alpine.js 版的实现代码十分相似。让我们来看看这些区别:

  • 最明显的变化是对于 <template> 标签的使用,template 标签是 html 5 中引入的一个元素,编写在其中的代码不会被显示。在 Vue 中,我们的代码包围在 <template> 标签,而在 Alpine.js 中,我们不需要这么做,它可以使用纯 HTML 标签。最后,由于 Alpine.js 中没有虚拟 DOM,例如 for 循环和 if 语句,这种智能功能的实现,我们只能通过包裹在 template 中来实现。
  • 与 Vue 不同,在 Alpine 中,我们需要自己指定数据和元素的关系,我们可以看到使用 x-data 指令的 #app 父元素。在我们的例子中,我们绑定了 todos() 函数,在此函数中,保存我们所有的数据和方法。
  • 其他的区别就是 v-* 和 x-* 写法的区别了。

我们的 Vue 数据:

export default {
    data() {
        return {
            increment: 3,
            task: '',
            todos: [
                {
                   id: 1,
                   task: 'Open VS code',
                   isComplete: true
                },
                {
                    id: 2,
                    task: 'Write a todo app in vuejs',
                    isComplete: false
                }
            ]
        }
    },
    /**/
}

我们的 Alpine 数据:

function todos() {
    return {
        //data
        increment: 3,
        task: '',
        todos: [
           {
               id: 1,
               task: 'Open VS code',
               isComplete: true
           },
           {
               id: 2,
               task: 'Write a todo app in alpinejs',
               isComplete: false
           }
       ],
    /**/
    }
}

像对于 template 的使用一样,Vue 和 Alpine 的数据定义,两者有区别,但区别很小。/**/ 标记所在的位置,表示插入上面模板的代码。两个例子均使用函数返回的 object 作为数据,在 Vue 中,我们使用:

data() {/**/}

在 Alpine 中,我们使用 todos() 函数,配合 x-data 指令,定义在模板中:

todos() {/**/}

还有两个小地方不一样:

  • 在 Vue 中,我们写在 <script> 标签中的数据方法,需要导出,而在 Alpine 中,我们可以直接将包含数据的函数写在 <script> 中。
  • 在 Vue 中,我们的 /**/部分 ,在我们的 data() 方法之外,而在 Alpine.js 中,我们的/**/部分,则在我们的 todos() (组件对象)方法中。这是因为在 Vue 中,所有的方法都应放置在 methods 对象内。

我们 Vue 中的响应方法:

export default {
    /**/
    methods: {
        addNewTask() {
            //Return if empty
            if (this.task.trim() === '') return;
            //Add new todo and clear task
            this.todos.push({
               id: this.increment++,
               task: this.task,
               isComplete: false
            });
            this.task = '';
        },
        removeTask(todoToRemove) {
            this.todos = this.todos.filter(todo => todo.id != todoToRemove);
        }
    }
}

我们 Alpine 中的响应方法:

function todos() {
    return {
        /**/
        addNewTask() {
            //Return if empty
            if (this.task.trim() === '') return;
            //Add new todo and clear task
            this.todos.push({
                id: this.increment++,
                task: this.task,
                isComplete: false
            });
            this.task = '';
        },
        removeTask(todoToRemove) {
            this.todos = this.todos.filter(todo => todo.id != todoToRemove);
        }
}

在这里,方法本身完全没有变化,只是他们在代码中的位置做了调整。在 Vue 中,响应方法位于 methods 对象中,而在 Alpine,则直接写在 todos() 方法中。


结论:

如果你是一名 Vue 开发者,但在无法使用 Vue 的情况下,或者你想快速的做一些功能演示,而无需编译,此时 Alpine 是你理想的选择。如上面的例子所示,对于 Vue 开发者而言,使用 Alpine 的基本没有学习成本。如果你不是 Vue 开发人员,但是想摆脱 jQuery 或者 原生 JS 以获取简单的功能,我认为 Alpine 值得一试,它无需构建,可以快速的运行。

在多数情况下,Vue 仍然是我的选择,它有适合它使用的场景。然而个人而言,我相信 Alpine 在前端开发领域,将会是一个受欢迎的补充选择。

翻译来自:https://segmentfault.com/a/1190000039301602

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/10173

vue2.0之监听属性的使用心得及搭配计算属性的使用

在工作中常常需要监听某一个属性值的变化,这个时候我们就需要用到了监听属性watch,在这里我总结watch属性的三种场景使用希望对你有所帮助

Vue.use到底是什么?

我们在使用Vue做项目开发的时候,看到不少轮子都是通过Vue.use来进行使用,感觉甚是高大上。不过Vue.use到底是什么鬼?不妨来看个究竟。

如何理解Vue.js中的ref及$ref,$

首先我们来看一下vue官方是怎么解释的m好了,我知道很多刚接触的vue的小白其实都不太看的懂官方文档在讲什么,下面我用自己的话翻译一下。

vue有时候你不需要 $emit & $on

在此之前,子组件到父组件的传递事件我一般还是使用 $emit 和 $on,因为这个操作理解起来并不难,代码一般也挺清晰。不过今天遇到这么个情况 ——

vue的完整版和运行时版的区别

打开Vue的官网,你会发现有Vue有两种不同的构建版本,Vue官方对两种不同构建版本的解释是这样子的:完整版:同时包含编译器和运行时的版本

Vue 3.0 将从头开始重写!

Vue.js 伦敦大会上,Vue.js 作者尤雨溪简要介绍了 Vue 下一个主要版本要发布的内容,不久前,尤雨溪在 medium 个人博客上发布了 Vue 3.0 的开发路线,我们不妨看看 Vue 3.0 将会有怎样的发展。

vue 自定义指令

接下来我们来看一下钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。但有一些是没有相对应的指令进行操作。在这里以progress(h5的新标签进度条)为例,向大家介绍Vue的一个用于指令扩展的方法:directive(自定义指令)。

Vue 中的受控与非受控组件

熟悉 React 的开发者应该对“受控组件”的概念并不陌生,实际上对于任何组件化开发框架而言,都可以实现所谓的受控与非受控,Vue 当然也不例外。并且理解受控与非受控对应的需求场景,可以让我们在设计一些基础组件时思路更加清晰,暴露出来的组件 API 也更加合理、统一。

Vue高版本中一些新特性的使用

Vue高版本中一些新特性的使用:深度作用选择器、组件配置项inheritAttrs、组件实例属性$attrs和$listeners、组件选项 provide/inject、作用域插槽 slot-scope、Vue的错误捕获

vue框架开发出现页面空白、白屏的解决方法总汇

使用Vue-cli脚手架开发单页应用时出现页面空白的情况:1.npm run build打包页面空白,2. iOS的Safari下无法打开网页,3.升级vue2+部分手机访问出现页面空白,4.升级vue2+IP访问页面空白,5.Vue在IE下显示空白问题,6.Vue只在iOS 10出现白屏问题

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!