又一款MVVM组件 Vue基础语法和常用指令(1)
前言:关于vue框架,好几个月之前就听说过,了解一项新技术之后,总是处于观望状态,一直在犹豫要不要系统学习下。正好最近有点空,就去官网了解了下,看上去还不错的一个组件,就抽空研究了下。最近园子里vue也确实挺火,各种入门博文眼花缭乱,博主也不敢说写得多好,就当是个学习笔记,有兴趣的可以看看。
一、mvvm大比拼
关于mvvm,原来在介绍的时候有过讲解,目前市面上比较火的mvvm框架也是一抓一大把,比如常见的有knockout.js、vue.js、react、angularjs等,每一款都有它们自己的优势。
knockout:微软出品,可以说是mvvm的模型领域内的先驱,使用函数偷龙转凤,最短编辑长度算法实现dom的同步,兼容ie6,实现高超,但源码极其难读,最近几年发展缓慢。
vue:是最近几年出来的一个开源javascript框架,语法精简,实现精致,但对浏览器的支持受限,最低只能支持ie9。
react:facebook出品,带来virtual dom的革命性概念,受限于视图的规模。
angularjs:google出品,已经被用于google的多款产品当中。angularjs有着诸多特性,最为核心的是:mvc、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。入门容易上手难,大量避不开的概念也是很头疼的。
更多mvvm框架优缺点比较,可以看下 。
其实在博主的博文里面,说得最多的还是那句:任何技术和框架都有它存在的价值和意义!由上也可以看出没有哪个框架是真正完美的,关键看你如何取舍,在你的项目中用好了以上任何一种框架,你就是技术大牛。不过话虽这样说,博主觉得多了解一些框架对我们并无坏处,至少能开阔我们的眼界吧。
二、vue常用网址
上文说了,vue是一个开源框架,最新版本已经更新到了2.0,是一个独立的javascript框架,不依赖于任何其他框架(例如jquery),下面是博主收集的一些常用网址。
vue.js开源地址:
vue.js英文api地址:
后来博主又找到一个中文的api地址,感谢开源社区工作者的翻译。
还有一个博主觉得很方便的就是一个vue的在线测试网址:https://jsfiddle.net/chrisvfritz/50wl7mdz/。里面键入相应的html+js+css可以直接运行查看效果。
三、vue基础入门
1、mvvm图例
说到mvvm,先来看看下面下面这张图
这张图足以说明mvvm的核心功能,在这三者里面,viewmodel无疑起着重要的桥梁作用。
一方面,通过viewmodel将model的数据绑定到view的dom元素上面,当model里面的数据发生变化的时候,通过viewmodel里面数据绑定的机制,触发view里面dom元素的变化;
另一方面,又通过viewmodel来监听view里面的dom元素的数据变化,当页面上面的dom元素发生变化的时候,viewmodel通过dom树的监听机制,触发对应的model的数据变化。
当然在vue.js里面viewmodel也是核心部件,它就是一个vue实例。这个实例作用于单个或者多个html元素,从而实现dom树监听和数据绑定的双向更新操作。
2、第一个vue实例
关于第一个实例,无疑是最简单的应用。要使用vue,不用多说,肯定是先去github上面下载源码喽,然后引入到我们的项目中来,需要引用的js就一个vue.js,版本是2.0.5。
先来看一个最简单的例子:
<body> <div id="app"> <h1>姓名:{{ name }}</h1> <h1>年龄:{{ age }}</h1> <h1>学校:{{ school }}</h1> </div> <script src="content/vue/dist/vue.js"></script> <script type="text/javascript"> //model var data = { name: '小明', age: 18, school:'光明小学', } //viewmodel var vue = new vue({ el: '#app', data: data, }); </script> </body>
这段代码不难理解,我们的model就是data变量,而viewmodel就是这里的new vue()得到的对象。这里两个最简单的属性相信大家一看就能明白。
el:表示绑定的dom元素,此例子中表示的是父级的dom元素。
data:需要绑定的数据model。
如果仅仅是展示,只需要姓名:{{ name }}这样写就好了。运行的效果如下:
值得一提的是{{ name }}这种写法仅仅只能实现单向绑定,只有在model里面数据发生变化的时候会触发界面dom元素的变化,反之并不能触发model数据的变化。可以通过浏览器的console来验证这一理论。
那么,对于双向绑定的机制,vue是如何实现的呢?
3、双向绑定
vue里面提供了v-model指令,为我们方便实现model和view的双向绑定,使用也非常简单。还是上文的例子,我们加入一个文本框,里面使用v-model指令。
<body> <div id="app"> <h1>编辑姓名:<input type="text" v-model="name" /></h1> <h1>姓名:{{ name }}</h1> <h1>年龄:{{ age }}</h1> <h1>学校:{{ school }}</h1> </div> <script src="content/vue/dist/vue.js"></script> <script type="text/javascript"> //model var data = { name: '小明', age: 18, school:'光明小学', } //viewmodel var vue = new vue({ el: '#app', data: data, }); </script> </body>
得到效果:
双向绑定效果展示:
通过v-model指令,很方便的实现了model和view之间的双向绑定。单从这种绑定的方式来看,还是比knockout要简单一点,至少不用区分什么普通属性和监控属性。
四、常用指令
本来按照vue文档说明,常用指令应该是放在后面介绍的,但是从使用的层面考虑,先介绍常用指令还是非常必要的,因为博主觉得这些指令是我们入手使用vue的桥梁,没有这些基石,一切的高级应用都是空话。
vue里面为我们提供的常用指令主要有以下一些。
每一个指令都可以链接到相关文档,博主觉得文档里面每种指令的语法写得非常详细,在此就没必要重复做说明了,下面博主打算将一些常用的指令以分组的形式分别结合demo来进行解释说明。
1、v-text、v-html指令
v-text、v-html这两者分为一组很好理解,一个用于绑定文本,一个用于绑定html。上文使用到的{{ name }}这种写法就是v-text的的缩写形式。这个很简单,没什么好纠结的,看一个demo就能明白。
<body> <div id="app"> <h1>姓名:<label v-text="name"></label></h1> <h1>姓名:{{ name }}</h1> <div style="font-size:30px;font-weight:bold;" v-html="age">年龄:</div> </div> <script src="content/vue/dist/vue.js"></script> <script type="text/javascript"> //model var data = { name: '小明', age: "<label>20</label>", school:'光明小学', } //viewmodel var vue = new vue({ el: '#app', data: data, }); </script> </body>
效果如下:
代码说明:
1.name}}这种写法和v-text的作用是相同的,用于绑定标签的text属性。注意如果标签没有text属性,该绑定会失效,比如你在一个文本框上面使用v-text是没有效果的
2.由得到的效果可以看出,v-html绑定后会覆盖原来标签里面的内容(比如上面的“年龄:”),记住此处是覆盖而非append。
3.对于v-html应用的时候要慎重,在网站上动态渲染任意 html 有一定的危险存在,因为容易导致xss 跨站脚本攻击。所以最好是在信任的网址上面使用。
4.注意v-text和v-html绑定都是单向的,只能从model到view的绑定,不能实现view到model的更新。
2、v-model指令
v-model上面有介绍它的双向绑定功能,对于v-model指令,vue限定只能对表单控件进行绑定,常见的有<input>、<select>、<textarea>等。
<body> <div id="app"> <h2>编辑姓名:<input type="text" v-model="name" /></h2> <h2>姓名:{{name}}</h2> <hr /> <h2>编辑备注:<textarea v-model="remark"></textarea></h2> <h2>备注:{{remark}}</h2> <hr /> <input type="checkbox" id="basketball" value="篮球" v-model="hobby"> <label for="basketball">篮球</label> <input type="checkbox" id="football" value="足球" v-model="hobby"> <label for="football">足球</label> <input type="checkbox" id="running" value="跑步" v-model="hobby"> <label for="running">跑步</label> <br> <h2>学生爱好: {{ hobby }}</h2> <hr /> <h2>户籍:{{ huji }}</h2> <select style="width:100px;" class="form-control" v-model="huji"> <option>湖南</option> <option>广东</option> <option>北京</option> </select> </div> <script src="content/vue/dist/vue.js"></script> <script type="text/javascript"> //model var data = { name: '小明', age: 18, school: '光明小学', hobby: [], remark: '三好学生', huji:"" } //viewmodel var vue = new vue({ el: '#app', data: data, }); </script> </body>
以上列举了v-model的一些常见用法,应该都不难,基本都是双向绑定,效果如下:
关于selece的数据源的动态绑定,我们留在v-for指令的时候介绍。
3、v-if、v-else指令
v-if和v-else是一对离不开的好兄弟,使用条件运算符判断时常用。需要说明的是,v-if可以单独使用,但是v-else的前面必须要有一个v-if的条件或者v-show指令(后面介绍),这个和我们编程的原理是一样一样的。
它们作为条件渲染指令,他们的基础语法如下:
注意这里的v-else可以不写,expression表达式是一个返回bool类型的属性或者表达式。
<body> <div id="app"> <h1>姓名:<label v-text="name"></label></h1> <h1>是否已婚:<span v-if="ismarry">是</span></h1> <h1>大人or小孩:<span v-if="age>18">大人</span><span v-else>小屁孩</span></h1> <h1>学校:{{ school }}</h1> </div> <script src="content/vue/dist/vue.js"></script> <script type="text/javascript"> //model var data = { name: '小明', ismarry: true, age: 20, school:'光明小学', } //viewmodel var vue = new vue({ el: '#app', data: data, }); </script> </body>
得到结果:
只有有一点编程基础,上述应该不难看懂。
4、v-show指令
v-show指令表示根据表达式之bool值,觉得是否显示该元素。需要说明的是,如果bool值false,对应的dom标签还是会渲染到页面上面,只是将该标签的css属性display设为none而已。而如果你用v-if值,bool值为false的时候整个dom树都不被渲染到页面上面。从这点上来说看,如果你的需求是需要经常切换元素的显示和隐藏,使用v-show效率更高,而如果你只做一次条件判断,使用v-if更加合适。
v-show还常和v-else一起使用,表示如果v-show条件满足,则显示当前标签,否则显示v-else标签。
<body> <div id="app"> <h1>姓名:<label v-text="name"></label></h1> <h1>是否已婚:<span v-show="ismarry">是</span></h1> <h1>学校:{{ school }}</h1> </div> <script src="content/vue/dist/vue.js"></script> <script type="text/javascript"> //model var data = { name: '小明', ismarry: false, age: 16, school:'光明小学', } //viewmodel var vue = new vue({ el: '#app', data: data, }); </script> </body>
得到效果:
5、v-for指令
v-for
指令需要以item in items
形式的特殊语法。常用来绑定数据对象。
最简单的例子:
<body> <div id="app"> <ul> <li v-for="value in nums">{{value}}</li> </ul> </div> <script src="content/vue/dist/vue.js"></script> <script type="text/javascript"> //viewmodel var vue = new vue({ el: '#app', data: { nums: [1, 2, 3, 4, 5, 6, 7, 8, 9] } }); </script> </body>
效果:
除了基础数据之外,还支持json数组的绑定。比如:
<div id="app"> <ul> <li v-for="value in values">姓名:{{value.name}},年龄:{{value.age}}</li> </ul> </div> <script src="content/vue/dist/vue.js"></script> <script type="text/javascript"> //viewmodel var vue = new vue({ el: '#app', data: { values: [{ name: "小明", age: 20 }, { name: "小刚", age: 18 }, { name: "小红", age: 16 }] } }); </script>
效果:
在v-for里面,可以使用<template>
标签来渲染多个元素块,下面就基于bootstrap样式使用v-for、v-if、v-else等实现一个简单的demo。
<div id="app"> <nav> <ul class="pagination pagination-lg"> <template v-for="page in pages "> <li v-if="page==1" class="disabled"><a href="#">上一页</a></li> <li v-if="page==1" class="active"><a href="#">{{page}}</a></li> <li v-else><a href="#">{{page}}</a></li> <li v-if="page==pages"><a href="#">下一页</a></li> </template> </ul> </nav> </div> <script src="content/vue/dist/vue.js"></script> <script type="text/javascript"> //viewmodel var vue = new vue({ el: '#app', data: { pages: 10 } }); </script>
得到效果
是不是很easy!需要说明一点的是,pages是10,然后遍历它的时候,page的值会从1依次到10。
v-for指令除了支持数据对象的迭代以外,还支持普通json对象的迭代,比如:
<div id="app"> <ul> <li v-for="(value, key) in values"> {{ key }} : {{ value }} </li> <li v-for="(value, key, index) in values"> {{ index }}. {{ key }} : {{ value }} </li> </ul> </div> <script src="content/vue/dist/vue.js"></script> <script type="text/javascript"> //viewmodel var vue = new vue({ el: '#app', data: { values: { name: "小明", age: 20, school: "**高中" } } }); </script>
得到效果:
6、v-once指令
v-once表示只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。什么意思呢?还是来看demo说话:
<div id="app"> <h1>姓名:<label v-once v-text="name"></label></h1> <h1 v-once>年龄:{{ age }}</h1> <h1>学校:{{ school }}</h1> </div> <script src="content/vue/dist/vue.js"></script> <script type="text/javascript"> //model var data = { name: '小明', age: 18, school:'光明小学', } //viewmodel var vue = new vue({ el: '#app', data: data, }); </script>
效果动态图:
可以看出,只要使用v-once指令的,view和model之间除了初次渲染同步,之后便不再同步,而同一次绑定里面没使用v-once指令的还是会继续同步。
7、v-bind指令
对于html标签的text、value等属性,vue里面提供了v-text、v-model去绑定。但是对于除此之外的其他属性呢,这就要用到接下来要讲的v-bind指令了。博主的理解是v-bind的作用是绑定除了text、value之外的其他html标签属性,常见的比如class、style、自定义标签的自定义属性等。它的语法如下:
先来看几个简单的例子。
<head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <link href="content/bootstrap/css/bootstrap.css" rel="stylesheet" /> <style type="text/css"> class1 { padding:20px; } .backred { background-color:red; } </style> </head> <body> <div id="app"> <h1>姓名:<label v-text="name"></label></h1> <h1>是否红领巾:<span class="class1" v-bind:class="{backred:isback}"><label v-if="isback">是</label></span></h1> <h1>学校星级:<span v-bind:style="{color:schoollevel}">aa</span></h1> </div> <script src="content/vue/dist/vue.js"></script> <script type="text/javascript"> //model var data = { name: '小明', age: 18, school: '光明小学', schoollevel: 'red', isback:true } //viewmodel var vue = new vue({ el: '#app', data: data, }); </script> </body>
需要说明的是同一个标签里面的同一个属性,可以既有绑定的写法,也有静态的写法,组件会自动帮你合并,比如上文中的class属性。
得到效果如下:
关于自定义属性的绑定,打算在综合应用里面来说。
8、v-on指令
属性jquery的朋友应该很熟悉这个“on”,对于时间的监听和绑定,jquery里面最常用的就是on了。同样,在vue里面,v-on指令用来绑定标签的事件,其语法和v-bind基本类似。
这里的event可以是javascript里面的常用事件,也可以是自定义事件。
<div id="app"> <h1>姓名:<label v-text="name"></label></h1> <h1>年龄:{{ age }}</h1> <button class="btn btn-primary" v-on:click="age++;if(name=='小明')name='吉姆格林';else name='小明';">年龄递增</button> </div> <script src="content/vue/dist/vue.js"></script> <script type="text/javascript"> //model var data = { name: '小明', age: 18, } //viewmodel var vue = new vue({ el: '#app', data: data, }); </script>
这段代码是一个最简单的应用,直接在click事件里面执行逻辑,改变变量的值。效果如下:
除了直接在标签内写处理逻辑,还可以定义方法事件处理器。
<div id="app"> <h1>姓名:<label v-text="name"></label></h1> <h1>年龄:{{ age }}</h1> <button class="btn btn-primary" v-on:click="hello">hello</button> </div> <script src="content/vue/dist/vue.js"></script> <script type="text/javascript"> //model var data = { name: '小明', age: 18, } //viewmodel var vue = new vue({ el: '#app', data: data, methods: { hello: function (event) { // `this` 在方法里指当前 vue 实例 alert('hello ' + this.name + '!'); this.age++; } } }); </script>
结果应该不难猜。
9、实例一:30分钟搞定增删改查
有了我们的vue框架,关于行内编辑的增删改查,我们很简单即可实现,如果你熟的话应该还不用30分钟吧。代码如下:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <link href="content/bootstrap/css/bootstrap.css" rel="stylesheet" /> <style type="text/css"> table thead tr th { text-align:center; } </style> </head> <body> <div style="padding:20px;" id="app"> <div class="panel panel-primary"> <div class="panel-heading">用户管理</div> <table class="table table-bordered table-striped text-center"> <thead> <tr> <th>用户名</th> <th>年龄</th> <th>毕业学校</th> <th>备注</th> <th>操作</th> </tr> </thead> <tbody> <template v-for="row in rows "> <tr><td>{{row.name}}</td><td>{{row.age}}</td><td>{{row.school}}</td><td>{{row.remark}}</td> <td><a href="#" @click="edit(row)">编辑</a> <a href="#" @click="delete(row.id)">删除</a></td> </tr> </template> <tr> <td><input type="text" class="form-control" v-model="rowtemplate.name" /></td> <td><input type="text" class="form-control" v-model="rowtemplate.age" /></td> <td><select class="form-control" v-model="rowtemplate.school"> <option>中山小学</option> <option>复兴中学</option> <option>光明小学</option> </select></td> <td><input type="text" class="form-control" v-model="rowtemplate.remark" /></td> <td><button type="button" class="btn btn-primary" v-on:click="save">保存</button></td> </tr> </tbody> </table> </div> </div> <script src="content/jquery-1.9.1.min.js"></script> <script src="content/vue/dist/vue.js"></script> <script type="text/javascript"> //model var data = { rows: [ { id: 1, name: '小明', age: 18, school: '光明小学', remark: '三好学生' }, { id: 2, name: '小刚', age: 20, school: '复兴中学', remark: '优秀班*' }, { id: 3, name: '吉姆格林', age: 19, school: '光明小学', remark: '吉姆做了汽车公司经理' }, { id: 4, name: '李雷', age: 25, school: '复兴中学', remark: '不老实的家伙' }, { id: 5, name: '韩梅梅', age: 22, school: '光明小学', remark: '在一起' }, ], rowtemplate: { id: 0, name: '', age: '', school: '', remark: '' } }; //viewmodel var vue = new vue({ el: '#app', data: data, methods: { save: function (event) { if (this.rowtemplate.id == 0) { //设置当前新增行的id this.rowtemplate.id = this.rows.length + 1; this.rows.push(this.rowtemplate); } //还原模板 this.rowtemplate = { id: 0, name: '', age: '', school: '', remark: '' } }, delete: function (id) { //实际项目中参数操作肯定会涉及到id去后台删除,这里只是展示,先这么处理。 for (var i=0;i<this.rows.length;i++){ if (this.rows[i].id == id) { this.rows.splice(i, 1); break; } } }, edit: function (row) { this.rowtemplate = row; } } }); </script> </body> </html>
行内编辑效果如下:
10、实例二:带分页的表格
上面的例子用最简单的方式实现了一个增删改查,为了进一步体验我们vue的神奇,博主更进了一步,用vue去做了一个客户端分页的表格功能。其实代码量并不大。
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <link href="content/bootstrap/css/bootstrap.css" rel="stylesheet" /> <style type="text/css"> table thead tr th { text-align: center; } </style> </head> <body> <div style="padding:20px;" id="app"> <div class="panel panel-primary"> <div class="panel-heading">用户管理</div> <table class="table table-bordered table-striped text-center"> <thead> <tr> <th>用户名</th> <th>年龄</th> <th>毕业学校</th> <th>备注</th> </tr> </thead> <tbody> <template v-for="(row, index) in rows "> <tr v-if="index>=(curpage-1)*pagesize&&index<curpage*pagesize"> <td>{{row.name}}</td> <td>{{row.age}}</td> <td>{{row.school}}</td> <td>{{row.remark}}</td> </tr> </template> </tbody> </table> </div> <nav style="float:right;"> <ul class="pagination pagination-lg"> <template v-for="page in math.ceil(rows.length/pagesize)"> <li v-on:click="prepage()" id="prepage" v-if="page==1" class="disabled"><a href="#">上一页</a></li> <li v-if="page==1" class="active" v-on:click="numpage(page, $event)"><a href="#">{{page}}</a></li> <li v-else v-on:click="numpage(page, $event)"><a href="#">{{page}}</a></li> <li id="nextpage" v-on:click="nextpage()" v-if="page==math.ceil(rows.length/pagesize)"><a href="#">下一页</a></li> </template> </ul> </nav> </div> <script src="content/jquery-1.9.1.min.js"></script> <script src="content/vue/dist/vue.js"></script> <script type="text/javascript"> //model var data = { rows: [ { id: 1, name: '小明', age: 18, school: '光明小学', remark: '三好学生' }, { id: 2, name: '小刚', age: 20, school: '复兴中学', remark: '优秀班*' }, { id: 3, name: '吉姆格林', age: 19, school: '光明小学', remark: '吉姆做了汽车公司经理' }, { id: 4, name: '李雷', age: 25, school: '复兴中学', remark: '不老实的家伙' }, { id: 5, name: '韩梅梅', age: 22, school: '光明小学', remark: '在一起' }, ], pagesize: 2, curpage:1,//当前页的页码 }; //viewmodel var vue = new vue({ el: '#app', data: data, methods: { //上一页方法 prepage: function (event) { $(".pagination .active").prev().trigger("click"); }, //下一页方法 nextpage: function (event) { $(".pagination .active").next().trigger("click"); }, //点击页码的方法 numpage: function (num, event) { if (this.curpage == num) { return; } this.curpage = num; $(".pagination li").removeclass("active"); if (event.target.tagname.touppercase() == "li") { $(event.target).addclass("active"); } else { $(event.target).parent().addclass("active"); } if (this.curpage == 1) { $("#prepage").addclass("disabled"); } else { $("#prepage").removeclass("disabled"); } if (this.curpage == math.ceil(this.rows.length / this.pagesize)) { $("#nextpage").addclass("disabled"); } else { $("#nextpage").removeclass("disabled"); } } } }); </script> </body> </html>
来看看效果吧:
什么,数据少了不过瘾?那我们加一点数据试试呗。调整一下data变量,其他不用做任何变化。
var data = { rows: [ { id: 1, name: '小明', age: 18, school: '光明小学', remark: '三好学生' }, { id: 2, name: '小刚', age: 20, school: '复兴中学', remark: '优秀班*' }, { id: 3, name: '吉姆格林', age: 19, school: '光明小学', remark: '吉姆做了汽车公司经理' }, { id: 4, name: '李雷', age: 25, school: '复兴中学', remark: '不老实的家伙' }, { id: 5, name: '韩梅梅', age: 22, school: '光明小学', remark: '在一起' }, { id: 1, name: '小明', age: 18, school: '光明小学', remark: '三好学生' }, { id: 2, name: '小刚', age: 20, school: '复兴中学', remark: '优秀班*' }, { id: 3, name: '吉姆格林', age: 19, school: '光明小学', remark: '吉姆做了汽车公司经理' }, { id: 4, name: '李雷', age: 25, school: '复兴中学', remark: '不老实的家伙' }, { id: 5, name: '韩梅梅', age: 22, school: '光明小学', remark: '在一起' }, { id: 1, name: '小明', age: 18, school: '光明小学', remark: '三好学生' }, { id: 2, name: '小刚', age: 20, school: '复兴中学', remark: '优秀班*' }, { id: 3, name: '吉姆格林', age: 19, school: '光明小学', remark: '吉姆做了汽车公司经理' }, { id: 4, name: '李雷', age: 25, school: '复兴中学', remark: '不老实的家伙' }, { id: 5, name: '韩梅梅', age: 22, school: '光明小学', remark: '在一起' }, { id: 1, name: '小明', age: 18, school: '光明小学', remark: '三好学生' }, { id: 2, name: '小刚', age: 20, school: '复兴中学', remark: '优秀班*' }, { id: 3, name: '吉姆格林', age: 19, school: '光明小学', remark: '吉姆做了汽车公司经理' }, { id: 4, name: '李雷', age: 25, school: '复兴中学', remark: '不老实的家伙' }, { id: 5, name: '韩梅梅', age: 22, school: '光明小学', remark: '在一起' }, ], pagesize: 6, curpage:1,//当前页的页码 };
测试效果:
如果再进一步封装,是不是有点分页组件的概念了。简单吧!
五、总结
以上学习了下vue的一些常用指令,基本都是些比较常用的,等下篇有时间再来研究下它的一些高级功能。如果你也对它有兴趣,用起来试试吧!博主觉得它的文档还是挺全的。
本文已被整理到了《vue.js前端组件学习教程》,欢迎大家学习阅读。
关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 基于Vue.js实现简单搜索框
下一篇: 嘲东家诗