Vue - 起手式
0x00：前言
这次前言不想扯太多。
本文主要是记录一下自己的学习历程，顺带做一个总结。
当中有參考 Vue.js 的中文文档,也有去查看其它大大们给出的总结。
最后也是一个期盼，希望能够帮助到其它有须要的小伙伴。
补充：
第一次自学的话，推荐直接去查看下面内容。
* Vue.js API(英文)
* Vue.js API(中文)
* Vue.js 开源站点
0x01：Vue 基础介绍
下面部分内容參考于官方文档。
Vue.js 是什么
Vue.js（读音 /vjuː/, 相似于 view） 是一套构建用户界面的 渐进式框架。与其它重量级框架不同的是，Vue 採用自底向上增量开发的设计。Vue 的核心库仅仅关注视图层，而且非常easy学习，非常easy与其它库或已有项目整合。
还有一方面。Vue 全然有能力驱动採用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
至于非常多小伙伴。对于是否要选择 Vue 可能存在一些顾虑。或者说可能会认为 Vue 不值得去学习。
在这里，笔者和大家分享一句我曾经打游戏时非常喜欢说的话。
没有垃圾的英雄，仅仅有菜比的玩家
每个框架的存在都是有其特定意义的，仅仅是在不同的使用场景，才会有适不适合之分。
此外再去补充一下关于 SegmentFault 在 2016 年 8 月给出的 Vue 的增长趋势。
imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" title="">
由此也能看出来。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。
imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" title="">
这张图足以说明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>
imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" title="">
代码说明：
* {{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>
imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" title="">
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>
imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" title="">
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>
imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" title="">
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去做了一个客户端分页的表格功能。
事实上代码量并不大。
实现效果：
imageMogr2/auto-orient/strip" alt="" title="">
这里做出一下改动，參照于原帖中某位读者的留言，给出一种更优的解决方式。
案例代码：
<!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
Vue - 起手式的更多相关文章
- vue起手式
主要步骤 安装node 安装npm 安装vue-cli(vue命令行工具) 初始化一个vue项目 进行开发 # 安装node # 安装npm # 安装cnpm,在中国大陆防止被墙 # 安装git # ...
- Vue 单页应用：记事本
若文章中存在内容无法加载的情况,请移步作者其他博客. 简书 CSDN 最近在看 Vue 的时候,别人给我安利了一个国外的小案例,通过 Vue 和 Vuex 来实现一个记事本. 仔细剖析下,发现“麻雀虽 ...
- vue + typescript 项目起手式
https://segmentfault.com/a/1190000011744210 2017-10-27 发布 vue + typescript 项目起手式 javascript vue.js t ...
- Vue.js起手式+Vue小作品实战
本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...
- vue 的 起手式
代码: vue.js // vue 起手势 (function(root,factory) { root.Vue = factory(); })(this,function(){ // 设置基础的默认 ...
- vue : 项目起手式 - router组件通用模板
每次新建文件都要找来找去,麻烦,干脆贴到这里好了. <template> <div id="page"> </div> </templat ...
- 微信小程序学习笔记以及VUE比较
之前只是注册了一下微信小程序AppID,随便玩了玩HelloWorld!(项目起手式),但是最近看微信小程序/小游戏,崛起之势不可阻挡.小程序我来了!(果然,一入前端深似海啊啊啊啊啊~) 编辑器: S ...
- vue与TypeScript集成配置最简教程
https://blog.csdn.net/u014633852/article/details/73706459 https://segmentfault.com/a/119000001187808 ...
- Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记
前言 本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript ...
随机推荐
- 泛泰A860（高通8064 cpu 1080p） 刷4.4专用中文recovery TWRP2.7.1.2版（三版通刷）
欢迎关注泛泰非盈利专业第三方开发团队 VegaDevTeam (本team 由 syhost suky zhaochengw(z大) xuefy(大星星) tenfar(R大师) loogeo cr ...
- SQL：显示每天的小计，某一天没有记录也要显示
对于这种需求,我们需要一个主表存储连续的日期,然后使用 left join 即可. declare @Daily table ( 日期 date ) declare @start date = '20 ...
- [shiro学习笔记]第四节 使用源码生成Shiro的CHM格式的API文档
版本号为1.2.3的shiro API chm个事故文档生成. 获取shiro源码 编译生成API文档 转换成chm格式 API 获取shiro源码 shiro官网: http://shiro.apa ...
- MySQL递归查询树状表的子节点、父节点具体实现
mysql版本(5.5.6等等)尚未支持循环递归查询,和sqlserver.oracle相比,mysql难于在树状表中层层遍历的子节点.本程序重点参考了下面的资料,写了两个sql存储过程,子节点查询算 ...
- 关于mysql中information_schema.tables
项目中出现这样一个SQL语句,现记录如下: @Select("select table_name tableName, engine, table_comment tableComment, ...
- 我们为什么不用 MVC 拦截器
一:MVC 中的拦截器 众所周知,MVC 存在如下几个主要的拦截器:IActionFilter.IExceptionFilter.IResultFilter.IAuthorizationFilter, ...
- Unicode 和 UTF-8 的区别
作者:于洋链接:https://www.zhihu.com/question/23374078/answer/69732605来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出 ...
- Java 线程与锁
Synchronization synchronized语法可以获取锁, 当其他线程持有锁的时候该线程想要获取锁将会进入等待状态, 直到没有其他线程持有该锁 显示使用 synchronized (lo ...
- Pitch,Yaw,Roll的概念
在航空中,pitch, yaw, roll下图所示. pitch是围绕X轴旋转,也叫做俯仰角. yaw是围绕Y轴旋转,也叫偏航角. roll是围绕Z轴旋转,也叫翻滚角. 在3D系统中,假设视点 ...
- go语言之进阶篇定时器Timer的使用
1.Timer的使用 示例: #创建一个定时器,设置时间为2s,2s后,往time通道写内容(当前时间) package main import ( "fmt" "tim ...