本篇和大家分享的是学习Vuejs的总结和调用webapi的一个小示例；

» Vuejs - 学习大杂烩

» WebApi + Vue.js 示例

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

» Vuejs - 学习大杂烩

首先，咋们要学习一个js框架，那么肯定要引入该框架的基础库，这里我创建一个页面并且引用官网的库是：

<script src="https://unpkg.com/vue/dist/vue.js"></script>

下面我们来看一段Vue的基础使用代码：

var app = new Vue({
 el: "#appVue",
 data: {
 msg: "第一个vue",
 }
 });

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

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

效果图：

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

blogs: [
 { title: "webapi" },
 { title: "wcf" },
 { title: "mvc" }
 ]

然后咋们增加如下的html：

 <ul>
 　　<li class="text-left " v-for="(blog,index) in blogs">{{index}} - {{blog.title}}</li>
 </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：

data: {
 msg: "第一个vue",
 blogs: [
 { title: "webapi" },
 { title: "wcf" },
  { title: "mvc" }
 ],
 x: 444,
 y: 2
 },

然后增加如下html代码：

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

属性页面执行下效果：

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

var app = new Vue({
 el: "#appVue",
 data: {
 msg: "第一个vue",
 blogs: [
 { title: "webapi" },
 { title: "wcf" },
  { title: "mvc" }
 ],
 x: 444,
 y: 2
 },
 methods: {
 showMsg: function () {17  this.msg = "我是" + this.msg;
 }
 }
}

再来增加如下的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的代码，定义一个大小写的过滤器：

filters: {
 toUpper: function (val, isUpper) {
 if (!val) { return ""; }
 return isUpper ? val.toUpperCase() : val.toLowerCase();
 }
 }

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

<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变量一样有全局和局部（私有）两种，代码方面差距不是很大效果也一样，这里我们用到的是局部方式来定义一个组件，下面先来看整体代码：

var blogApp = new Vue({
 el: "#divBlogs",
 data: {
 blogs: []
 },
 methods: {
 getBlogs: function () {

 var that = this;
 $.getJSON("http://www.lovexins.com:1001/api/values?task=2", function (result) {
  if (!result) { return; }
  that.blogs = result;
 });
 }
 },
 components: {
 "div-blog": {
 props: ["item"],
 template: '<div class=" bs-callout bs-callout-danger">' +
  ' <h4>' +
  ' <a v-bind:href="item.Url" target="_blank">{{item.Title | toUpperOrLower(false)}}</a>' +
  ' </h4>' +
  ' <p>' +
  ' {{item.Des}}' +
  ' </p>' +
  ' <hr />' +
  ' <h5>' +
  ' 作者：<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>' +
  ' </h5>' +
  ' </div>',
 filters: {
  toUpperOrLower: function (val, isUpper) {
  if (!val) { return ""; }

  return isUpper ? val.toUpperCase() : val.toLowerCase();
  }
 }
 }
 }
 });

这里定义的格式和上面第一小节使用到的差不多，只是多了一个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代码：

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

引用自定义组件的代码就一句：

 <div-blog v-for="blog in blogs" v-bind:item="blog"></div-blog>

这里的div-blog就是对应上面总结的第3点说的，自定义主键名称，需要注意的是如果自定义组件名称格式如divBlog(驼峰格式)，那么我们在html中使用格式就必须是div-Blog，通过‘-'分割开来，这个细节特别要注意不然页面不会有效果，好了说了这么多来看下运行的效果图：

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

# Vue.js  # Vue.js学习之过滤器详解  # Vue.js学习之计算属性  # vue.js将unix时间戳转换为自定义时间格式  # Vue.js系列之项目搭建(1)  # Vue.js中用v-bind绑定class的注意事项  # Vue.js使用v-show和v-if的注意事项  # 深入理解vue.js双向绑定的实现原理  # Vue.js路由组件vue-router使用方法详解  # Vue.js组件tabs实现选项卡切换效果  # 基于vue.js实现图片轮播效果  # Vue.js 递归组件实现树形菜单（实例分享）  # 的是  # 再来  # 自定义  # 第一个  # 绑定  # 好了  # 遍历  # 框中  # 我是  # 是在  # 可以直接  # 类似于  # 博客  # 主键  # 是一个  # 发布时间  # 来了  # 我在  # 一句  # 多个 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 如何获取免费开源的自助建站系统源码？  Win11怎么设置默认图片查看器_Windows11照片应用关联设置  Laravel如何集成Inertia.js与Vue/React？（安装配置）  ChatGPT怎么生成Excel公式_ChatGPT公式生成方法【指南】  如何在阿里云服务器自主搭建网站？  成都品牌网站制作公司,成都营业执照年报网上怎么办理？  Laravel如何实现URL美化Slug功能_Laravel使用eloquent-sluggable生成别名【方法】  如何在HTML表单中获取用户输入并用JavaScript动态控制复利计算循环  高端建站如何打造兼具美学与转化的品牌官网？  佛山企业网站制作公司有哪些,沟通100网上服务官网？  如何快速搭建高效香港服务器网站？  Laravel API资源(Resource)怎么用_格式化Laravel API响应的最佳实践  Win11怎么设置虚拟桌面 Win11新建多桌面切换操作【技巧】  如何在万网自助建站平台快速创建网站？  如何有效防御Web建站篡改攻击？  湖南网站制作公司,湖南上善若水科技有限公司做什么的？  Laravel与Inertia.js怎么结合_使用Laravel和Inertia构建现代单页应用  QQ浏览器网页版登录入口 个人中心在线进入  Laravel如何优化应用性能？（缓存和优化命令）  大同网页,大同瑞慈医院官网？  如何实现javascript表单验证_正则表达式有哪些实用技巧  开心动漫网站制作软件下载,十分开心动画为何停播？  购物网站制作费用多少,开办网上购物网站，需要办理哪些手续？  javascript中对象的定义、使用以及对象和原型链操作小结  如何在IIS服务器上快速部署高效网站？  如何在云主机上快速搭建多站点网站？  JS实现鼠标移上去显示图片或微信二维码  Laravel如何使用API Resources格式化JSON响应_Laravel数据资源封装与格式化输出  Internet Explorer官网直接进入 IE浏览器在线体验版网址  Zeus浏览器网页版官网入口 宙斯浏览器官网在线通道  企业网站制作这些问题要关注  晋江文学城电脑版官网 晋江文学城网页版直接进入  高防网站服务器：DDoS防御与BGP线路的AI智能防护方案  Laravel如何将应用部署到生产服务器_Laravel生产环境部署流程  1688铺货到淘宝怎么操作 1688一键铺货到自己店铺详细步骤  网站制作大概多少钱一个,做一个平台网站大概多少钱？  美食网站链接制作教程视频,哪个教做美食的网站比较专业点？  如何实现建站之星域名转发设置？  Laravel中Service Container是做什么的_Laravel服务容器与依赖注入核心概念解析  php后缀怎么变mp4格式错误_修改扩展名提示格式不对怎么办【技巧】  Laravel如何监控和管理失败的队列任务_Laravel失败任务处理与监控  Laravel如何与Pusher实现实时通信？（WebSocket示例）  如何在云主机上快速搭建网站？  网站制作大概要多少钱一个,做一个平台网站大概多少钱？  Laravel如何处理JSON字段_Eloquent原生JSON字段类型操作教程  php增删改查怎么学_零基础入门php数据库操作必知基础【教程】  深圳防火门网站制作公司,深圳中天明防火门怎么编码？  进行网站优化必须要坚持的四大原则  打开php文件提示内存不足_怎么调整php内存限制【解决方案】  Windows10电脑怎么设置虚拟光驱_Win10右键装载ISO镜像文件