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 相关文章推荐
分享27个jQuery 表单插件集合推荐
Apr 25 Javascript
解析JSON对象与字符串之间的相互转换
Dec 18 Javascript
node.js中的events.emitter.removeListener方法使用说明
Dec 10 Javascript
关于JS中的apply,call,bind的深入解析
Apr 05 Javascript
JS选取DOM元素的简单方法
Jul 08 Javascript
vue.js单页面应用实例的简单实现
Apr 10 Javascript
简单实现JS上传图片预览功能
Apr 14 Javascript
ReactNative踩坑之配置调试端口的解决方法
Jul 28 Javascript
浅谈关于.vue文件中style的scoped属性
Aug 19 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
Nov 06 Javascript
使用Vue 自定义文件选择器组件的实例代码
Mar 04 Javascript
详解CocosCreator项目结构机制
Apr 14 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
PHP实现的连贯操作、链式操作实例
2014/07/08 PHP
php删除左端与右端空格的方法
2014/11/29 PHP
php nginx 实时输出的简单实现方法
2018/01/21 PHP
Yii2.0框架behaviors方法使用实例分析
2019/09/30 PHP
javascript parseInt 函数分析(转)
2009/03/21 Javascript
jQuery代码优化 遍历篇
2011/11/01 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
2013/03/18 Javascript
node.js中的dns.getServers方法使用说明
2014/12/08 Javascript
angularjs 处理多个异步请求方法汇总
2015/01/06 Javascript
jQuery 选择器详解
2015/01/19 Javascript
js实现文字在按钮上滚动的方法
2015/08/20 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
2016/04/07 Javascript
使用Xcache缓存器加速PHP网站的配置方法
2017/04/22 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
2017/05/20 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
2017/06/19 Javascript
详解vue-cli本地环境API代理设置和解决跨域
2017/09/05 Javascript
javascript中call()、apply()的区别
2019/03/21 Javascript
javascript刷新父页面方法汇总详解
2019/10/10 Javascript
JS实现动态星空背景效果
2019/11/01 Javascript
[37:37]DAC2018 4.4 淘汰赛 Optic vs Mineski 第二场
2018/04/05 DOTA
Pyramid添加Middleware的方法实例
2013/11/27 Python
Python利用matplotlib.pyplot绘图时如何设置坐标轴刻度
2018/04/09 Python
详解Django定时任务模块设计与实践
2019/07/24 Python
python实现文字版扫雷
2020/04/24 Python
Python getsizeof()和getsize()区分详解
2020/11/20 Python
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
2014/10/11 HTML / CSS
html5 css3网站菜单实现代码
2013/12/23 HTML / CSS
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
canvas绘制太极图的实现示例
2020/04/29 HTML / CSS
美国家居装饰网上商店:Lulu & Georgia
2019/09/14 全球购物
新教师岗前培训方案
2014/06/05 职场文书
管理工程专业求职信
2014/08/10 职场文书
政法干警核心价值观心得体会
2014/09/11 职场文书
小学国庆节活动方案策划书
2014/09/16 职场文书
整改通知书
2015/04/20 职场文书
vue判断按钮是否可以点击
2022/04/09 Vue.js