Vue

Vue:渲染、指令、事件、组件、Props

如果要我用一句话描述使用 Vue 的经历，我可能会说“它如此合乎常理”或者“它提供给我需要的工具，而且没有妨碍我的工作”。每当学习 Vue 的时候，我都很高兴，因为很有意义，而且很优雅。

以上是我对 Vue 的介绍。在我第一次学习 Vue 的时候，我就想要这样的文章

我喜欢 Vue 的一点是它吸取了其它框架的优秀之处，并有条不紊的将它们组合在一起。

具有响应式组件化的虚拟 DOM 只提供视图层， props 和 类 Redux 状态管理与 React 类似。

条件渲染和服务与 Angular 类似。

受到 Polymer 简洁及性能方面的启发，Vue 提供了类似的模式，比如 HTML， 样式以及 JavaScript 组合在一起。

Vue 相比其它框架的优势有: 简洁，提供更多语义化的 API ， 比 React 的表现稍好，不像 Polymer 那样使用 polyfill，相比 Angular 有独立的视图。

我还能举一些例子，但是你最好读一下这篇综合的、社区推动的文章对比其它框架 。这篇文章值得一读，但是如果你想先看代码，你也可以先跳过，以后再读。

开始吧！
还是从 "Hello, world!" 的例子开始。运行如下示例：

HTML：

{{ text }} Nice to meet Vue.
CSS：

复制代码
body {
font-family: 'Bitter', serif;
}

app {

text-align: center;
padding: 70px;
font-size: 22px;
max- 360px;
margin: 0 auto;
display: table;
}
复制代码
Vue.js

复制代码
new Vue({
el: '#app',
data: {
text: 'Hello World!'
}
})
复制代码

如果你熟悉 React，你会发现两者有很多相同之处。通过 mustache 模板以及使用一个变量，可以避免在内容中使用 JavaScript，但是不同的一点是我们直接书写 HTML 而不是 JSX 。虽然 JSX 易于使用，但是我无需再花时间把 class 改成 className，等等。这样启动及运行会更轻量。

现在尝试一下我喜欢的 Vue 的特性: 循环以及条件渲染。

条件渲染
假如有一组元素，类似导航条，我打算重复利用。合理的做法是放在数组中动态的更新。使用普通的 JS (需要 Babel) ，我们会这样做: 创建一个数组，然后创建一个空字符串，用来存放使用

  • 包裹的元素，再用
      包裹所有内容，使用 innerHTML 方法添加到 DOM 中：

      HTML:

      复制代码

      • {{item}}
      复制代码 Vue.js:

      复制代码
      new Vue({
      el:"#app",
      data:{
      items:[
      'thingie',
      'another things',
      'lots of stuff',
      'yadda yadda'
      ]
      }
      })
      复制代码
      非常简洁。如果你熟悉 Angular，你对此应该不陌生。我发现这种条件渲染的方式简单明了。如果你需要更新内容，修改起来也很简单。

      另外一种好的方式是使用 v-model 进行动态绑定。试试下面的例子：

      HTML：

      Type here:

      {{message}}

      Vue.js

      复制代码
      new Vue({
      el:"#app",
      data:{
      message:"this is a good place top type"
      }
      })
      复制代码
      在这个 Demo 中你会注意到两点。首先，可以直接向书中打字并且动态更新文本。Vue 通过 v-model 非常方便的实现了