珠峰培训

vue.js系列教程一

作者:wy

2016-06-30 17:40:53

134

vue介绍

vue.js是构建数据驱动的 web 界面的库,而不是一个全能框架—它只聚焦于视图层。

响应的数据绑定

每当修改了数据,DOM 便相应地更新。这样我们应用中的逻辑就几乎都是直接修改数据了,不必与 DOM 更新搅在一起。这让我们的代码更容易撰写、理解与维护。

组件系统

让我们可以用独立可复用的小组件来构建大型应用。

特性

简洁 数据驱动 组件化 轻量快速 模块友好

vue的安装

CDN地址


    http://cdn.jsdelivr.net/vue/1.0.24/vue.min.js

bower下载


    bower install vue

npm下载


    npm install vue

vue的简单使用

引入vue.js

实现简单的Hello World

    
    <div id="app">
    {{hello}}
    </div>
    
    
    new Vue({
    el:"##app",
    data:{
    hello:'hello world'
    }
    });
    

实现双向数据绑定

v-model

    
    <div id="app">
    <input type="text" v-model="hello">
    {{hello}}
    </div>
    
    
    new Vue({el:"##app"});
    

绑定表达式

可以进行运算

{{}}

支持三元运算符

只绑定一次

{{*hello}}

    
    new Vue({el:"##app",hello:{data:'hello'}});
    

实现绑定html

{{{hello}}}

    
    new Vue({el:"##app",data:{hello:'

hello world

'}});