1.去掉a标签的下划线

<a style="text-decoration:none></a>

参考文章：https://jingyan.baidu.com/article/d5c4b52bfca27bda560dc5a8.html

2.Vue中data对象和函数形式

在一个普通的Vue app中，data是一个对象：

new Vue( { data : {title : 'abc'    }
} );

在Vue的Component（组件）中，data要写成一个function，并返回对象：

Vue.component( 'component-name', Vue.extend( {data : function() {     return {     title : 'abc'     };}
} ) );

参考文章：
https://zhidao.baidu.com/question/492933013944472252.html
https://blog.csdn.net/baizaozao/article/details/87805634
https://www.cnblogs.com/wuqilang/p/11245915.html

3.一行或多行文本溢出内容…显示

定义此属性有四个必要条件：
1）须有容器宽度：width：value；
2）强制文本在一行内显示：white-space：nowrap；
3）溢出内容隐藏：overflow：hidden；
4）溢出文本显示“…”：text-overflow：ellipsis；

text-overflow：clip（不显示省略标记）/ellipsis（文本溢出时“…”显示）

overflow（溢出属性）：
visible（默认值，不会被隐藏）
hidden（内容隐藏）
auto（如果内容隐藏，则浏览器内显示滚动条）
scroll（内容会隐藏并显示滚动条）
inherit（规定应该从父元素继承overflow属性的值）

white-space（空余空间属性，该属性用来设置如何处理元素内的空白；）:
normal/pre/nowrap/pre-wrap /pre-line /inherit
normal（默认值，空白会被浏览器忽略）
nowrap（文本不会换行，文本会在同一行上继续，直到遇到标签
为止）
pre（空白会被浏览器保留，其行为方式类似HTML中的pre标签）
pre-wrap（保留空白符序列，但是正常的进行换行）
pre-line（合并空白符序列，但是保留换行符）
inherit（规定应该从父元素继承White-space属性的值(ie浏览器不支持此属性值)）

示例demo：

.wrapper span{width: 220px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}

4.路由跳转

这种只需要跳转页面，不需要添加验证方法的情况，可以使用<router-link>来实现导航的功能：

//router-link常和router-view一起使用
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script><div id="app"><h1>Hello App!</h1><p><!-- 使用 router-link 组件来导航. --><!-- 通过传入 `to` 属性指定链接. --><!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --><router-link to="/foo">Go to Foo</router-link><router-link to="/bar">Go to Bar</router-link></p><!-- 路由出口 --><!-- 路由匹配到的组件将渲染在这里 --><router-view></router-view>
</div>

除了使用<router-link>创建a标签来定义导航链接，我们还可以借助router的实例方法，通过编写代码来实现。

想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

methods:{login(){this.$router.push({path:'/login'})},register(){this.$router.push({path:'/register'})}
}

参考文章：
https://blog.csdn.net/qq_33867131/article/details/81264206
https://segmentfault.com/q/1010000010041747

5.Vue中table数据导出成excel

示例demo：

<template><div class="excelOut"><div class="content"><el-card><div class="title" slot="header"><span>导出表格</span></div><div class="out"><el-inputtype="text"v-model="filename"placeholder="输入导出的文件名称"clearableclass="wid300"></el-input><el-button type="primary" @click="excelDow" class="btnStyle1">导出</el-button></div><el-table:data="tabList"borderstripestyle="width: 100%;margin-top: 30px;"><el-table-column prop="id" label="序号" width="80"> </el-table-column><el-table-column prop="date" label="出生日期"> </el-table-column><el-table-column prop="name" label="姓名"> </el-table-column><el-table-column prop="sex" label="性别"> </el-table-column><el-table-column prop="position" label="职业"> </el-table-column><el-table-column prop="address" label="地址"> </el-table-column></el-table></el-card></div></div>
</template><script>
export default {name:"down",data() {return {tabList: [{id: 1,date: '1992-05-02',name: '王小虎',sex: '男',position: '医生',address: '上海市普陀区金沙江路 1518 弄'},{id: 2,date: '1999-05-04',name: '小明',sex: '男',position: '老师',address: '北京市朝阳区'},{id: 3,date: '1980-05-01',name: '小敏',sex: '女',position: '护士',address: '上海市浦东区 1519 弄'},{id: 4,date: '2016-05-03',name: '小黑',sex: '男',position: '学者',address: '上海市普陀区金沙江路 1516 弄'},{id: 5,date: '2016-05-03',name: '小虎',sex: '男',position: '运动员',address: '上海市普陀区金沙江路 1516 弄'}],autoWidth: true,bookType: 'xlsx',filename: ''}},methods: {excelDow() {import('@/vendor/Export2Excel.js').then(moudle => {const tHeader = ['序号', '日期', '姓名', '性别', '职业', '地址']const filterVal = ['id', 'date', 'name', 'sex', 'position', 'address']const list = this.tabListconst data = this.formatJson(filterVal, list)moudle.export_json_to_excel({header: tHeader,data,filename: this.filename === '' ? 'filename' : this.filename,autoWidth: this.autoWidth,bookType: this.bookType})})},formatJson(filterVal, jsonData) {return jsonData.map(v => filterVal.map(j => v[j]))}}
}
</script><style type="text/css" scoped>.excelOut{margin-top: 30px;width: 100%;font-size: 18px;}.content{width: 94%;margin: 0 auto;}.title{float: right;margin-right: 300px;}.wid300{float: left;width: 200px;margin-left: 1000px;}.btnStyle1{float: right;margin-right: 100px;}
</style>

注意：vendor下Export2Excel.js的引入

参考文章：
https://github.com/gcddblue/vue-admin-webapp/blob/master/src/views/excel-operate/excel-out.vue
另外一个实现导出Excel的示例demo：https://www.cnblogs.com/tugenhua0707/p/8597050.html

6.Vue中使用echarts及动态更新数据

参考文章：
https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/chart.html#demo
https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/dashboard/admin/components/LineChart.vue
https://github.com/gcddblue/vue-admin-webapp/blob/master/src/views/echarts/slide-chart.vue

主要学习他们代码的规范（放置的位置）和使用watch动态更新数据。

7.axios中get和post请求参数的传递

执行 GET 请求

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345').then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});// 上面的请求也可以这样做
axios.get('/user', {params: {ID: 12345}}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});

执行 POST 请求

axios.post('/user', {firstName: 'Fred',lastName: 'Flintstone'}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});

执行多个并发请求

function getUserAccount() {return axios.get('/user/12345');
}function getUserPermissions() {return axios.get('/user/12345/permissions');
}axios.all([getUserAccount(), getUserPermissions()]).then(axios.spread(function (acct, perms) {// 两个请求现在都执行完成}));

参考文章：http://www.axios-js.com/zh-cn/docs/

8.

参考文章：
https://www.cnblogs.com/liufuyuan/p/10210879.html
https://www.cnblogs.com/layaling/p/9524047.html
https://www.cnblogs.com/zhangqie/p/6733808.html
https://www.baidu.com/s?tn=02003390_43_hao_pg&isource=infinity&iname=baidu&itype=web&ie=utf-8&wd=node_modules%2F_element-ui%402.11.1%40element-ui%2Flib%2Ftheme-chalk%2Findex.css