全国服务热线:4008-888-888

行业新闻

小程序远景怎样_Vue.js学习示例分享

Vue.js学习示例分享       本篇和大家分享的是学习Vuejs的总结和调用webapi的一个小示例;具有一定的参考价值,下面跟着小编一起来看下吧

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

Vuejs - 学习大杂烩

WebApi + Vue.js 示例

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

Vuejs - 学习大杂烩

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

script src="

下面我们来看一段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 id="appVue" 
 input type="text" v-model="msg" / 
 /div 

效果图:

 

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

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

然后咋们增加如下的html:

 li 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" 点击 /button

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

得到的效果是,一直在咋们 v-model="msg" 文本框中增加“我是”,这里得到的结论是按钮出发了我们定义在vue中methods中的方法showMsg,再来看下按钮上的这个属性 v-on:click 就是用来表示绑定点击事件的,这里的v-on:,所以本篇还是使用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" / {{msg|toUpper(true)}} br / {{msg|toUpper(false)}}

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

通过使用不同参数的filter的对比,能看出我们过滤器在此实例中的效果,这里注意的是在msg后面直接使用‘|'隔开就可以增加我们定义的过滤器了,如果多个以此类推使用‘|'追加隔开就行了,还有就是我们定义的 toUpper: function (val, isUpper) 方法中有两个参数,第一个参数就是绑定的msg本身,第二个参数才是我们需要手动传递的,这个一定要分开;时间不多了,这里就不再讲解其他的常用的特性和属性了,直接来看下面vue使用webapi的数据体现的一个例子;

WebApi + Vue.js 示例

ponent,她和js变量一样有全局和局部(私有)两种,代码方面差距不是很大效果也一样,这里我们用到的是局部方式来定义一个组件,下面先来看整体代码:

var blogApp = new Vue({
 el: "#divBlogs",
 data: {
 blogs: []
 methods: {
 getBlogs: function () {
 var that = this;
 $.getJSON("api/values task=2", function (result) {
 if (!result) { return; }
 that.blogs = result;
 components: {
 "div-blog": {
 pro凡科抠图: ["item"],
 template: ' div ' +
 ' 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();
 });

ponents的定义,这个就是组件的关键字,咋们来逐一分析下代码步骤;

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

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

3. components组件中自定义了一个名为“div-blog”的组件,参数名称是pro凡科抠图定义的item;template是对应的模板,里面可以直接使用item来获取对应的参数值;

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

好了通过上面总结注意点,咋们再来看下怎么在html中使用这个自定义的组件呢,如下整体html代码:

 div id="divBlogs" 
 div 
 button v-on:click="getBlogs" 查 询 /button 
 div-blog v-for="blog in blogs" v-bind:item="blog" /div-blog 
 div id="toTop" 
 img title="返 回" src="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,通过‘-'分割开来,这个细节特别要注意不然页面不会有效果,好了说了这么多来看下运行的效果图:

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




在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服