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-input
type="text"
v-model="filename"
placeholder="輸入導出的文件名稱"
clearable
class="wid300"
>
</el-input>
<el-button type="primary" @click="excelDow" class="btnStyle1">
導出
</el-button>
</div>
<el-table
:data="tabList"
border
stripe
style="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.tabList
const 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