短信验证 现在是市面上比较流行的一种验证方式，最近公司的项目有涉及到故整体如下

sendMsm: function(wait, objectb) {

	var time = wait;

	if(time == 0) {

		$(objectb).removeAttr("disabled");

		$(objectb).text("获取验证码");

		$(objectb).removeClass('hidden');

		$(objectb).next().addClass('hidden');

		time = wait;

	} else {

		$(objectb).attr("disabled", true);

		$(objectb).addClass('hidden');

		$(objectb).next().removeClass('hidden').text(time + " s 后重发");

		time--;

		setTimeout(function() {

			qdcms.sendMsm(time, objectb);

		}, 1000)

	}

}

<a class="btn btn-black" onclick="qdcms.getcode(60,this)">获取验证码</a>

<span class="btn btn-black disabled hidden"></span>

<template>

	<button class="timerout" :disabled="disabled || time > 0" @click='run'>

        {{ text }}

    </button>

</template>

<script>

	export default {

		name: 'timerbtn',

		props: {

			second: {

				type: Number,

				default: 60

			},

			disabled: {

				type: Boolean,

				default: false

			}

		},

		data: function() {

			return {

				time: 0

			}

		},

		methods: {

			run() {

				this.time = this.second;

				this.timer();

			},

			timer() {

				if(this.time > 0) {

					this.time--;

					setTimeout(this.timer, 1000);

				}

			}

		},

		computed: {

			text() {

				return this.time > 0 ? this.time + 's 后重新获取' : '点击获取验证码';

			}

		},

		mounted: function() {



		}



	}

</script>

<style lang="less">

	@import (reference) "../../../assets/lib/css.less";

	.timerout:disabled {

		&,

		&:hover,

		&:focus {

			.bgc(@cbla);

			color: @cwh;

		}

	}

</style>

vue 和 bootstrap 作为前端中 js 和css 框架中的佼佼者 二者结合肯定能蹦出不一样的火花！！

var webpack=require('webpack');

plugins: [ 

 new webpack.ProvidePlugin({ 

  $:"jquery", 

  jQuery:"jquery", 

  "windows.jQuery":"jquery"

 }) 

]

（其实这里你应该拒绝的 但是不排除一下吧下改变不了习惯的 ）

import $ from 'jquery'

alias: { 

   'vue$': 'vue/dist/vue.esm.js', 

   '@': resolve('src'), 

   'assets': path.resolve(__dirname, '../src/assets'), 

   'jquery': "jquery/src/jquery"

  } 

import './assets/css/bootstrap.min.css'

import './assets/js/bootstrap.min'

surePay() {

	this.showcontent = true;

	let newTab=window.open('about:blank');

	api.pay(this.refsend.type,this.refsend.money).then(response => {

		if(response.success&&response.data) {

			 newTab.location.href = 'http://'+response.data

		} else {

			window.alert("非法操作");

		}

	});

}

vue-form 是一个在vue 中用于表单验证的插件 目前版本为4.1.1 ??Form validation for?Vue.js 2.2+

官网地址：https://github.com/fergaldoyle/vue-form

import VueForm from 'vue-form'; 

// install globally 

Vue.use(VueForm);

Vue.use(VueForm, options); 

// or use the mixin ... 

mixins: [VueForm]

... 

mixins: [new VueForm(options)] 

...

  <vue-form :state="formstate" @submit.prevent="onSubmit">



    <validate tag="label">

      <span>Name *</span>

      <input v-model="model.name" required name="name" />



      <field-messages name="name">

        <div>Success!</div>

        <div slot="required">Name is a required field</div>

      </field-messages>

    </validate>



    <validate tag="label">

      <span>Email</span>

      <input v-model="model.email" name="email" type="email" required />



      <field-messages name="email">

        <div slot="required">Email is a required field</div>

        <div slot="email">Email is not valid</div>

      </field-messages>

    </validate>



    <button type="submit">Submit</button>

  </vue-form>

data(){

    return{ 

        formstate: {},

        model: { name: '', email: 'invalid-email' } }, 

    } 

methods: { 

    onSubmit: function () { 

        if(this.formstate.$invalid) { 

        // alert user and exit early

            return; 

        } 

        // otherwise submit form 

    }

}

vue 中可直接通过FormData的方式提交数据 要获取该表单的所有数据 可给vue-form 添加ref属性来获取?let def = this.$refs.sendinfo.$el;

