(翻译自: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,最简单的方式使用,是直接从 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 当前没有命令行工具,使用 CDN 进行引入即可:新建一个 html 文件,将下面的标签贴进去即可。
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.9.3/dist/alpine.js" defer></script>
我们打算创建一个 todo 应用,所以我们需要实现一些关键特性:
<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>
<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 版的实现代码十分相似。让我们来看看这些区别:
我们的 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() {/**/}
还有两个小地方不一样:
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);
}
}
}
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
VueJS 实际开发中会遇到的问题,主要写一些 官方手册 上没有写,但是实际开发中会遇到的问题,需要一定知识基础。
Vue.js是一套构建用户界面的渐进式的前端框架。 vueJS与后台交互数据的方法我所了解的有以下几种
Vue是一套构建用户界面的JS渐进式框架。 Vue 只关注视图层, 采用自底向上增量开发的设计。讲解js高级之响应式、过渡效果、过渡状态。
深入理解Vue.js响应式原理。Vue教程有关的视频都讲到,我习惯响应式开发,在更早的Angular1时代,我们叫它:数据绑定(Data Binding)。你只需要在Vue实例的 data() 块中定义一些数据,并绑定到HTML
在vue组件中,为了使样式私有化(模块化),不对全局造成污染,可以在style标签上添加scoped属性以表示它的只属于当下的模块,这是一个非常好的举措,但是为什么要慎用呢?因为scoped往往会造成我们在修改公共组件(三方库或者项目定制的组件)的样式困难,需要增加额外的工作量
vue现在使用的人越来越多了,这篇文章主要整理一些比较优秀的移动端ui框架,推荐给大家,例如:mint UI、vux、vonic、vant、cube-ui、Muse-ui、Vue-Carbon、YDUI等
webpack是开发Vue单页应用必不可少的工具,它能管理复杂的构建步骤,并且优化你的应用大小和性能, 使你的开发工作流更加简单。在这篇文章中,我将解释使用webpack提升你的Vue应用的4种方式,包括:单文件组件、优化Vue构建过程、浏览器缓存管理、代码分离
Vue-Access-Control是一套基于Vue/Vue-Router/axios 实现的前端用户权限控制解决方案,通过对路由、视图、请求三个层面的控制,使开发者可以实现任意颗粒度的用户权限控制。
Web 中的组件其实就是页面组成的一部分,具有高内聚性,低耦合度,互冲突等特点,有利于提高开发效率,方便重复使用,简化调试步骤等。vue 中的组件是一个自定义标签形式,扩展原生的html元素,封装可重用的代码。
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理、数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成、编译、挂着、销毁等过程进行js控制。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!