栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Vue.js

我喜欢 Vue 的 10 个方面

Vue.js 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

我喜欢 Vue 的 10 个方面

我喜欢 Vue。当我在 2016 年第一次接触它时,也许那时我已经对 Javascript 框架感到疲劳了,因为我已经具有Backbone、Angular、React 等框架的经验,没有太多的热情去尝试一个新的框架。直到我在 Hacker News 上读到一份评论,其描述 Vue 是类似于“新 jQuery” 的 Javascript 框架,从而激发了我的好奇心。在那之前,我已经相当满意 React 这个框架,它是一个很好的框架,建立于可靠的设计原则之上,围绕着视图模板、虚拟 DOM 和状态响应等技术。而 Vue 也提供了这些重要的内容。


在这篇文章中,我旨在解释为什么 Vue 适合我,为什么在上文中那些我尝试过的框架中选择它。也许你将同意我的一些观点,但至少我希望能够给大家使用 Vue 开发现代 Javascript 应用一些灵感。


1、 极少的模板语法

Vue 默认提供的视图模板语法是极小的、简洁的和可扩展的。像其他 Vue 部分一样,可以很简单的使用类似 JSX 一样语法,而不使用标准的模板语法(甚至有官方文档说明了如何做),但是我觉得没必要这么做。JSX 有好的方面,也有一些有依据的批评,如混淆了 Javascript 和 HTML,使得很容易导致在模板中出现复杂的代码,而本来应该分开写在不同的地方的。


Vue 没有使用标准的 HTML 来编写视图模板,而是使用极少的模板语法来处理简单的事情,如基于视图数据迭代创建元素。


ul {

  padding: 0;

  li {

    list-style-type: none;

    color: blue;

  }

}

我也喜欢 Vue 提供的简短绑定语法,: 用于在模板中绑定数据变量,@ 用于绑定事件。这是一个细节,但写起来很爽而且能够让你的组件代码简洁。


2、 单文件组件

大多数人使用 Vue,都使用“单文件组件”。本质上就是一个 .vue 文件对应一个组件,其中包含三部分(CSS、HTML和Javascript)。


这种技术结合是对的。它让人很容易在一个单独的地方了解每个组件,同时也非常好的鼓励了大家保持每个组件代码的简短。如果你的组件中 Javascript、CSS 和 HTML 代码占了很多行,那么就到了进一步模块化的时刻了。


在使用 Vue 组件中的 标签时,我们可以添加 scoped 属性。这会让整个样式完全的封装到当前组件,意思是在组件中如果我们写了 .name 的 css 选择器,它不会把样式应用到其他组件中。我非常喜欢这种方式来应用样式而不是像其他主要框架流行在 JS 中编写 CSS 的方式。


关于单文件组件另一个好处是 .vue 文件实际上是一个有效的 HTML 5 文件。