vue.js——初体验

      看到最近很火的vue.js，于是开启了自己人生中首篇翻译之路，才意识到这个纯英文版的的确没有中文的通俗易懂~~~~~~不过， 还是硬着头皮把这篇英文版的博客给翻译完了，希望可以帮助自己的同时也方便别人。

原文地址：

http://blog.evanyou.me/2015/10/25/vuejs-re-introduction/

   附上vue.js中文文档地址：

http://cn.vuejs.org/

    vue.js是一个web接口的构件库。像其他的工具一样，你也可以称它为“框架”，尽管它更像一种用起来很好的可选工具。如果在这之前，你从来没有听过或者用过vue，你可能想：太好了，又是一个JavaScript框架！这个我理解。结果是它并不是特别新的框架——2014年2月第一次公开发布，而我大概是在两年之前就开始使用其原型。它一直在发展，直到今天已经有很多人开始在工作中使用它了。
    因此，vue究竟提供些什么呢？又是什么使得它与众不同？当已经出现Angular、Ember以及React的时候，为什么还有人愿意去学习它呢？接下来的这篇文章就通过短暂的vue的介绍来阐明这些问题，而我也希望在读完这篇文章后你能有自己的答案。
  
反应：
    ||在同步中保持状态和视图一直貌似是困难的。是吧？
让我们先从最基本的任务开始吧：显示数据。假设我们有个简单的对象：

 var object = {
        message : 'Hello World!';  
    }

有一个模板：

<div id="example">
       {{ message }}
</div>

接下来我们就看一下如何通过vue把数据和模板绑定在一起：

 new Vue({
       el : '#example',
       data : object   
    })
 

    看起来我们只是渲染了一个模板。当对象改变的时候我们应该怎样做来更新视图？答案就是——什么都不做。vue可以转换对象并使它有“活性”。当你设定其他对象的object.message时，呈现的HTML会自动更新。更重要的是，根本没必要担心像 $apply 超时、setState()、监听存储事件或者创建一个私有的框架比如说ko.observable()、Ember.Object.create()等等。它自己就会做这些。
    

    Vue还提供了完美的计算属性：

 var example = new Vue({
         data: {
           a:1
        },  
       computed: {
           b: function(){
             return this.a + 1
          }
        }
     })
     //a和b都是实例创建中的变量
     example.a // --> 1
     example.b // -->2
     example.a++ 
     example.b // -->3

    变量b作为a的附属品，它的变化是自动同步的。因为你没有必要自己去声明一个依赖。

另外，基于POJO的反应性使得它非常容易的与任何类型的数据源或者状态连为一体。例如，这里有监测Vue.js组件绑定到RxJS但不超过30行代码。
    
    组件
       ||对于小型的demo，这样的数据绑定是整齐的，而对于大的应用程序呢？
   
    当涉及到结构复杂的接口，Vue采用的这种方法类似于React：它的分量。

var example = Vue.extend({
      template: '<div>{{ message }}</div>',
      data: function(){
          return {
           message: 'Hello Vue.js!'
      }
    }
  })

   //注册了一个example标签
  Vue.component('example',Example)

现在我们可以使用其他模板中的组件只是作为一份自定义的元素：

<example></example>

    组件可以包含其他组件，它们可以形成一棵树，代表你的UI。让它们实际上可以自由组合，Vue组件也可以：
1.用props 定义如何从它的父级获取数据；
2.在父级范围内发出自定义事件来触发动作；
3.用<slot>槽构建自己的父级注入相应的内容。

   在这里，就不会再继续深入介绍，但是如果你比较感兴趣的话，点击这里http://vuejs.org/guide/components.html


模型
    ||2015年，我们不应该把一切放在全球范围内。
我们使用模块化工具（Webpack 或者 Browserify）以及ES2015.每一个组件都可以在它自己的模型中使用。由于Vue可以自动的将对象的属性转化为构造器函数，我们可以卡个对象的例子：

  // ComponentA.js
    export default {
      template: '<div>{{message}}</div>',
      data () {
         return {
           message: 'Hello Vue.js!'
        }
      }
    }

 //App.js
     import ComponentA from './ComponentA'
  
  export default{
    // 在这个范围内，使用另一个组件
    //用<component-a>标签将组件A映射进去
    components: { ComponentA },
    template: -
      <div>
         <p>Now I'm using another compoment.</p>
         <component-a></component-a>
      </div>
     -
  }

   相当不错，对吧？但如果我们可以在同一个文件中封装组件的模板、风格或者是Javascript的逻辑，并为每个得到适当的高亮显示岂不是更好？使用类似于Webpack + vue-loader 或者是 Browserify + vueify,你就可以做到：

