五个小案例带你学习火热的Vue.js
vue.js背后的理念是提供尽可能简单的API，在视图（HTML）和模型（javascript对象）创建实时的双向绑定机制。正如你在下面的例子中所看到的，这个框架使用起来非常的高效且不影响任何功能。开始起步安装Vue.js最简单的方式是用一个标签在HTML的body后边。整个框架位于一个JavaScript文件，您也可以从官方网站下载或直接通过CDN引入：如果你想在Node.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。
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献8条内容
所有评论(0)