window.quickReplyflag = true; var isBole = false; var fasrc="http://my.csdn.net/my/favorite/miniadd?t=%e4%ba%94%e4%b8%aa%e5%b0%8f%e6%a1%88%e4%be%8b%e5%b8%a6%e4%bd%a0%e5%ad%a6%e4%b9%a0%e7%81%ab%e7%83%ad%e7%9a%84Vue.js&u=http://blog.csdn.net/daimomo000/article/details/54139322"
如果你想在Node.js项目中使用这个类库，Vue也可以通过npm 模块安装。用一个官方的命令点我，它允许用户基于预制模板的建立快速建立整个项目。
下面是五个代码预览编辑器，包含我们为您建立的示例应用程序。该代码有很多注释，并在每个文件中分离出来，使其很容易理解。编辑内置vue.js，所以不要害怕尝试。此外，你可以打包下载所有的例子，下载按钮在这篇文章的顶部。
document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000)
<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('%e4%ba%94%e4%b8%aa%e5%b0%8f%e6%a1%88%e4%be%8b%e5%b8%a6%e4%bd%a0%e5%ad%a6%e4%b9%a0%e7%81%ab%e7%83%ad%e7%9a%84Vue.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变量，表示该菜单项是当前的选项。
例子代码如下：- <!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.html
- todomvc
–是 一个同一应用程序是与许多不同的框架创建的网站。ps:(使用这些框架分别作出了一个个的todos；然后你就可以根据他们提供的代码来判断某个框架是否适合你，因为虽然是同样的功能，但是使用的框架不同，代码量不同，简易程度不同，他们给我们提供了一个比较的标准。)
- 我们的文章里我们已经做过的类似的例子使用的React 和Angular.js。
<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>
1062
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
