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

如果說你在的公司用vue開發(fā)，在對接后端接口時，沒有前端人員給你對接口，需要你自己來寫js進行對接，那么是不是有很多人也和博主一樣苦惱呢？

會vue的人當然會覺得，對個接口有什么 ？

很簡單嘛，然而對于一個做后端寫接口的程序猿來說，那就很有問題，如果說這個程序猿以前不知道vue這個使用，那么問題就更大了。

好了，開始說重點。

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

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

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

下面來一一介紹一下

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

• 一個是name
• 一個是password

這兩個數(shù)據(jù)是表單數(shù)據(jù)綁定的，在標簽頁中用v-model進行綁定。

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

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

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

上例中: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代碼，出現(xiàn)了一個v-model屬性，這個里面就是把phone和password與return中的那兩個值進行綁定。

當input中輸入了值，vue會自動復制到這兩個變量中，這就實現(xiàn)了數(shù)據(jù)綁定。

說到這里vue的基本操作就是這樣，至于怎么對接接口，那就是可以建一個文件夾，專門用來寫api，但是需要在這個頁面中進行導入，下面簡單舉例：

這個就是在<script></script>標簽中導入這個js，在上一級目錄的api目錄下的

這里面就是寫對接后臺的接口url：

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

這里面可以分為post和get，這個是請求方式 ，post里面寫的（后端地址url，后端參數(shù)用@requestBody標記的參數(shù)，后端用@requestparam標記的參數(shù)）

在頁面中對接接口代碼：

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

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

        });

      },

對接接口就是這些。

下面講述一下幾個屬性的作用。

v-for，v-model，v-if

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

總結(jié)

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

最新評論