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.

用的人比较少。

---