Vue+element+Nodejs学习记录（8）

向右看齐 2024-04-17 05:55 52阅读 0赞

**1.去掉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="/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);
      });

执行多个并发请求

参考文章：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