Vue.js 学习示例

时间 2019-11-12

原文原文链接

本篇和你们分享的是学习Vuejs的总结和调用webapi的一个小示例；快到年末了争取和你们多分享点东西，但愿能对各位有所帮助；本章内容但愿你们喜欢，也但愿各位多多扫码支持和推荐谢谢：html

» Vuejs - 学习大杂烩vue

» WebApi + Vue.js 示例jquery

下面一步一个脚印的来分享：angularjs

» Vuejs - 学习大杂烩web

首先，咋们要学习一个js框架，那么确定要引入该框架的基础库，这里我建立一个页面而且引用官网的库是： <script src="https://unpkg.com/vue/dist/vue.js"></script> ，下面咱们来看一段Vue的基础使用代码：json

1 var app = new Vue({
2 
3         el: "#appVue",
4         data: {
5             msg: "第一个vue",
6         }
7     });

分析下代码，这个Vue须要的参数传递是一个{}对象；里面的el和data是参数名称；el对应的是咋们的页面上某个块元素的id（好比div，table的id属性）；data对应的是数据源；msg是咋们自定义的数据源名称；好了咋们再来看一下对应的html代码和效果图：api

1 <h3>Vue - 学习大杂烩</h3>
2 <hr />
3 <div class="container" id="appVue">
4     <input type="text" v-model="msg" class="form-control" />
5 </div>

效果图：跨域

很明显咱们初始化的数据msg(“第一个vue”)在input中体现出来了，细看一下这个input标签的属性多了一个v-model属性，而且她对应的值是咋们初始化定义的msg，因而可知v-model起到了数据绑定做用；好咋们再来吧数据值弄复杂点，在data中再增长一个json格式的数组如：数组

1 blogs: [
2            { title: "webapi" },
3            { title: "wcf" },
4            { title: "mvc" }
5         ]

而后咋们增长以下的html：mvc

1 <ul>
2 　　<li class="text-left "  v-for="(blog,index) in blogs">{{index}} - {{blog.title}}</li>
3 </ul>

直接刷新页面，看下效果图：

从结果可以看出咋们定义的数据，直接被遍历展现在了页面，再来分析下具体的代码，相比较普通的li元素，此时多了一个v-for属性，而且对一个的值有一个这样的语法规则 (obj,index) in arr ，就相似于for循环的写法而且还有一个遍历编号index，有了循环那确定须要把值展现出来，这个时候能够看到li元素子级里面的写法是 {{index}} - {{blog.title}} ，来分析下写法规则：

1. {{}}是输出文本的格式，其中包含了要输出的对象

2. 参数index对应就是v-for里面的index，对应的值是遍历的序号，从0开始

3. blog.title对应的是v-for里面的blog，和她对应的自定义属性title

由上面{{}}数据绑定写法，不得不引出咱们对她的好奇心，这种写法其实在不少js数据绑定框架中都相同（好比：angularjs），下面咱们来作一个相加的小例子来更深入记住这种写法，首先在刚才的data属性中增长两个属性x和y：

 1 data: {
 2             msg: "第一个vue",
 3             blogs: [
 4                 { title: "webapi" },
 5                 { title: "wcf" },
 6                  { title: "mvc" }
 7             ],
 8             x: 444,
 9             y: 2
10         },

而后增长以下html代码：

1  <input type="text" v-model="x" /> * <input type="text" v-model="y" /> = {{x *  y}}

属性页面执行下效果：

