vue初体验记录

第一次使用vue，很多不会做。没有用npm安装一整套的vue，都是引用链接，用了element-ui + vue-router + axios。感觉这样麻烦更多了，做的一个很基础的后台管理系统，里面的组件都写在了一个页面里，很混乱，还是得去试下用整套的vue。

1. breadcrumb
   vue-router el-menu 与 breadcrumb 结合使用
   el-menu 中的 index="/index" 里的内容即指向路由

getBreadcrumb () {
    let matched = this.$route.matched.filter(item => item.name);
    const first = matched[0];
    if (first && first.path == '/index/mining') {
        matched = [{ path: '/index', name: '交易挖矿'}].concat(matched)
    } else if (first && first.path == '/detail') {
        matched = [{ path: '/invite', name: '邀请好友'}].concat(matched)
    }
    _this.levelList = matched;
}

2. el-form
   el-form 要加上ref="miningForm" :model="miningForm"，要做表单验证要加上:rules="miningrules"，并在data里写验证。
   el-form-item 要加上prop="AccessID"
   el-input 写法

    
      

        
      
    
    
      

        
      
    
    
      

        
          
            
        
      
    
    
      

        
      
      次
    
    
      

        
      
      秒
    
    
      

        
      
      秒
    
    
      

        
          
          停止
      
    

3. 有一处在表格中点某一行的明细进去看不会写，先这么强行做一下。
   主要是 this.bus.$emit 和 this.bus.$on 不太会用，this.bus.$on中可以打印出接收到的数据但是不能绑到data里去。

//html


//js
detailClick: function(event){
    var _this = this
    var el = event.currentTarget
    var detailIndex = el.children[0].children[0].innerHTML
    var username = _this.inviter[detailIndex].username
    this.$router.push({path:"/detail", query: {username: username}})
}

在 /detail 组件内接收 var username = _this.$route.query.username