Vue+element+Nodejs學習記錄（8）

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