javaWeb 学习笔记18 Vue&Element（掌握一下F12的用法）

vue是前端框架

(mybatis是简化JDBC代码书写的“JDBC是连接数据库的java-API”)

vue是简化JavaScript中DOM操作的

Vue是基于MWVM( Model-View-ViewModel)思想，实现数据的双向绑定（视图——模型），将编程的关注点放在数据上。

意味着模型改变后，不需要调用API去读取，视图由于绑定了模型会直接改变
官网https://cn.vuejs.org

Vue快速入门

el：是element 元素 你想给哪个区域的代码用vue控制

data(): 是数据

    
    




    
    
    {{username}}

Vue常用指令

 

   点击一下

    点击一下


    

    
    
    {{username}}

    
div1
    
div2
    
div3
    

    
div v-show
    


    

 addrs是数组

    
    




    

        {{addr}} 

    

    

    

        {{i+1}}--{{addr}} 

    

Vue生命周期

 

掌握：mounted:意味着挂载完成，Vue初始化成功，HTML页面渲染成功（发送异步请求，加载数据）

    
    




    

        {{addr}} 

    

    

    

        {{i+1}}--{{addr}} 

    

案例

 

    
    




    

    

    

        

            
序号
            
品牌名称
            
企业名称
            
排序
            
品牌介绍
            
状态
            
操作
        

        

        

            
{{i + 1}}
            
{{brand.brandName}}
            
{{brand.companyName}}
            
{{brand.ordered}}
            
{{brand.description}}
            
{{brand.statusStr}}
            
修改 删除
        

        
    

 

 

    
    



    
添加品牌
    

        品牌名称：

        企业名称：

        排序：

        描述信息：

        状态：
        禁用
        启用


        
    

Element技术

Element快速入门

Element布局

    
    

    




    
        
            
                
                    
                    
                        
                        选项1
                        选项2
                    
                    
                        选项3
                    
                    
                        
                        选项4-1
                    
                
                
                    
                    
                        
                        选项1
                        选项2
                    
                    
                        选项3
                    
                    
                        
                        选项4-1
                    
                
                
                    
                    
                        
                        选项1
                        选项2
                    
                    
                        选项3
                    
                    
                        
                        选项4-1
                    
                
            
        

        
            
                
                    
                    
                        查看
                        新增
                        删除
                    
                
                王小虎
            

            
                
                    
                    
                    
                    
                    
                    
                
            
        
    

Element组件

表格

//粘贴在 中

//Css样式 放在 中

//methods和data 放在 vue 中


methods: {
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      }
    },
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }]
      }
    }

即：中是CSS

中是HTML

对话框和表单

点击打开 Dialog


  这是一段信息
  
    取 消
    确 定
  

  
    
  
  
    
      
      
    
  
  
    
      
    
    -
    
      
    
  
  
    
  
  
    
      
      
      
      
    
  
  
    
      
      
    
  
  
    
  
  
    立即创建
    取消
  

分页工具条

    完整功能
    
    
  

 总案例

    
    
    





    
    

        
            
                
                
            
        

        
            
        

        
            
        

        
            查询
        
    

    

    

        批量删除
        新增

    
    
    

        
            
                
            

            
                
            

            
                
            

            
                
            

            
                
            


            
                提交
                取消