一句話概括vue，小巧而不失優(yōu)雅。

如果說(shuō)你在的公司用vue開(kāi)發(fā)，在對(duì)接后端接口時(shí)，沒(méi)有前端人員給你對(duì)接口，需要你自己來(lái)寫(xiě)js進(jìn)行對(duì)接，那么是不是有很多人也和博主一樣苦惱呢？

會(huì)vue的人當(dāng)然會(huì)覺(jué)得，對(duì)個(gè)接口有什么 ？

很簡(jiǎn)單嘛，然而對(duì)于一個(gè)做后端寫(xiě)接口的程序猿來(lái)說(shuō)，那就很有問(wèn)題，如果說(shuō)這個(gè)程序猿以前不知道vue這個(gè)使用，那么問(wèn)題就更大了。

好了，開(kāi)始說(shuō)重點(diǎn)。

首先看一下vue中的參數(shù)

<script>
export default {
  name: 'demo',
  data () {
      return{
         name:'demo',
         password:'demo123456',
         }
      }
    }
  },
  methods: {
    checkForm(){
       }
    },
mounted(){
  },
beforeMount(){
   }
}
</script>

從上面可以看出來(lái)vue中寫(xiě)的一些基本的內(nèi)容。

下面來(lái)一一介紹一下

首先可以看到上面中的data里面我寫(xiě)了兩個(gè)參數(shù)：

• 一個(gè)是name
• 一個(gè)是password

這兩個(gè)數(shù)據(jù)是表單數(shù)據(jù)綁定的，在標(biāo)簽頁(yè)中用v-model進(jìn)行綁定。

這樣就可以實(shí)現(xiàn)數(shù)據(jù)綁定了，然后可以看到有methods，這個(gè)里面主要是寫(xiě)一些方法的，一般對(duì)接接口就在這里面進(jìn)行寫(xiě)代碼，

beforeMount這里面主要是聲明方法的什么，在這個(gè)頁(yè)面加載前對(duì)初試化這里面的內(nèi)容，一般會(huì)在路由的時(shí)候接受參數(shù)，mounted這個(gè)里面和beforeMount里面的差不多，不過(guò)這里面的方法是在加載這個(gè)頁(yè)面時(shí)初試化的。

data中return{}中，主要就是數(shù)據(jù)初始化，return里面可以進(jìn)行數(shù)據(jù)綁定，變量聲明等等。

上例中:name和password為例，說(shuō)明一下：

<input class="phone" type="number" name="phone" placeholder="請(qǐng)輸入手機(jī)號(hào)" v-model="phone">

<input class="password" type="password" name="password" placeholder="請(qǐng)輸入密碼" v-model="password">

可以看到上面兩行的vue代碼，出現(xiàn)了一個(gè)v-model屬性，這個(gè)里面就是把phone和password與return中的那兩個(gè)值進(jìn)行綁定。

當(dāng)input中輸入了值，vue會(huì)自動(dòng)復(fù)制到這兩個(gè)變量中，這就實(shí)現(xiàn)了數(shù)據(jù)綁定。

說(shuō)到這里vue的基本操作就是這樣，至于怎么對(duì)接接口，那就是可以建一個(gè)文件夾，專(zhuān)門(mén)用來(lái)寫(xiě)api，但是需要在這個(gè)頁(yè)面中進(jìn)行導(dǎo)入，下面簡(jiǎn)單舉例：

這個(gè)就是在<script></script>標(biāo)簽中導(dǎo)入這個(gè)js，在上一級(jí)目錄的api目錄下的

這里面就是寫(xiě)對(duì)接后臺(tái)的接口url：

export const login = (params) => post(controller + "/login.dj",params,null);

這里面可以分為post和get，這個(gè)是請(qǐng)求方式 ，post里面寫(xiě)的（后端地址url，后端參數(shù)用@requestBody標(biāo)記的參數(shù)，后端用@requestparam標(biāo)記的參數(shù)）

在頁(yè)面中對(duì)接接口代碼：

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

          if (data.success) {請(qǐng)求成功后，下面數(shù)據(jù)回顯都可以在這里面進(jìn)行}

        });

      },

對(duì)接接口就是這些。

下面講述一下幾個(gè)屬性的作用。

v-for，v-model，v-if

• v-for，這個(gè)和我們java中的foreach很像，就是遍歷數(shù)組元素
• v-model，這個(gè)上面講述過(guò)，參考上面
• v-if，這個(gè)是判斷作用，可以在標(biāo)簽中做控制。

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論