<field-messages name="name" show="$dirty && $touched">

  <div slot="errorKeyA">Error message A</div>

  <div slot="errorKeyB">Error message B</div>

</field-messages>

<field-messages name="fieldName">

  <span>Success</span>

  <template slot="required" scope="state">

    <span v-if="state.$touched || state.$submitted">Name is a required field</span>

  </template>

  <template slot="errorKeyB" scope="state">

    <span v-if="state.$touched || state.$dirty">Error message B</span>

  </template>

</field-messages>

type="email"

type="url"

type="number"

required

minlength

maxlength

pattern

min (for type="number")

max (for type="number")

<!-- static validators -->

<validate>

  <input type="email" name="email" v-model="model.email" required />

</validate>

<validate>

  <input type="text" name="name" v-model="model.name" maxlength="25" minlength="5" />

</validate>



<!-- bound validators -->

<validate>

  <input type="email" name="email" v-model="model.email" :required="isRequired" />

</validate>

<validate>

  <input type="text" name="name" v-model="model.name" :maxlength="maxLen" :minlength="minLen" />

</validate>

var options = {

  validators: {

    'my-custom-validator': function (value, attrValue, vnode) {

      // return true to set input as $valid, false to set as $invalid

      return value === 'custom';

    }

  }

}



Vue.use(VueForm, options);

// or

mixins: [new VueForm(options)]

<validate>

  <input v-model="something" name="something" my-custom-validator />

</validate>

<validate :custom="{customValidator: customValidator}">

  <input v-model="something" name="something" />

</validate>

// ...

methods: {

	customValidator: function (value) {

		// return true to set input as $valid, false to set as $invalid

		return value === 'custom';

	}

}

// ...

methods: {

  debounced: _.debounce(function (value, resolve, reject) {

    fetch('https://httpbin.org/get').then(function(response){

      resolve(response.isValid);

    });

  }, 500),

  customValidator (value) {

    return new Promise((resolve, reject) => {

      this.debounced(value, resolve, reject);

    });

  }

}

<vue-form ref="form" :state="formstate">



resetState: function () {

  this.formstate._reset();

  // or

  this.$refs.form.reset();

}

import filters from './utils/filters'

Object.keys(filters).forEach(k => Vue.filter(k, filters[k]))

<div class="fileup">

	<input type="file" ref="fileup" multiple="multiple" class="hide" name="fileUp" :id="rdid" @change="onFileChange" />

	<label class="btn btn-ces" :for="rdid"><span class="iconfont icon-add"></span>选择文件</label>

	<span>{{infomsg}}</span>

<div class="fileup-area" v-show="files.length">

	<div class="col-md-2 files" v-for="(item,index) in files">

		<div class="thumbnail">

			<div class="thumbnail-object" :style="{'background-image':`url(${item.src})`}">

				<a class="ctr-bar" @click="delFile(index,item.key,item.status)">

					<span class="iconfont icon-del"></span>

				</a>

			</div>

			<div class="caption">

				<p class="name">{{item.name}}</p>

				<span class="iconfont icon-zhengque text-success" v-if="item.status==2"></span>

				<bsf-progress :state="item.progress" v-if="item.progress<100"></bsf-progress>

			</div>

		</div>

	</div>

</div>

<p class="btn-mix" v-if="files.length>0">

	<a class="btn btn-ces" @click="sendFile">提交</a>

	<a class="btn btn-default" @click="clearFile">取消</a>

</p>

</div>

import bos from '@/assets/js/bce-sdk-js/baidubce-sdk.bundle'

import lib from "@/assets/js/lib"

import bsfProgress from '@/components/comp/progress'

import { bosConfig, bucket } from '@/config/bos'

let client = new baidubce.sdk.BosClient(bosConfig);

