Vue还有事件处理、过渡动画、路由、开发插件等内容，目前，我不准备继续深入研究，
以事件为例，通常就是点击事件，如果是文本域，还需要Ctrl+S保存等功能，这都是一些使用频率较低的东西，如果遇到今后再补充吧。
尝试使用了ElementUI和IView，IView的封装组件更加好看些，但是Table标签的封装显得太过彻底，Table的生成全由Js代码决定，我不是很喜欢让所有的代码堆在Js中，我暂时还是选择了ElementUI。
使用的时候需要下载fonts包、css样式、UI框架的Js文件、Vue.js。
IView官网：https://www.iviewui.com/
ElementUI官网：http://element-cn.eleme.io/#/zh-CN
其它基于Vue的框架：https://www.cnblogs.com/tkzc2013/p/8127294.html
IView的使用
DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<style>
.ivu-table .demo-table-info-row td {
background-color: #2db7f5;
color: #fff;
}
.ivu-table .demo-table-error-row td {
background-color: #ff6600;
color: #fff;
}
style>
<link rel="stylesheet" type="text/css" href="res/iview.css">
<script type="text/javascript" src="res/vue.min.js">script>
<script type="text/javascript" src="res/iview.min.js">script>
<title>IView测试title>
head>
<body>
<div id="app">
<i-table :row-class-name="rowClassName" :columns="columns1" :data="data1">i-table>
div>
<script>
new Vue({
el: '#app',
data: {
columns1: [
{
title: 'Name',
key: 'name'
},
{
title: 'Age',
key: 'age'
},
{
title: 'Address',
key: 'address'
}
],
data1: [
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park',
date: '2016-10-03'
},
{
name: 'Jim Green',
age: 24,
address: 'London No. 1 Lake Park',
date: '2016-10-01'
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park',
date: '2016-10-02'
},
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park',
date: '2016-10-04'
}
]
},
methods: {
rowClassName: function (row, index) {
if (index === 1) {
return 'demo-table-info-row';
} else if (index === 3) {
return 'demo-table-error-row';
}
return '';
}
}
});
script>
body>
html>
ElementUI的使用
DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="res/index.css">
<script src="res/vue2.js">script>
<script src="res/index.js">script>
head>
<body>
<div id="app">
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
fixed
prop="date"
label="日期"
width="150">
el-table-column>
<el-table-column
prop="name"
label="姓名"
width="120">
el-table-column>
<el-table-column
prop="province"
label="省份"
width="120">
el-table-column>
<el-table-column
prop="city"
label="市区"
width="120">
el-table-column>
<el-table-column
prop="address"
label="地址"
width="300">
el-table-column>
<el-table-column
prop="zip"
label="邮编"
width="120">
el-table-column>
<el-table-column
fixed="right"
label="操作"
width="200">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">查看el-button>
<el-button type="text" size="small">编辑el-button>
<el-button @click.native.prevent="deleteRow(scope.$index, tableData)"
type="text" size="small">移除
el-button>
template>
el-table-column>
el-table>
div>
<script>
new Vue({
el: '#app',
data: {
tableData: [{
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}]
},
methods: {
handleClick: function (row) {
alert(row);
},
deleteRow: function (index, rows) {
rows.splice(index, 1);
}
}
});
script>
body>
html>