由此可以看出 {{x * y}} 容许表达式，而且当我文本框中的x或y值修改后，此{{x*y}}会自动从新计算，有点相似于咱们本身写的js计算后从新赋值到显示框中的概念；下面咱们来看vue中怎么定义一个方法，这里用到她的一个属性methods，咱们定义以下的代码：

 1 var app = new Vue({
 2 
 3         el: "#appVue",
 4         data: {
 5             msg: "第一个vue",
 6             blogs: [
 7                 { title: "webapi" },
 8                 { title: "wcf" },
 9                  { title: "mvc" }
10             ],
11             x: 444,
12             y: 2
13         },
14         methods: {
15             showMsg: function () {17                 this.msg = "我是" + this.msg;
18             }
19         }
}

再来增长以下的html元素， <button v-on:click="showMsg" class="btn">点击</button> ，好了再来看下运行的效果图而且屡次点击按钮：

获得的效果是，一直在咋们 v-model="msg" 文本框中增长“我是”，这里获得的结论是按钮出发了咱们定义在vue中methods中的方法showMsg，再来看下按钮上的这个属性 v-on:click 就是用来表示绑定点击事件的，这里的v-on:click能够缩写成@click，因为我在vs中的mvc试图模板不支持这种写法，因此本篇仍是使用v-on这种写法来绑定事件；咱们再来用一用她的过滤器，这里咋们仍是在vue中增长以下filters的代码，定义一个大小写的过滤器：

1 filters: {
2             toUpper: function (val, isUpper) {
3                 if (!val) { return ""; }
4 
5                 return isUpper ? val.toUpperCase() : val.toLowerCase();
6             }
7         }

为了方便看效果，咱们修改上面的v-model="msg"的文本框代码以下：

1 <input type="text" v-model="msg" class="form-control" />{{msg|toUpper(true)}}<br />{{msg|toUpper(false)}}

咱们在文本框中增长了一个 {{msg|toUpper(true)}} 写法，细心朋友能发下后面的toUpper就是咱们刚才定义的过滤器的方法，传递了一个参数true，而后看下效果图：

经过使用不一样参数的filter的对比，能看出咱们过滤器在此实例中的效果，这里注意的是在msg后面直接使用‘|’隔开就能够增长咱们定义的过滤器了，若是多个以此类推使用‘|’追加隔开就好了，还有就是咱们定义的 toUpper: function (val, isUpper) 方法中有两个参数，第一个参数就是绑定的msg自己，第二个参数才是咱们须要手动传递的，这个必定要分开；时间很少了，这里就再也不讲解其余的经常使用的特性和属性了，直接来看下面vue使用webapi的数据体现的一个例子；

» WebApi + Vue.js 示例

首先，这里用到了Vue提供的组件概念component，她和js变量同样有全局和局部（私有）两种，代码方面差距不是很大效果也同样，这里咱们用到的是局部方式来定义一个组件，下面先来看总体代码：

 1  var blogApp = new Vue({
 2         el: "#divBlogs",
 3         data: {
 4             blogs: []
 5         },
 6         methods: {
 7             getBlogs: function () {
 8 
 9                 var that = this;
10                 $.getJSON("http://www.lovexins.com:1001/api/values?task=2", function (result) {
11                     if (!result) { return; }
12                     that.blogs = result;
13                 });
14             }
15         },
16         components: {
17             "div-blog": {
18                 props: ["item"],
19                 template: '<div class=" bs-callout bs-callout-danger">' +
20                                '    <h4>' +
21                                '        <a v-bind:href="item.Url" target="_blank">{{item.Title | toUpperOrLower(false)}}</a>' +
22                                '    </h4>' +
23                                '    <p>' +
24                                '        {{item.Des}}' +
25                                '    </p>' +
26                                '    <hr />' +
27                                '    <h5>' +
28                                '        做者：<a v-bind:href="item.BlogUrl" target="_blank">{{item.NickName}}</a>  发布时间：<code>{{item.CreateTime}}</code>  推荐：<code>{{item.ZanNum}}</code>  阅读：<code>{{item.ReadNum}}</code>  评论：<code>{{item.CommiteNum}}</code>' +
29                                '    </h5>' +
30                                ' </div>',
31                 filters: {
32                     toUpperOrLower: function (val, isUpper) {
33                         if (!val) { return ""; }
34 
35                         return isUpper ? val.toUpperCase() : val.toLowerCase();
36                     }
37                 }
38             }
39         }
40     });

这里定义的格式和上面第一小节使用到的差很少，只是多了一个components的定义，这个就是组件的关键字，咋们来逐一分析下代码步骤；

1. blogs: []是咱们定义的一个博客信息数组

2. methods属性中getBlogs方法用到了一段 var that = this; 这样的代码，这里的this是上面建立的 var blogApp = new Vue() 对象，她能够直接使用data中定义的博客数据数组blogs，所以有了下面经过jquery的getJSON获取webapi数据后，直接赋值给博客数组bolgs

3. components组件中自定义了一个名为“div-blog”的组件，参数名称是props定义的item；template是对应的模板，里面能够直接使用item来获取对应的参数值；

4. 这里也定义了一个filters，一样是转大小写的，写法能够忽略了，主要注意的地方这里局部的定义的主键里面使用filters的时候也一样是 {{item.Title | toUpperOrLower(false)}} 格式

好了经过上面总结注意点，咋们再来看下怎么在html中使用这个自定义的组件呢，以下总体html代码：

 1 <div class="row" id="divBlogs">
 2     <div class="col-md-12">
 3         <button v-on:click="getBlogs" class="btn btn-default">查 询</button>
 4         <div-blog v-for="blog in blogs" v-bind:item="blog"></div-blog>
 5 
 6         <div style="position:fixed; right:0px; bottom:10px; width:44px; height:40px; background-color:#F8F8F8; font-weight:100; cursor:pointer;" id="toTop" onclick="toTop()">
 7             <img title="返 回" style="width:38px;height:38px;border:1px solid #ccc" src="http://121.42.208.152/images/top.png">
 8         </div>
 9     </div>
10 </div>

引用自定义组件的代码就一句： <div-blog v-for="blog in blogs" v-bind:item="blog"></div-blog> ，这里的div-blog就是对应上面总结的第3点说的，自定义主键名称，须要注意的是若是自定义组件名称格式如divBlog(驼峰格式)，那么咱们在html中使用格式就必须是div-Blog，经过‘-’分割开来，这个细节特别要注意否则页面不会有效果，好了说了这么多来看下运行的效果图：

这里我用的是上一篇博客开放出来抓取博客园首页数据的接口：http://www.lovexins.com:1001/api/values?task=2，后台设置了容许跨域请求，若是各位有兴趣能够直接使用该数据，顺便再发下本次实例的线上地址：http://www.lovexins.com:1001/home/vue，但愿各位喜欢，一样但愿各位多多点“推荐”