Vue+element+Nodejs学习记录(8)

1.去掉a标签的下划线




Hello App!

Go to Foo Go to Bar

除了使用创建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:






注意: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

你可能感兴趣的:(Vue,NodeJS,前端框架)