IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    Vue 初窥

    shonenada发表于 2016-04-12 00:00:00
    love 0

    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>
    


沪ICP备19023445号-2号
友情链接