Vue - 起手式

时间  2019-11-10
标签 vue 手式 繁體版
原文   原文链接

0x00：前言

此次前言不想扯太多。javascript

本文主要是记录一下本身的学习历程，顺带作一个总结。css

当中有參考 Vue.js 的中文文档,也有去查看其它大大们给出的总结。html

最后也是一个期盼，但愿可以帮助到其它有需要的小伙伴。前端

补充：
第一次自学的话，推荐直接去查看下面内容。
* Vue.js API(英文)
* Vue.js API(中文)
* Vue.js 开源站点vue

0x01：Vue 基础介绍

下面部份内容參考于官方文档。java

Vue.js 是什么
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其它重量级框架不一样的是，Vue 採用自底向上增量开发的设计。node

Vue 的核心库仅仅关注视图层，并且很是easy学习，很是easy与其它库或已有项目整合。jquery

还有一方面。Vue 全然有能力驱动採用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。
Vue.js 的目标是经过尽量简单的 API 实现响应的数据绑定和组合的视图组件。webpack

至于很是多小伙伴。对因而否要选择 Vue 可能存在一些顾虑。或者说可能会认为 Vue 不值得去学习。git

在这里，笔者和你们分享一句我曾经打游戏时很是喜欢说的话。

没有垃圾的英雄，仅仅有菜比的玩家

每一个框架的存在都是有其特定意义的，仅仅是在不一样的使用场景，才会有适不适合之分。

此外再去补充一下关于 SegmentFault 在 2016 年 8 月给出的 Vue 的增加趋势。

由此也能看出来。Vue 的将来前景怎样。

说了这么多，也该书归正文，一块儿来看一下，假设咱们要学习 Vue。该作哪些准备？

0x02：Vue 和其它 MVVM 框架的对照

首先在開始学习 Vue 以前，咱们首先需要了解一下，Vue 和其它框架有什么不一样？

这里请赞成我直接引用一下懒得安分大神的话术。

关于MVVM，原来在介绍knockout.js的时候有过解说，眼下市面上比較火的MVVM框架也是一抓一大把，比方常见的有Knockout.js、Vue.js、AvalonJS、Angularjs等，每一款都有它们本身的优点。
* Knockout：微软出品，可以说是MVVM的模型领域内的先驱，使用函数偷龙转凤。最短编辑长度算法实现DOM的同步。兼容IE6。实现高超，但源代码极其难读，近期几年发展缓慢。
* Vue：是近期几年出来的一个开源Javascript框架。语法精简。实现精致，但对浏览器的支持受限，最低仅仅能支持IE9。
* AvalonJS：是一个简单易用迷你的MVVM框架，由大神司徒正美研发。使用简单，实现明快。
* React：React并不属于MVVM架构，但是它带来virtual dom的革命性概念，受限于视图的规模。


* Angularjs：Google出品，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、本身主动化双向数据绑定、语义化标签、依赖注入等等。入门easy上手难。大量避不开的概念也是很是头疼的。

除此以外。在 Vue 的官网上也提供了和其它框架的对照。

Vue ： 对照其它框架

0x03：什么是 MVVM?

MVVM是Model-View-ViewModel的简写。


MVVM（Model-View-ViewModel）框架的由来即是MVP（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。它立足于原有MVP框架并且把WPF的新特性糅合进去。以应对客户日益复杂的需求变化。

—-《百度百科》

除此之外。咱们还可以经过这张图来看一下 MVVM。

这张图足以说明MVVM的核心功能。在这三者里面，ViewModel无疑起着重要的桥梁做用。

一方面，经过ViewModel将Model的数据绑定到View的Dom元素上面，当Model里面的数据发生变化的时候。经过ViewModel里面数据绑定的机制。触发View里面Dom元素的变化。

还有一方面，又经过ViewModel来监听View里面的Dom元素的数据变化，当页面上面的Dom元素发生变化的时候，ViewModel经过Dom树的监听机制，触发相应的Model的数据变化。

固然在Vue.js里面ViewModel也是核心部件，它就是一个Vue实例。这个实例做用于单个或者多个html元素，从而实现Dom树监听和数据绑定的双向更新操做。

0x04：Vue 的引入

关于 Vue 的引入，首先要明白一点。

Vue.js 不支持 IE8 及其下面版本号，因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。 Vue.js 支持所有兼容 ECMAScript 5 的浏览器。

除此以外，咱们固然也可以去下载 Vue 的源代码。

最后，咱们在选择安装方式的时候，要注意vue-cli。对 Node.js 不够熟悉的同窗不推荐使用。