<!-- MyComponent.vue -->

<!-- css -->
<style>
.message {
  color: red;
}
</style>

<!-- template -->
<template>
  <div class="message">{{ message }}</div>
</template>

<!-- js -->
<script>
export default {
  props: ['message'],
  created() {
    console.log('MyComponent created!')
  }
}
</script>

别急，我们这是重新发明了Web组件吗？但前提是你的CSS文件必须是全局的！
      除了：
1.你可以有自己的样式封装。就在<style>标签中添加作用于的属性。但是在它的子组件中是不能嵌套使用的。
2.在IE9之前，每个Vue组件都被编译成一个Javascript模块，而不需要任何的东西支撑它运行。如果你想用的话，也可以把它制定成一个真正的元素。
3.ES2015默认支持<script>标签。
4.你可以在每个语言块中使用任何预处理器。
5.当你使用Webpack + vue-loader，你也可以使用webpack全功率的静态资源处理，因为模板和样式是作为模型依赖通过HTML 以及 CSS 处理URl的。
 
因此，如果你想要像下面的组件的话：

<vue.js>文件：
   这个例子是动态的，我不会做演示……（http://blog.evanyou.me/2015/10/25/vuejs-re-introduction/）

动画 
   ||我可以用它做些漂亮的东西吗？
 vue有一个非常易于使用的内置过渡系统，许多获奖的交互式网站都是使用它来建成的。
 Vue的反应体系也使得它非常简单有效的基于状态的渐变，在使用凌乱的检查或者是虚拟的DOM迭代计算时却是相当麻烦的框架。（Vue’s reactivity system also makes it trivially simple to do efficient state-based tweening, which turns out to be quite a hassle in frameworks that use dirty-checking or Virtual DOM diffing.则这句话翻译的实在绕口！）当渐变的状态以每秒60帧的时候，Vue清楚的知道哪个绑定会受到影响，因此它会有效的更新绑定事件的影响以及避免其他应用程序不受到影响。在凌乱的检查和虚拟DOM操作中，改变状态意味着整个子树（作用于或者是组件）都会受到影响。也就是需要重新注册或者是重新呈现。尽管在小demo中个，它被称作“相当快的”，但是在一个大型应用程序中，它并不会触发每秒60次改变的事件。即使它控制的足够快，但是对于整个虚耗的循环它也像是个逐渐消失的电池设备。实际上了解动画的有效。。。。（Check outthis talk to get a sense how much effort is needed to animate things efficiently in React）Vue应用程序也只是在这些默认情况下是被优化的。

一个基于状态渐变的Vue例子：

http://codepen.io/yyx990803/pen/XmZNOG/

路由

  ||如果我想创建一个应用程序，路由又该在哪里设置呢？
类似于React一样，Vue本身并不带路由。但是Vue有一个安装包可以帮你实现。它支持嵌套映射、嵌套组件并且提供细粒度的过渡控制。下面是一个简单的例子：

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './app.vue'
import ViewA from './view-a.vue'
import ViewB from './view-b.vue'

Vue.use(VueRouter)

const router = new VueRouter()

router.map({
  '/a': { component: ViewA },
  '/b': { component: ViewB }
})

router.start(App, '#app')

app.vue 模板

<div>
  <h1>This is the layout that won't change</h1>
  <router-view><!-- matched component renders here --></router-view>
</div>

具体的详见：

（https://github.com/vuejs/vue-hackernews）

稳定性  

|| 在一个个人项目中稳定吗？

是的，它是一个个人项目。因此，如果你正在寻找一个在企业开发团队的支持下的，Vue可能就不是你要找的。但是我宁愿看一下这些数字：自从0.11版本后，Vue在每一个提交版本时一直保持在100%的测试覆盖率，而这个速度将一直持续下去。GitHub基本也是在13个小时内解决超过1400的问题，而在撰写文本时，它也是开源（剩下的就都是些数字解释了，因此没有继续翻译……）


因为之前从来没有耐心的看过纯英文版的文档，这次算是首开先河吧，不足之处肯定很多，不喜勿喷，只是以后自己还是得多培养一下，看英文文档的习惯，认真去学新的知识。