Vue.js学习示例分享


Posted in Javascript onFebruary 05, 2017

本篇和大家分享的是学习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>

效果图:

 Vue.js学习示例分享

很明显我们初始化的数据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>

直接刷新页面,看下效果图:

 Vue.js学习示例分享

从结果能够看出咋们定义的数据,直接被遍历展示在了页面,再来分析下具体的代码,相比较普通的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}}

属性页面执行下效果:

 Vue.js学习示例分享

由此能够看出 {{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>

好了再来看下运行的效果图并且多次点击按钮:

Vue.js学习示例分享

得到的效果是,一直在咋们 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,然后看下效果图:

Vue.js学习示例分享

通过使用不同参数的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学习示例分享

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
解析JavaScript中的不可见数据类型
Dec 02 Javascript
javascript 用函数语句和表达式定义函数的区别详解
Jan 06 Javascript
jQuery使用andSelf()来包含之前的选择集
May 19 Javascript
JavaScript常用的弹出广告及背投广告实现方法
Feb 06 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
Apr 15 Javascript
SWFUpload多文件上传及文件个数限制的方法
May 31 Javascript
js点击任意区域弹出层消失实现代码
Dec 27 Javascript
Bootstrap table表格简单操作
Feb 07 Javascript
微信小程序倒计时功能实现代码
Nov 09 Javascript
Vue利用canvas实现移动端手写板的方法
May 03 Javascript
node中的密码安全(加密)
Sep 17 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
Sep 30 Javascript
JavaScript定时器制作弹窗小广告
Feb 05 #Javascript
JavaScript制作简易计算器(不用eval)
Feb 05 #Javascript
flexslider.js实现移动端轮播
Feb 05 #Javascript
简单实现js悬浮导航效果
Feb 05 #Javascript
用js制作淘宝放大镜效果
Oct 28 #Javascript
js实现百度搜索提示框
Feb 05 #Javascript
jQuery.Form上传文件操作
Feb 05 #Javascript
You might like
实用函数5
2007/11/08 PHP
PHP设计模式之迭代器模式
2016/06/17 PHP
form表单传递数组数据、php脚本接收的实例
2017/02/09 PHP
PHP消息队列实现及应用详解【队列处理订单系统和配送系统】
2019/05/20 PHP
JQuery触发事件例如click
2013/09/11 Javascript
js获取当前页面路径示例讲解
2014/01/08 Javascript
Egret引擎开发指南之创建项目
2014/09/03 Javascript
js常用系统函数用法实例分析
2015/01/12 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
2016/10/28 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
2017/02/28 Javascript
纯js封装的ajax功能函数与用法示例
2018/05/14 Javascript
js 计算图片内点个数的示例代码
2019/04/04 Javascript
mpvue小程序循环动画开启暂停的实现方法
2019/05/15 Javascript
vue2 拖动排序 vuedraggable组件的实现
2019/08/08 Javascript
关于JS模块化的知识点分享
2019/10/16 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
2019/12/12 Javascript
精读《Vue3.0 Function API》
2020/05/20 Javascript
在Linux下调试Python代码的各种方法
2015/04/17 Python
Python浅拷贝与深拷贝用法实例
2015/05/09 Python
python使用in操作符时元组和数组的区别分析
2015/05/19 Python
Python 遍历列表里面序号和值的方法(三种)
2017/02/17 Python
Python3 利用requests 库进行post携带账号密码请求数据的方法
2018/10/26 Python
python opencv 二值化 计算白色像素点的实例
2019/07/03 Python
详解Python用三种方式统计词频的方法
2019/07/29 Python
Python3 列表,数组,矩阵的相互转换的方法示例
2019/08/05 Python
浅析Python 字符编码与文件处理
2020/09/24 Python
H5离线存储Manifest原理及使用
2020/04/28 HTML / CSS
Regatta官网:英国最受欢迎的户外服装和鞋类品牌
2019/05/01 全球购物
金讯Java笔试题目
2013/06/18 面试题
农场厂长岗位职责
2013/12/28 职场文书
商务会议邀请函
2014/01/09 职场文书
宣传部部长竞选演讲稿
2014/04/26 职场文书
会计出纳岗位职责
2015/03/31 职场文书
魂断蓝桥观后感
2015/06/10 职场文书
大学生入党自我鉴定范文
2019/06/21 职场文书
Django操作cookie的实现
2021/05/26 Python