#我喜欢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来编写视图模板，而是使用极少的模板语法来处理简单的事情，如基于视图数据迭代创建元素。

<template>
  <div id="app">
    <ul>
      <li v-for='number in numbers' :key='number'>{{ number }}</li>
    </ul>
    <form @submit.prevent='addNumber'>
      <input type='text' v-model='newNumber'>
      <button type='submit'>Add another number</button>
    </form>
  </div>
</template>

<script>
export default {
  name: 'app',
  methods: {
    addNumber() {
      const num = +this.newNumber;
      if (typeof num === 'number' && !isNaN(num)) {
        this.numbers.push(num);
      }
    }
  },
  data() {
    return {
      newNumber: null,
      numbers: [1, 23, 52, 46]
    };
  }
}
</script>

<style lang="scss">
ul {
  padding: 0;
  li {
    list-style-type: none;
    color: blue;
  }
}
</style>

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

##2. 单文件组件

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

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

在使用Vue组件中的

9.0 KiB Raw Blame History Unescape Escape

#我喜欢Vue的10个方面

9.0 KiB

Raw Blame History