码迷，mamicode.com
首页 > 其他好文 > 详细

Vue - 起手式

时间：2017-02-21 20:56:36      阅读：237      评论：0      收藏：0      [点我收藏+]

标签：cimage   div   设计   补充   项目构建   简单   内容   str   set   

0x00：前言

这次前言不想扯太多。

本文主要是记录一下自己的学习历程，顺带做一个总结。

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

最后也是一个期盼，希望能够帮助到其他有需要的小伙伴。

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

0x01：Vue 基础介绍

以下部分内容参考于官方文档。

Vue.js 是什么
Vue.js（读音 /vju?/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

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

在这里，笔者和大家分享一句我以前打游戏时很喜欢说的话。

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

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

此外再去补充一下关于 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、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。入门容易上手难，大量避不开的概念也是很头疼的。

除此之外，在 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 有一定的危险存在，因为容易导致 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>用户名</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>用户名</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

Vue - 起手式

标签：cimage   div   设计   补充   项目构建   简单   内容   str   set   

原文地址：http://blog.csdn.net/mr_lp/article/details/55253676
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！