VueJs大全；vee-validate(一個驗證vue插件), bootstrap-vue, axios簡介。

  

Vue.js大全(包括依賴，插件，好的指導文章等！)

🎉 A curated list of awesome things related to Vue.js

https://github.com/vuejs/awesome-vue

 

---

 

關於Validation( 依賴 )

官網：https://baianat.github.io/vee-validate/guide/

git上有案例文章。

 

vee-validate - Simple Vue.js input validation plugin.  驗證庫之一。

• 可以用命令安裝yarn add vee-validate
• 也可以在視圖網頁上的依賴頁面上搜索vee-validate后安裝。

(具體用法見Guide)

例子：

      <div class="form-group">
        <label>Image</label>
        <input
          type="text"
          class="form-control"
          placeholder="Image"
          v-model="model.image" v-validate="'required|url'" name="image"                    # ⚠️name屬性必須提供。
          :class="{'form-control': true, 'error': errors.has('image')}" />
        <span class="small text-danger" v-show="errors.has('image')">Image is required and must be a valid URL</span>
      </div>

使用this.$validator.validateAll()命令驗證所有。

this.$validator.validateAll().then((result) => {
   this.$emit('save-product', this.model)
})

//或者使用result,當所有驗證通過時，返回一個true
this.$validator.validateAll().then((result) => {
  if (result) {
    //通過驗證后的代碼
  } else {
    console.log("Confirm the errors!!!")
  }
})

 

這里使用了required和url，2個驗證器。從左到右順序驗證，當驗證失敗，會發出errors helpler object

還可以使用組件的模式, 這種模式一般用於scoped slots feature。

 

 Validator API

validator提供API，用於添加新fields和激活驗證。

validateAll(fields?: String or Object)

返回Promise<boolean>, 驗證每一個和field validation相關的值。

 

顯示Errors:

在生成error messages后，這些信息被儲存在一個ErrorBag實例內。

默認，這個error bag 被注入到組件的computed property中，使用errors作為名字。當然也可以客制化名字（防止和其他插件沖突）

使用：

<input type="text" name="fieldName" v-validate="'required'">
<span>{{ errors.first('fieldName') }}</span>

 

⚠️這是默認的設置：即一個field，如果有多個驗證器，當驗證到一個錯誤后，就會把產生的錯誤信息儲存到ErrorBag中，后續的驗證會忽略。可以通過修改config。來改變這種設置。

具體見Guide(顯示多條錯誤信息)

 

 

---

 

如何使用bootstrap4

https://segmentfault.com/a/1190000014509984

 

第一種：自力更生：參考How to add Bootstrap 4 to your Vue project?   （太復雜沒使用）

(參考這篇文章的案例代碼)

 

第二種，從👆的文章看到的，直接使用開箱即用的JS功能：一個Vue wrapper for Bootstrap。見👇

bootstrap-vue

安裝：

vue ui內下載依賴包，然后根據官網的Webpack說明：

//在entry point（main.js）上注冊插件：
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'

Vue.use(BootstrapVue);

//然后在根父組件內的<script>引進2個文件：
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

⚠️需要webpack configuration to load css files？（詳細配置見官網的鏈接）

⚠️：

grid系統bootstrap-vue和原bootstrap不同。

但也可以使用原bootstrap：

例子：(<form>標簽必須在<div class="row">外面)

<form class="form-control">
    <div class="row"> 
       <div class="col-9">
　　     //...
       </div>

       <div class="col-3">
　　　　 //...
       </div>
    </div>
</form>

 

---

 

axios

很簡單方便。https://github.com/axios/axios

 

所有的請求方法，都有別名：

axios.request(config)
axios.get(url[, config]) axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]]) axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

 

axios API

通過傳遞相關config到axios, 可以制造request。

axios(config)

//和Fetch, Rails.ajax結構類似。
// Send a POST request
axios({
  methods: 'post',
  url: '/user/123',
  data: {
    firstName: 'Fred',
    lastName: 'Fsdf',
  } 
)}
// Send a GET request
axios('/user/123')

更多知識點，看git！

 

---

 

 

toastr

http://www.toastrjs.com

• rails也可以使用它
• vue.js有專用的 vue-toastr-2

簡單的javascript 通知。

non-blocking notifications. jQuery is required.

用的人比較少。

---