这里附录一下。关于 vue-cli 的路径说明。

.
|-- build                            // 项目构建(webpack)相关代码
|   |-- build.js                     // 生产环境构建代码
|   |-- check-version.js             // 检查node、npm等版本号
|   |-- dev-client.js                // 热重载相关
|   |-- dev-server.js                // 构建本地服务器
|   |-- utils.js                     // 构建工具相关
|   |-- webpack.base.conf.js         // webpack基础配置
|   |-- webpack.dev.conf.js          // webpack开发环境配置
|   |-- webpack.prod.conf.js         // webpack生产环境配置
|-- config                           // 项目开发环境配置
|   |-- dev.env.js                   // 开发环境变量
|   |-- index.js                     // 项目一些配置变量
|   |-- prod.env.js                  // 生产环境变量
|   |-- test.env.js                  // 測试环境变量
|-- src                              // 源代码文件夹
|   |-- components                   // vue公共组件
|   |-- store                        // vuex的状态管理
|   |-- App.vue                      // 页面入口文件
|   |-- main.js                      // 程序入口文件。载入各类公共组件
|-- static                           // 静态文件，比方一些图片，json数据等
|   |-- data                         // 群聊分析获得的数据用于数据可视化
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 定义代码格式
|-- .gitignore                       // git上传需要忽略的文件格式
|-- README.md                        // 项目说明
|-- favicon.ico 
|-- index.html                       // 入口页面
|-- package.json                     // 项目基本信息

这里我们直接去使用一下官方推荐的基础引入方法。

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

