那些年，我们踩过的坑---vuejs对接后端

        一句话概括vue，小巧而不失优雅。如果说你在的公司用vue开发，在对接后端接口时，没有前端人员给你对接口，需要你自己来写js进行对接，那么是不是有很多人也和博主一样苦恼呢？

        会vue的人当然会觉得，对个接口有什么 ？很简单嘛，然而对于一个做后端写接口的程序猿来说，那就很有问题，如果说这个程序猿以前不知道vue这个使用，那么问题就更大了。好了，开始说重点。

        （一）首先看一下vue中的参数

<script>

export default {

  name: 'demo',

  data () {

      return{

         name:'demo',

         password:'demo123456',

         }

      }

    }

  },

  methods: {

    checkForm(){

       }

    },

mounted(){

  },

beforeMount(){

   }

}

</script>

从上面可以看出来vue中写的一些基本的内容。下面来一一介绍一下：

首先可以看到上面中的data里面我写了两个参数：一个是name，一个是password。这两个数据是表单数据绑定的，在标签页中用v-model进行绑定。

这样就可以实现数据绑定了，然后可以看到有methods，这个里面主要是写一些方法的，一般对接接口就在这里面进行写代码，

beforeMount这里面主要是声明方法的什么，在这个页面加载前对初试化这里面的内容，一般会在路由的时候接受参数，mounted这个里面和beforeMount里面的差不多，不过这里面的方法是在加载这个页面时初试化的。

data中return{}中，主要就是数据初始化，return里面可以进行数据绑定，变量声明等等。上例中:name和password为例，说明一下：

<input class="phone" type="number" name="phone" placeholder="请输入手机号" v-model="phone">

<input class="password" type="password" name="password" placeholder="请输入密码" v-model="password">

可以看到上面两行的vue代码，出现了一个v-model属性，这个里面就是把phone和password与return中的那两个值进行绑定。当input中输入了值，vue会自动复制到这两个变量中，这就实现了数据绑定。

  说到这里vue的基本操作就是这样，至于怎么对接接口，那就是可以建一个文件夹，专门用来写api，但是需要在这个页面中进行导入，下面简单举例：

   这个就是在<script></script>标签中导入这个js，在上一级目录的api目录下的

    这里面就是写对接后台的接口url：

export const login = (params) => post(controller + "/login.dj",params,null);这里面可以分为post和get，这个是请求方式 ，post里面写的（后端地址url，后端参数用@requestBody标记的参数，后端用@requestparam标记的参数）

在页面中对接接口代码：

 userApi.login(param).then(data => {

          if (data.success) {请求成功后，下面数据回显都可以在这里面进行}

        });

      },

对接接口就是这些。

下面讲述一下几个属性的作用。v-for，v-model，v-if

v-for，这个和我们java中的foreach很像，就是遍历数组元素

v-model，这个上面讲述过，参考上面

v-if，这个是判断作用，可以在标签中做控制。