Vue 入门级教程

vue是现下比较火的前端框架，其优越性我也不多说；

记得我第一次用的vue-cli搭建项目的时候也闹了不少笑话；

以下提供一些自己的经验之谈，也欢迎大家评论留言共同学习进步。

vue的介绍语法这个需要自己去看一下一些指令和列表渲染的了

命令行工具 (CLI)

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm run dev

命令行打包编译

# 最新稳定版本
$ bower install vue

上面的虽然很简单，但是很多人固定的思维经常也会闹笑话。今年：我到一家虚拟币的公司（不合法的公司我待了一个月就离职了），项目是两个95年的前端开发的，不知道有没有用过vue，挺能装的，我刚来表示对项目不熟悉，让他整理代码上传到线上，结果给我把未编译的vue代码给我上传了，还质问我为啥上传了没运行。我当时也是醉了。

接下下说一下，一些常用的，简单的指令自己看下估计就能做了。

import Cookies from 'js-cookie'
export default {
install(Vue, options) {
//邮箱正则判断
Vue.prototype.emailRel=function (email) {
var rel = /^[a-z0-9]+([._\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
if(rel.test(email)){
return true
}else {
return false
}
}

//密码正则判断
Vue.prototype.passwordRel=function (psw) {
//至少6-15个字符，至少1个大写字母，1个小写字母和1个数字，其他可以是任意字符
var rel=/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[\s\S]{6,15}$/
if(rel.test(psw)){
return true
}else {
return false
}
}

//设置cookie
Vue.prototype.setCookie=function (name,value,times) {
Cookies.set(name, value, { expires: parseInt(times)/24 });
}

//获取cookie
Vue.prototype.getCookie=function (name) {
return Cookies.get(name)
}

//删除cookie
Vue.prototype.removeCookie=function (name) {
return Cookies.remove(name)
}

//获取验证码倒计时
Vue.prototype.cutTime=function (event,time,callback) {
var target=event.target,_time=parseInt(time) || 60;
var set=setInterval(function () {
if(_time>0){
_time--;
target.innerHTML=_time;
}else {
target.innerHTML='获取手机验证码';
clearInterval(set);
callback();
}
},1000)
}

//字符串转对象
Vue.prototype.toObj=function (str) {
var arr=str.split('&'),obj=new Object();
for(let i in arr){
var thisArr=arr[i].split('=');
obj[thisArr[0]]=thisArr[1]
}
return obj
}

//上传base64 图片 (不兼容ie9)
Vue.prototype.uploadImg=function (file,scale) {
return new Promise(function (resolve,reject) {
let _scale=scale || 1;
let cvs = document.createElement('canvas');
let ctx = cvs.getContext('2d');
let img = new window.Image();
let imgType=file.type;
img.src = URL.createObjectURL(file);
img.onload=function () {
cvs.width = img.width*_scale;
cvs.height = img.height*_scale;
ctx.drawImage(img, 0, 0, cvs.width, cvs.height);
resolve(cvs.toDataURL(imgType));
}
});
}

function upload() {
var file=this.files[0];
uploadImg(file,1).then(function (data) {
//data 就是base64返回值
})
}
//判断是否是ie9浏览器
Vue.prototype.isIE_9=(navigator.userAgent.indexOf("MSIE 9.0")>0);

//发布subtype数据封装成数字
Vue.prototype.enAssembly=function (arr) {
var newArr=[],cArr=[];
var sortArr=arr.sort(function (a,b) {
return a-b
});
for(let i in sortArr){
if(parseInt(sortArr[i])<=9){
newArr.push(sortArr[i])
}else {
cArr.push(sortArr[i])
}
}
var toString=newArr.join()+'0'+cArr.join();
return toString.replace(/\,/g,'');
}

//类似位运算的封装
Vue.prototype.enBitFn=function (arr) {
let bitArr=[],bitArrStr;
for(let i in arr){
bitArr.push(0)
}
let choseArr=arr.filter(function (ele,index,arr) {
return ele.click===true
});
for(let j in choseArr){
bitArr[choseArr[j].subtype-1]=1
}
bitArrStr=(bitArr.join()).replace(/\,/g,'');
return parseInt(bitArrStr,2) //2进制字符串转10进制
};

//位运算解码
Vue.prototype.deBitFn=function (num,arr) {
let toBit=num.toString(2),//十进制数字转二进制字符串
bitArr=toBit.split(''),
newArr=[];
if(bitArr.length<arr.length){
let num=arr.length-bitArr.length;
for(let i=0 ;i<num;i++){
bitArr.splice(0,0,'0')
}
}
for (let i in bitArr){
if(bitArr[i]==='1'){
newArr.push(arr[i])
}
}
return newArr
};

//数组去重
Vue.prototype.unique = function(Arr){
var isNum=Arr.every(function (value,index,arr) {
return isNaN(parseFloat(value)) //判断数组元素是不是纯数字不是返回true，是返回发了涩
});
var arr=[];
if(isNum){
arr=Arr.sort(); //先排序
}else {
arr=Arr.sort(function (a,b) {
return a-b
}); //先排序
}
var res = [arr[0]];
for(var i = 1; i < arr.length; i++){
if(arr[i] !== res[res.length - 1]){
res.push(arr[i]);
}
}
return res;
};

//token 失效回到主页
Vue.prototype.isLose=function () {
if(!this.getCookie('token')){
this.$router.push({path:"/"})
}
}
}
}

公用插件的注册

import Plugin from './assets/js/plugin.js'
Vue.use(Plugin);

插件的调用

在各个组件内
export default {
name:"Header",
data(){
return{
loginBool:false,
tel:this.getCookie('tel'), //获取cookie
}
},
methods:{
//退出登陆
loginOut(){
this.removeCookie('token');//删除cookie
this.removeCookie('tel');
this.tel='';
}
}
}

以上只是提供一些vue全局方法的封装，如果发现用法错误或者有更好的用法一定要留言哟！