β

Vue 初窥

无知的 TonySeek 11 阅读
 

Vue

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

Data Binding

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

https://vuejs.org/images/mvvm.png

这点跟 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>
 
作者:无知的 TonySeek
原文地址:Vue 初窥, 感谢原作者分享。

发表评论