Vue

Vue 是一个类型 AngularJs 的库。但不同于 Angular，Vue 主要是转主语数据绑定和组件化开发两大特性。同时 Vue 也提供了一套非常简单的 API，上手非常容易。

Data Binding

Vue 数据绑定会将 HTML 模板中的 “变量” 和 JavaScript 中的对象绑定起来，一旦数据绑定了，Vue 就会对它们进行同步。

这点跟 AngularJs 的效果是一样的。

文本绑定

文本绑定语法与 Angular 是一样的:

Hello {{ username }}

一次绑定

Vue 数据绑定支持 “一次绑定”，也就是说当数据改变时候，HTML DOM 并不会跟着同步。

Hello {{* onceBindingUsername }}

JavaScript 表达式

Vue 支持在 {{ }} 中写入 JS 表达式: {{ svg.height + svg.margin }}，也支持函数调用： {{ parseInt(strNum) }}。

filter

和很多模板引擎一样，Vue 也支持 filter，语法和 Jinja2 很相似。 {{ var | filter }}。

Vue filter 也支持管道模式处理： {{ var | filterA | filterB }} 。当 filter 需要传入参数时： {{ var | filterWithArgs 'arg1' 'arg2' }}

Components

组件允许你编写可重用的代码。

Vue 通过 Vue.extend() 来创建组件构造器，再通过 Vue.component(tag, constructor) 注册到 Vue 中。

var chart = Vue.extend({
    template: 'Chart',
});
Vue.component('chart', chart);

<chart></chart>

组件支持将父级数据传给子组件，其中一种方法就是通过 props

var chart = Vue.extend({
    template: 'The num is: {{ numm }}',
    props: [ 'num' ],
});
Vue.component('chart', chart);

<chart :num="100"></chart>