五个小案例带你学习火热的Vue.js

vue.js背后的理念是提供尽可能简单的API,在视图(HTML)和模型(javascript对象)创建实时的双向绑定机制。正如你在下面的例子中所看到的,这个框架使用起来非常的高效且不影响任何功能。

开始起步

安装Vue.js最简单的方式是用一个<script>标签在HTML的body后边。整个框架位于一个JavaScript文件,您也可以从官方网站下载或直接通过CDN引入:<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
如果你想在Node.js项目中使用这个类库,Vue也可以通过npm 模块安装。用一个官方的命令点我,它允许用户基于预制模板的建立快速建立整个项目。
下面是五个代码预览编辑器,包含我们为您建立的示例应用程序。该代码有很多注释,并在每个文件中分离出来,使其很容易理解。编辑内置vue.js,所以不要害怕尝试。此外,你可以打包下载所有的例子,下载按钮在这篇文章的顶部。

1.导航菜单

我们将要建立一个简单的导航栏来说明我们的东西。几乎每一个由vue.js组成的应用都需要有几个基本的组件。他们是:

  • 模型,换句话说是我们app的数据,在Vue.js中这是一个包含变量和变量值的简单的javascript对象。
  • HTML模板,用专业的术语就是视图,在这里我们选择显示事件监听,和处理模型的不同用法。
  • 视图模型 - 一个Vue把模型和视图绑定在一起的实例,使他们能够同步显示。

在这些空洞的概念背后是该模型和视图始终保持同步。模型改变视图就会更新,反之亦然。在我们的第一个例子中,用active变量,表示该菜单项是当前的选项。

例子代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
        margin:0;
        padding:0;
    }

    body{
        font:15px/1.3 'Open Sans', sans-serif;
        color: #5e5b64;
        text-align:center;
    }

    a, a:visited {
        outline:none;
        color:#389dc1;
    }

    a:hover{
        text-decoration:none;
    }

    section, footer, header, aside, nav{
        display: block;
    }

    /*-------------------------
        The menu
    --------------------------*/

    nav{
        display:inline-block;
        margin:60px auto 45px;
        background-color:#5597b4;
        box-shadow:0 1px 1px #ccc;
        border-radius:2px;
    }

    nav a{
        display:inline-block;
        padding: 18px 30px;
        color:#fff !important;
        font-weight:bold;
        font-size:16px;
        text-decoration:none !important;
        line-height:1;
        text-transform: uppercase;
        background-color:transparent;

        -webkit-transition:background-color 0.25s;
        -moz-transition:background-color 0.25s;
        transition:background-color 0.25s;
    }

    nav a:first-child{
        border-radius:2px 0 0 2px;
    }

    nav a:last-child{
        border-radius:0 2px 2px 0;
    }

    nav.home .home,
    nav.projects .projects,
    nav.services .services,
    nav.contact .contact{
        background-color:#e35885;
    }

    p{
        font-size:22px;
        font-weight:bold;
        color:#7d9098;
    }

    p b{
        color:#ffffff;
        display:inline-block;
        padding:5px 10px;
        background-color:#c4d7e0;
        border-radius:2px;
        text-transform:uppercase;
        font-size:18px;
    }
    </style>
</head>
<body>
    <div id="main">
        <nav :class="active" @click.prevent>
            <a href="#" class="home" @click="makeActive('home')">Home</a>
            <a href="#" class="projects" @click="makeActive('projects')">Projects</a>
            <a href="#" class="services" @click="makeActive('services')">Services</a>
            <a href="#" class="contact" @click="makeActive('contact')">Contact</a>
        </nav>
        <p>You chose <b>{{active}}</b></p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
var vue=new Vue({
    el:"#main",
    data:{
        active:"home"
    },
    methods:{
        makeActive:function(item){
            this.active=item;
        }
    }

});
</script>
</html>
演示地址:
http://www.gbtags.com/gb/debug/7c2d1e0f-f66d-4159-8d30-50a25e96fd63.htm

正如你所看到的,这个库使用的非常明了,Vue做了大量的处理,为我们提供熟悉的容易记忆的语法。

  • 所有的选项都是简单的javascript对象
  • {{}}模板的双向绑定。
  • v- 开头的直接在HTML上添加内置属性

2.内在编辑器

在前面的例子中,我们的模型只有一对预定义的值。如果我们希望给用户设置任何数据的能力,我们可以进行双向绑定,并将一个输入域与模型属性连接起来。当输入文本时,它会自动保存在text_content模型,从而使视图的更新。

http://www.gbtags.com/gb/debug/d2c1903b-2c8f-4d9e-85f0-fda619070d02.htm

3.提交表单

这个例子说明了多个服务和它们的总成本。由于我们的服务是存储在数组中,我们可以利用的v-for指令循环输出所有的输入和显示。如果一个新的元素添加到数组或任何旧的改变,Vue.js会自动更新和显示新的数据。

http://www.gbtags.com/gb/debug/a4de2033-9412-4b89-a9a9-00b11dac4461.htm
显示价格在正确的格式,我们使用一个内置的过滤器来Vue.js。他们允许我们懒洋洋地修改模型数据–在这种情况下,货币的过滤器是完美的,因为它增加了一个美元符号和适当的小数位数。就像在Angular过滤器是使用|语法–{{ some_data | filter }}。

4.既时搜索

在这里,我们将创建一个应用程序,该应用程序在我们的网站上展示一些文章。该应用程序也将有一个搜索领域,使我们能够过滤哪些文章显示。有一个过滤器过滤,但这不正是我们需要的,所以我们将创建自己的自定义过滤器。

http://www.gbtags.com/gb/debug/33625654-9173-49b5-9537-3e56d47e61b4.htm

输入字段绑定到要查找的字符串模式。当输入文本时的模型是即时更新和传递给搜索过滤器。这样我们就可以创建一个实时搜索,而不必担心渲染或设置事件侦听器–Vue.js处理所有!

5.变换布局

在我们的最后一个例子中,我们将展示一个常见的场景,其中一个页面有不同的布局模式。就像在以前的应用程序我们将展示一系列从存储在一个数组tutorialzine.com文章。

通过按下顶部栏中的一个按钮,你可以在一个包含大图像的网格布局之间切换,以及一个较小的图像和文本的列表布局。

http://www.gbtags.com/gb/debug/6da7cffb-5f0a-45f3-9dc8-04916d170fc9.htm

 

结论

有很多Vue.js比我们展示这些例子。该库还提供动画,自定义组件和各种其他功能。我们建议您到官网http://vuejs.org/guide/查看,这是充分的信息和有用的片段。

Vue.js是否适合您的项目吗?以下链接将对你有很大的帮助:

  • 一个官方的,与其他框架的详细的比较。http://vuejs.org/guide/comparison.html
  • todomvc–是 一个同一应用程序是与许多不同的框架创建的网站。ps:(使用这些框架分别作出了一个个的todos;然后你就可以根据他们提供的代码来判断某个框架是否适合你,因为虽然是同样的功能,但是使用的框架不同,代码量不同,简易程度不同,他们给我们提供了一个比较的标准。)
  • 我们的文章里我们已经做过的类似的例子使用的React 和Angular.js。

阅读更多 登录后自动展开
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页