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

xiaoxiao2021-02-28 99

日报20170707——《稀缺：百分之二的选择》征文 | 你会为 AI 转型么？专家问答 | 资深Java工程师带你解读MyBatis window.quickReplyflag = true; var isBole = false; var fasrc="http://my.csdn.net/my/favorite/miniadd?t=五个小案例带你学习火热的Vue.js&u=http://blog.csdn.net/daimomo000/article/details/54139322"

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

<div class="article_manage clearfix"> <div class="article_r"> <span class="link_postdate">2017-01-06 16:17</span> <span class="link_view" title="阅读次数">1227人阅读</span> <span class="link_comments" title="评论次数"> <a href="#comments" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_pinglun'])">评论</a>(0)</span> <span class="link_collect tracking-ad" data-mod="popu_171"> <a href="javascript:void(0);" onclick="javascript:collectArticle('五个小案例带你学习火热的Vue.js','54139322');return false;" title="收藏" target="_blank">收藏</a></span> <span class="link_report"> <a href="#report" onclick="javascript:report(54139322,2);return false;" title="举报">举报</a></span> </div> </div> <style type="text/css"> .embody{ padding:10px 10px 10px; margin:0 -20px; border-bottom:solid 1px #ededed; } .embody_b{ margin:0 ; padding:10px 0; } .embody .embody_t,.embody .embody_c{ display: inline-block; margin-right:10px; } .embody_t{ font-size: 12px; color:#999; } .embody_c{ font-size: 12px; } .embody_c img,.embody_c em{ display: inline-block; vertical-align: middle; } .embody_c img{ width:30px; height:30px; } .embody_c em{ margin: 0 20px 0 10px; color:#333; font-style: normal; } </style> <script type="text/javascript"> $(function () { try { var lib = eval("("+$("#lib").attr("value")+")"); var html = ""; if (lib.err == 0) { $.each(lib.data, function (i) { var obj = lib.data[i]; //html += '<img src="' + obj.logo + '"/>' + obj.name + " "; html += ' <a href="' + obj.url + '" target="_blank">'; html += ' <img src="' + obj.logo + '">'; html += ' <em><b>' + obj.name + '</b></em>'; html += ' </a>'; }); if (html != "") { setTimeout(function () { $("#lib").html(html); $("#embody").show(); }, 100); } } } catch (err) { } }); </script> <div class="category clearfix"> <div class="category_l"> <img src="http://static.blog.csdn.net/images/category_icon.jpg"> <span>分类：</span> </div> <div class="category_r"> <label onclick="GetCategoryArticles('6668130','daimomo000','top','54139322');"> <span onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_fenlei']);">Vue.js<em>（4）</em></span> <img class="arrow-down" src="http://static.blog.csdn.net/images/arrow_triangle _down.jpg" style="display:inline;"> <img class="arrow-up" src="http://static.blog.csdn.net/images/arrow_triangle_up.jpg" style="display:none;"> <div class="subItem"> <div class="subItem_t"><a href="http://blog.csdn.net/daimomo000/article/category/6668130" target="_blank">作者同类文章</a><i class="J_close">X</i></div> <ul class="subItem_l" id="top_6668130"> </ul> </div> </label> </div> </div>

目录(?)[+]

开始起步导航菜单内在编辑器提交表单既时搜索变换布局结论

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变量，表示该菜单项是当前的选项。

例子代码如下：

[html] view plain copy print ? <!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> <!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.htmltodomvc –是一个同一应用程序是与许多不同的框架创建的网站。ps:(使用这些框架分别作出了一个个的todos；然后你就可以根据他们提供的代码来判断某个框架是否适合你，因为虽然是同样的功能，但是使用的框架不同，代码量不同，简易程度不同，他们给我们提供了一个比较的标准。)我们的文章里我们已经做过的类似的例子使用的React 和Angular.js。 document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000) <div id="digg" articleid="54139322"> <dl id="btnDigg" class="digg digg_enable" onclick="btndigga();"> <dt>顶</dt> <dd>0</dd> </dl> <dl id="btnBury" class="digg digg_enable" onclick="btnburya();"> <dt>踩</dt> <dd>0</dd> </dl> </div> <div class="tracking-ad" data-mod="popu_222"><a href="javascript:void(0);" target="_blank"> </a> </div> <div class="tracking-ad" data-mod="popu_223"> <a href="javascript:void(0);" target="_blank"> </a></div> <script type="text/javascript"> function btndigga() { $(".tracking-ad[data-mod='popu_222'] a").click(); } function btnburya() { $(".tracking-ad[data-mod='popu_223'] a").click(); } </script>

转载请注明原文地址: https://www.6miu.com/read-48533.html

技术

最新回复(0)