rlwb
rlwb

『翻译』Vue.js简介：Rendering, Directives, and Events

开头

如果让我用一句话总结我对 Vue 的理解，我可能会这样说“它真的非常好理解”或者“它就像一个工具，我可以随心所欲的使用它，而又不会受制于它”。在我学习 Vue 的过程中，我非常的开心，因为它很有意思，很优雅。
这篇文章是我个人对 Vue 的了解。当我第一次学习 Vue 的时候，我希望能有一篇这样的文章帮助指导我学习。如果你想要通过权威的方式学习 Vue 的话，那么你可以参考 Vue 官网的指南，非常的详细，简单明了。

Vue.js简介（1）

文章系列

Part 1: Rendering, Directives, and Events
Part 2: Components, Props, and Slots (待翻译)
Part 3: Vue-cli (待翻译)
Part 4: Vuex (待翻译)
Part 5: Animations (待翻译)

Vue 吸取并融合了其它框架的成功之处，并且它的代码非常简洁，这是我非常喜欢它的一个原因。比如下面这些特点：

  • 虚拟的 DOM 和灵活的组件，提供了一种 View 层优先，props ，并且类似于 React 的 Redux 式的存储方式。
  • 类似于 Angular 的条件渲染和数据绑定方式。
  • 在简单性和性能方面，受到 Polymer 的启发，Vue 采用了相同的 HTML 代码，styles 样式和 JavaScript 代码书写方式。

还有其它的一些相对于它的对手的优点，也让我觉得欣喜：更干净，更语义化的 API 文档，相比 React 更好的表现，和 Polymer 一样不采用 polyfills，并且是一个独立而又不像 Angular 那样固执己见的 MVVM 框架。

接下来我们继续，或许你亲自去阅读他们社区的与其他框架的比较会更好。它很值得一读，如果你更愿意去书写代码的话，那么你可以跳过它。

让我们开始吧！

让我们从 "Hello,world!" 开始。按照下面这样做你就可以开始了：


 {{ text }} Nice to meet Vue.



new Vue({
 el: '#app',
 data: {
   text: 'Hello World!'
 }
});

DEMO
如果你对 React 很了解的话，这种写法你也一定觉得很熟悉。通过 JavaScript 创建变量，用双大括号模板引用变量，不同的使 Vue 直接采用 Html，而 React 采用JSX语法。JSX 语法很容易上手，但是
Vue 不用把 class 转化为 className 等简洁的写法，让我真的很喜欢它。你可能也注意到Vue非常的轻量，运行起来也很迅速。
接下来我们一起尝试下Vue的一些令人喜爱的特性：循环和条件渲染。

条件渲染

我创建了一个items对象，类似导航，以便我知道我可以重用它。把它定义为一个数组可能更有意义，方便以后动态地更改。如果按照原生的 JS 写法可能会是这样的：创建数组，然后创建空的字符串对象，再把数组的每个条目嵌套上

  • 标签，最后在外面嵌套
      标签，最后使用 innerHTML 方法操作 DOM：

      


      const items = [
  'thingie',
  'another thingie',
  'lots of stuff',
  'yadda yadda'
];

function listOfStuff() {
  let full_list = '';
  for (let i = 0; i < items.length; i++) {
      full_list = full_list + `
    •  ${items[i]} 
      • `
  }
  const contain = document.querySelector('#container');
  contain.innerHTML = `
         ${full_list} 
      `;     
}

listOfStuff();

      DEMO
      没问题，但是有点凌乱。现在让我们用
      Vue 的循环v-for实现同样的效果：

      
  
        
    
      • 
      {{ item }}
    
        • 
  
      

      

      const app4 = new Vue({
  el: '#app',
  data: {
    items: [
      'thingie',
      'another thingie',
      'lots of stuff',
      'yadda yadda'
    ]
  }
});

      DEMO

      非常的简单明了。如果你了解 Angular，这种写法对你来说肯定很熟悉。这样的条件渲染方式非常的简单，清晰。如果你还在用传统的原生 JS 而且也在寻求改变，那么你可以很容易上手 Vue。

      另外一个非常好用的指令是v-model，它可以动态绑定数据。像这样：

      
  
      Type here:
      
  
      
  
      {{ message }} 
      

      

      new Vue({
  el: '#app',
  data() {
    return {
      message: 'This is a good place to type things.'  
    }
  }
});

      DEMO

      通过上面的例子，你可能注意到两点。首先，页面没有进行任何 DOM 操作，就能够动态的更新显示的文本内容。Vue 能够通过 v-model 指令在