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后安装。
例子:
<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。见👇
安装:
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
- rails也可以使用它
- vue.js有专用的 vue-toastr-2
简单的javascript 通知。
non-blocking notifications. jQuery is required.
用的人比较少。