0x05：Vue 的声明式渲染

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <!--引入 Vue--> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="div"> {{message}} </div> </body> <script type="text/javascript" charset="utf-8"> var app = new Vue({ //注意这里。需要填写的是相应的选择器 el:"#div", data: { message:"hello vue!" } }) </script> </html>

当中使用到了两个需要注意的内容。

  • el :
    • 提供一个在页面上已存在的 DOM 元素做为 Vue 实例的挂载目标。
    • 事实上说白了就是需要绑定的 DOM 元素。
  • data ：
    • Vue 实例的数据对象。

    • 大概来讲。data 应该仅仅能是数据 - 不推荐观察拥有状态行为的对象。

这是官方给出的基本案例，咱们在这个案例之上，去重新书写一个新的案例。

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <!--引入 Vue--> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h1>姓名：{{ Name }}</h1> <h1>年龄：{{ Age }}</h1> <h1>性别：{{ Sex }}</h1> </div> </body> <script type="text/javascript" charset="utf-8"> //Model var data = { Name: '李先生', Age: 18, Sex:'男人', } //ViewModel var vue = new Vue({ el: '#app', data: data, }); </script> </html>

用 MVVM 的角度，来重新看待这个问题，咱们会发现。

  • Model就是data变量
  • ViewModel就是这里的new Vue()获得的对象

需要注意，咱们在上方所使用的 {{message}} 是 Vue 中数据绑定最多见的形式。

也就是去使用 “Mustache” 语法（双大括号）来在文本中插入值。

Mustache 标签将会被替代为相应数据对象上 msg 属性的值。无论什么时候，绑定的数据对象上 msg 属性发生了改变。插值处的内容都会更新。

但是请注意，它所说的是绑定的数据对象的属性发生改变才会更新。

0x06：处理用户输入

Vue 提供了 v-model 指令，它使得在表单输入和应用状态中作双向数据绑定变得很是轻巧。

你可以用 v-model 指令在表单控件元素上建立双向数据绑定。
它会依据控件类型本身主动选取正确的方法来更新元素。


虽然有些奇妙，但 v-model 本质上只是是语法糖。它负责监听用户的输入事件以更新数据，并特别处理一些极端的样例。

首先来看一个样例。

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <input v-model="message" placeholder="edit me"> <p>{{ message }}</p> </div> </body> <script type="text/javascript" charset="utf-8"> var app = new Vue({ el: '#app', data: { message: '測试文本' } }) </script> </html>

咱们会发现。一旦咱们输入某些内容，咱们相应标签页会实时更新，这样的方式咱们通常称之为双向绑定。

除此以外，咱们还可以针对像 textarea 等内容进行数据的绑定。

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <span>Multiline message is:</span> <p style="white-space: pre">{{ message }}</p> <br> <textarea v-model="message" placeholder="add multiple lines" style="resize: none;"></textarea> </div> </body> <script type="text/javascript" charset="utf-8"> var app = new Vue({ el: '#app', data: { message: ' ' } }) </script> </html>

同一时候需要注意，在文本区域插值<textarea></textarea>并不会生效，应用 v-model 来取代。

不少其它内容请參照。表单数据绑定。

0x07：Vue 常用指令

下面内容。我就直接转载 懒得安分大神的文章，并对其内容做了更改。

Vue里面为咱们提供的常用指令主要有下面一些。

每一个指令都可以连接到相关文档，博主认为文档里面每种指令的语法写得很是具体，在此就不是必需反复作说明了，下面博主打算将一些常用的指令以分组的形式分别结合demo来进行解释说明。

0x08：v-text、v-html指令

v-text、v-html这二者分为一组很是好理解。一个用于绑定文本。一个用于绑定html。

上文使用到的 {{ Name }}这样的写法就是v-text的的缩写形式。这个很是简单，没什么好纠结的，看一个Demo就能明白。

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <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> </body> <script type="text/javascript" charset="utf-8"> //Model var data = { Name: '李先生', Age: "<label>20</label>", School:'大连某校', } //ViewModel var vue = new Vue({ el: '#app', data: data, }); </script> </html>

代码说明：
* {{Name}}这样的写法和v-text的做用是相同的，用于绑定标签的text属性。注意假设标签没有text属性，该绑定会失效，比方你在一个文本框上面使用v-text是没有效果的
* 由获得的效果可以看出，v-html绑定后会覆盖原来标签里面的内容（比方上面的“年龄：”），记住此处是覆盖而非append。
* 对于v-html应用的时候要谨慎。在站点上动态渲染随意 HTML 有必定的危急存在，因为easy致使 XSS 跨站脚本攻击。

因此最好是在信任的网址上面使用。
* 注意v-text和v-html绑定都是单向的，仅仅能从Model到View的绑定，不能实现View到Model的更新。

0x09：v-model指令

v-model上面有介绍它的双向绑定功能。对于v-model指令。vue限定仅仅能对表单控件进行绑定。常见的有<input>、<select>、<textarea>等。

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <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> </body> <script type="text/javascript" charset="utf-8"> //Model var data = { Name: '李先生', Age: 18, School: '光明小学', Hobby: [], Remark: '三好学生', Huji:"" } //ViewModel var vue = new Vue({ el: '#app', data: data, }); </script> </html>

关于selece的数据源的动态绑定，咱们留在v-for指令的时候介绍。

0x10：v-if、v-else指令

v-if和v-else是一对离不开的好兄弟，使用条件运算符推断时常用。

需要说明的是，v-if可以单独使用，但是v-else的前面必需要有一个v-if的条件或者v-show指令（后面介绍）。这个和咱们编程的原理是同样同样的。

它们做为条件渲染指令，他们的基础语法例如如下：

v-if="expression",v-else;

注意这里的v-else可以不写，expression表达式是一个返回bool类型的属性或者表达式。

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <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> </body> <script type="text/javascript" charset="utf-8"> //Model var data = { Name: '李先生', IsMarry: true, Age: 20, School:'大连某校', } //ViewModel var vue = new Vue({ el: '#app', data: data, }); </script> </html>

0x11：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标签。

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h1>姓名：<label v-text="Name"></label></h1> <h1>是否已婚：<span v-show="IsMarry">是</span></h1> <h1>学校：{{ School }}</h1> </div> </body> <script type="text/javascript" charset="utf-8"> //Model var data = { Name: '李先生', IsMarry: false, Age: 20, School:'大连某校', } //ViewModel var vue = new Vue({ el: '#app', data: data, }); </script> </html>

0x12：v-for指令

v-for 指令需要以 item in items 形式的特殊语法。

常用来绑定数据对象。

最简单的样例：

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <ul> <li v-for="value in nums">{{value}}</li> </ul> </div> </body> <script type="text/javascript" charset="utf-8"> //ViewModel var vue = new Vue({ el: '#app', data: { nums: [1, 2, 3, 4, 5, 6, 7, 8, 9] } }); </script> </html>

除了基础数据以外。还支持Json数组的绑定。比方：

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <ul> <li v-for="value in values">姓名：{{value.Name}}。年龄：{{value.Age}}</li> </ul> </div> </body> <script type="text/javascript" charset="utf-8"> //ViewModel var vue = new Vue({ el: '#app', data: { values: [{ Name: "李先生", Age: 20 }, { Name: "小刚", Age: 18 }, { Name: "小红", Age: 16 }] } }); </script> </html>

0x13：v-once指令

v-once表示仅仅渲染元素和组件一次。

随后的又一次渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。什么意思呢？仍是来看demo说话：

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h1>姓名：<label v-once v-text="Name"></label></h1> <h1 v-once>年龄：{{ Age }}</h1> <h1>学校：{{ School }}</h1> </div> </body> <script type="text/javascript" charset="utf-8"> //Model var data = { Name: '李先生', Age: 18, School:'光明小学', } //ViewModel var vue = new Vue({ el: '#app', data: data, }); </script> </html>

可以看出。仅仅要使用v-once指令的，View和Model之间除了初次渲染同步，以后便再也不同步，而同一次绑定里面没使用v-once指令的仍是会继续同步。

0x14：v-bind指令

对于html标签的text、value等属性，Vue里面提供了v-text、v-model去绑定。但是对于除此以外的其它属性呢。这就要用到接下来要讲的v-bind指令了。博主的理解是v-bind的做用是绑定除了text、value以外的其它html标签属性。常见的比方class、style、本身定义标签的本身定义属性等。

它的语法例如如下：

v-bind:property="expression"

先来看几个简单的样例。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</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>
</body>
<script type="text/javascript" charset="utf-8"> //Model var data = { Name: '李先生', Age: 18, School: '光明小学', SchoolLevel: 'red', IsBack:true } //ViewModel var vue = new Vue({ el: '#app', data: data, }); </script>
</html>

需要说明的是同一个标签里面的同一个属性。可以既有绑定的写法，也有静态的写法，组件会本身主动帮你合并。比方上文中的class属性。

获得效果例如如下：

0x15：v-on指令

属性jquery的朋友应该很是熟悉这个“on”，对于时间的监听和绑定。jquery里面最常用的就是on了。相同，在Vue里面。v-on指令用来绑定标签的事件。其语法和v-bind基本类似。

v-on:event="expression";

这里的event可以是Javascript里面的常用事件，也可以是本身定义事件。

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <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> </body> <script type="text/javascript" charset="utf-8"> //Model var data = { Name: '李先生', Age: 18, } //ViewModel var vue = new Vue({ el: '#app', data: data, }); </script> </html>

这段代码是一个最简单的应用。直接在click事件里面运行逻辑。改变变量的值。效果例如如下：

除了直接在标签内写处理逻辑，还可以定义方法事件处理器。

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <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> </body> <script type="text/javascript" charset="utf-8"> //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> </html>

0x16：实例一：30分钟搞定增删改查

在编写这个实例以前，首先先说明一下当前文档中需要引入的库。

实现效果：

案例源代码：

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <link href="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>username</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> </body> <script src="JQuery/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script type="text/javascript" charset="utf-8"> //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> </html>

0x17：实例二：带分页的表格

上面的样例用最简单的方式实现了一个增删改查，为了进一步体验咱们Vue的奇妙，博主更进了一步。用Vue去作了一个客户端分页的表格功能。

事实上代码量并不大。

实现效果：

这里作出一下改动，參照于原帖中某位读者的留言，给出一种更优的解决方式。

案例代码：

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <link href="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>username</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"> <li v-if="curpage==1" class="disabled"><a href="#">上一页</a></li> <li v-else v-on:click="PrePage()" ><a href="#">上一页</a></li> <template v-for="page in pageCount"> <li v-if="page==curpage" 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> </template> <li v-if="curpage==pageCount" class="disabled"><a href="#">下一页</a></li> <li v-else v-on:click="NextPage()" ><a href="#">下一页</a></li> </ul> </nav> </div> </body> <script src="JQuery/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script type="text/javascript" charset="utf-8"> //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: '在一块儿' }, { 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,//当前页的页码 }; //ViewModel var vue = new Vue({ el: '#app', data: data, created:function(){ this.pageCount = Math.ceil(this.rows.length/this.pagesize); }, methods: { //上一页方法 PrePage: function (event) { if (this.curpage>1) { this.curpage = this.curpage-1; } }, //下一页方法 NextPage: function (event) { if (this.curpage < this.pageCount) { this.curpage = this.curpage+1; } }, //点击页码的方法 NumPage: function (num, event) { if (this.curpage == num) { return; } this.curpage = num; } } }); </script> </html>

0x18：后记

本文主体參考于 懒得安分 大神 的 文章。
JS组件系列——又一款MVVM组件：Vue（一：30分钟搞定前端增删改查）

除此以外，还有部份内容是摘抄于 Vue 的官网。

本文仅作我的学习记录之用。请勿随意转载。

若需转载请私信，并在文章開始位置放上做者和原文连接。

谢谢。

李鹏 2017年02月16日11:32:21

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程