export default {

	name: "bosupt",

	components: {

		bsfProgress

	},

	props: {

		maxlength: {

			type: Number,

			default: 3

		},

		maxSize: {

			type: Number,

			default: 50000

		}

	},

	data() {

		return {

			files: [],

			infomsg:""

		}

	},

	computed: {

		rdid() {

			return "up" + Math.ceil(Math.random() * 1000, 3);

		}

	},

	methods: {

		onFileChange(evt) {

			let files = evt.target.files;

			let _this = this;

			if(files.length) {

				for(let i = 0, len = files.length; i < len; i++) {

					let file = files[i];

					let fcobj = {

						type: file.name.substring(file.name.lastIndexOf('.')).toLowerCase(),

						key: lib.randomStr(false, 5)

					};

					let o = {

						file: file, // File 对象

						status: 0, // 0：未上传 1：正在上传：2上传成功 3：上传失败    

						progress: 0, // 上传进度 

						type: fcobj.type,

						key: fcobj.key,

						name: file.name,

						size: file.size,

						path: "http://" + bucket + ".bj.bcebos.com/" + fcobj.key + fcobj.type

					};

					let reader = new FileReader()

					reader.readAsDataURL(file);

					reader.onload = (e) => {							

						o.src = e.target.result // base64 可以作为判断是不是存在相同文件

						if(this.files.findIndex(f => f.src == o.src) > -1) {

							return false

						}

						if(o.size <= _this.maxSize) {

							this.files.push(o)

						} else {

							this.infomsg="图片太大了哦"

							return false

						}

					};

				};

			}

			Array.from(this.files).slice(0, this.maxlength)

		},

		delFile(index, key, status) {

			if(status == 2) {

				client.deleteObject(bucket, key).then(e => {

					e && this.files.splice(index, 1);

				}).catch(e => {

					console.log(e)

				})

			} else {

				this.files.splice(index, 1);

			}

		},

		clearFile() {

			let files = this.files;

			this.files = [];

			let ar = []

			this.$refs.fileup.value = "";

			this.$emit('clearfile', ar)

		},

		sendFile() {

			this.files.forEach(o => {

				if(o.status == 0) {

					let file = o.file

					let blob = file;

					let keytext = o.type;

					let key = o.key + keytext;

					const ext = key.split(/\./g).pop();

					let mimeType = baidubce.sdk.MimeType.guess(ext);

					if(/^text\//.test(mimeType)) {

						mimeType += '; charset=UTF-8';

					}

					let options = {

						'Content-Type': mimeType

					};

					client.putObjectFromBlob(bucket, key, blob, options)

						.then(function(res) {})

						.catch(function(err) {

							console.error(err);

						});

					client.on('progress', function(evt) {

						if(evt.lengthComputable) {

							o.progress = (evt.loaded / evt.total) * 100;

							o.status = 2;

						}

					});

				}

			});

			let ar = []

			this.files.forEach(e => {

				ar.push(e.path)

			});

			this.$emit('sendfile', ar)

		}

	},

	mounted: function() {

		this.$nextTick(function() {



		})

	}

}

const bosConfig = {

	credentials: {

		ak: '',

		sk: ''

	},

	endpoint: 'http://bj.bcebos.com'

}

const bucket = 'bucket名称';

export{bosConfig,bucket}

npm run build

build: {

    env: require('./prod.env'),

    index: path.resolve(__dirname, '../dist/index.html'),

    assetsRoot: path.resolve(__dirname, '../dist'),

    assetsSubDirectory: 'static',

    assetsPublicPath: '/XXX/',  // 项目发布的目录

    ...

  },

build: {

    env: require('./prod.env'),

    index: path.resolve(__dirname, '../dist/index.html'),

    assetsRoot: path.resolve(__dirname, '../dist'),

    assetsSubDirectory: 'static',

    assetsPublicPath: './',

    ...

  },

  output: {

    path: config.build.assetsRoot,

    filename: utils.assetsPath('js/[name].[hash].js'),

    chunkFilename: utils.assetsPath('js/[id].[hash].js')

  },

  

    new ExtractTextPlugin({

      filename: utils.assetsPath('css/[name][hash].css')

    }),

.......忽略点点 自己百度

npm install -g cnpm --registry=https://registry.npm.taobao.org 

cnpm install -g vue-cli  

cd www

vue init webpack demo01 

cd demo01 

cnpm?install?

npm run dev

<div class="mix" ref="chatbox">....</div>

data() {

	return {

		userMsg: 

	}

}

goBottom(e) {

	e.scrollTop = e.scrollHeight

}

mounted: function() {

	this.$nextTick(function() {

		let e = this.$refs.chatbox;

		this.goBottom(e);

	})

}

watch: {

	userMsg() {

		this.$nextTick(() => {

			let e = this.$refs.chatbox;

			this.goBottom(e);

		})

	}

}

display: flex;

flex-flow: column-reverse;

align-items: baseline;