本周帮助公司进行后台项目的前端改造,之前采用的是后端模板渲染页面的方式。该方式的优点是后端工程师开发简便,易于上手,前端开发成本低。但他同时也有着不小的局限,比如前后端无法分离,无法实现页面的局部刷新,无法进行对数据进行双向绑定等,所以本周我接下了这个有趣又有挑战的新任务。

之前的工作经历中有一段的前端开发经验,所以本次开发开始前没有太多的抵触心理,按套路先打开vue.js的文档,简单的通读一下便开始上手了。

下面附上官网链接

https://cn.vuejs.org/v2/guide/index.html

第一步,引入Vue。

官网提供了引入Vue的很多种方式,比如现在比较流行的npm包管理,webpack等,我这里因为是只做vue的使用所以,简单粗暴的使用了<script>的标签引入方式。 这个版本包含了Vue的报错与提示 。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

线上版本推荐使用Vue.min,这个版本更小,但是没有包含报错信息。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>

引入js文件之后,我们就可以投入到vue.js的开发了。 根据官网的指引首先进行vue的声明,也就是实例化。

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
<div id="app">
  {{ message }}
</div>

这里根据官网的教程message将被渲染为Hello Vue

不得不说,经过了几年的发展Vue的文档已经非常详细,并且配备了入门的视频。在这里我就不罗嗦Vue的使用了,简单说一下我看到对新手来说比较有价值的东西。

上图是Vue的完整生命周期,其中最常使用的就是mounted和updated,一般情况下mounted将执行我们为页面准备好的方法,而updated中将数据更新时执行方法。

<div id ="app"> 绑定app实例
    <div id ="page"> 绑定page实例
    ...
    </div>
</div>

在使用过程中,不免遇到一些问题,其中Vue的实例嵌套困扰了我很长一段实践。Vue中是不允许嵌套实例的,如上端代码的写法将引起报错,导致数据无法正常的显示,所以请避免上述写法。

<div id = "app">
<table>
   <div v-for="row in rows">
       <tr>
           <td>...</td>
       </tr>
   </div>
</table>
</div>

此外,在<table>标签使用<div>标签进行v-for循环同样也会遇到问题,这里推荐大家直接在<tr>标签上进行循环或者根据官网文档使用<template>标签进行代替,在渲染过程中<template>标签将不会被展示,只做v-for的逻辑使用。

下一个我使用的功能是通过vue发送ajax请求,这里vue自己是无法完成的,你可以使用 vue-resource 来完成或者使用 axios来完成,推荐大家使用axios ,因为 vue-resource 在vue升级2.0之后就放弃维护了。

Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中。

Github开源地址: https://github.com/axios/axios

通过下方代码,你就可以完成ajax的请求啦。

new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .post('https://www.baidu.com/')
      .then(response => (this.info = response))
      .catch(function (error) { // 请求失败处理
        console.log(error);
      });
  }
})

Vu最后一个我用到的功能是获取路由的参数,这里我使用的是Vue Router这一组件,这一组件除了可以获取路由参数还有更强大的路由功能。

官网地址:https://router.vuejs.org/zh/

//定义router
const routes = [{path:'/'}]
const router = new VueRouter({
    mode: 'history',
    routes
})
--------------------------------

//参数获取
params =  this.$route.query.params 

基本上,使用以上组建,就能满足简单的开发需求,当然,除了这些以外,在单页面应用上vue也是相当强大的,以上就是我3天以来的使用感受和收获,如果你也对vue感兴趣,不妨来试试吧。


0 条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注