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代码给我上传了，还质问我为啥上传了没运行。我当时也是醉了。

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

开发插件

官网语法：
MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或属性
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }

  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })

  // 3. 注入组件
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })

  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}


插件实例：

新建文件：plugin.js

插件的封装，顺便提供几个常见的函数

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.οnlοad=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全局方法的封装，如果发现用法错误或者有更好的用法一定要留言哟！
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue