Vue - 起手式

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

时间： 2024-10-05 15:50:39

Vue - 起手式的相关文章

CSDN日报20170221——《离开了公司，你还有什么》

[程序人生] 离开了公司,你还有什么 作者:安晓辉 工作越久,好像越不敢想象没有工作的样子.你有这样的感觉吗? 我发现,自己已经深陷"工作–薪水–消费–工作–薪水–消费"这种循环而无法自拔了.我们的欲望阈值越来越高,我们的消费水平不断升级,我们越来越不能没有工作了.意识到这一点,让人不寒而栗. 于是,我开始琢磨,工作到底给了我什么呢?如果丢掉眼下这份工作,我还有什么? 点此阅读全文 [移动开发] 20个很棒的Android开源项目帮助你提升开发技能 作者:闫森 对程序员来说,最好的学习

Vue.js起手式+Vue小作品实战

本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑的代码以供练习和测试之用:在最后,我参考SegmentFault上的一篇技博,对Vue进行初入的实战,目的是将新鲜学到的知识立即派上用场:如果你还是前端的小白,相信这篇文章可能会对产生一些帮助和引起思想的碰撞,因为大家的学习历程是相似的,遇到的困惑也有一定的共通性,如果文章出现谬误之处,欢迎各位童鞋

深入使用Vue + TS

深入使用TS 支持 render jsx 写法 这里一共分两步 首先得先让 vue 支持 jsx 写法 再让 vue 中的 ts 支持 jsx 写法 让 vue 支持 jsx 按照官方做法,安装Babel 插件 安装依赖 npm install babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props babel-preset-es2015 --save-dev 在.babelr

Vue.js学习笔记：属性绑定 v-bind

v-bind  主要用于属性绑定,Vue官方提供了一个简写方式 :bind,例如: <!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a> 绑定HTML Class 一.对象语法: 我们可以给v-bind:class 一个对象,以动态地切换class.注意:v-bind:class指令可以与普通的class特

在浏览器上安装 Vue Devtools工具

Vue.js devtools是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展,可以在浏览器开发者工具下调试代码. 1)首先在github下载devtools源码,地址:https://github.com/vuejs/vue-devtools. 2)下载好后进入vue-devtools-master工程 执行cnpm install, 下载依赖,然后执行npm run build,编译源程序. 3)编译完成后,目录结构如下: 修改shells.chrome目录

vue.js 入门

简单一句话来描述:vue.js是一个前端框架. 官方文档:https://cn.vuejs.org/v2/guide/index.html 虽然,我以前也会改一些前端样式,但主要是基于HTML和CSS,HTML主要控制页面的结构,CSS主要来控制样式.涉及到JavaScript就比较小白了. 我花了一个下午照着官方文档做练习,当然是只创建一个xxx_demo.html文件,在<script></script> 标签对之间写 Vue.js语法.这不算错,但在工程化的今天,这么学得猴年

Vue.js系列之项目搭建（vue2.0 + vue-cli + webpack ）

1.安装node node.js环境(npm包管理器) cnpm npm的淘宝镜像 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了(傻瓜式安装).安装完成之后,打开命令行工具,输入 node -v,如果出现相应的版本号,则说明安装成功. npm包管理器,是集成在node中的,所以,直接输入 npm -v就会显示出npm的版本信息. 2.安装cnpm 在命令行中输入 npm install -g cnpm --registry=http://registr

Vue.js项目模板搭建

前言 从今年(2017年)年初起,我们团队开始引入「Vue.js」开发移动端的产品.作为团队的领头人,我的首要任务就是设计 整体的架构 .一个良好的架构必定是具备丰富的开发经验后才能搭建出来的.虽然我有多年的前端开发经验,但就「Vue.js」来说,仍然是个新手.所幸「Vue.js」有一个配套工具「Vue-CLI」,它提供了一些比较成熟的项目模板,很大程度上降低了上手的难度.然而,很多具体的问题还是要自己思考和解决的. 项目划分 我们公司的H5产品大部分是嵌套在手机客户端里面的页面.每个项目的功能

vue项目搭建

VUE项目搭建 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 安装依赖,走你 $ cd my-project $ npm install $ npm run dev