Vue前端框架基础+Element的使用

前置内容：

    
    
    
	
    
    
    {{username}}

1.2 快速入门

• 示例

  1. 新建HTML页面，引入Vue.js文件

  2. 在JS代码区域创建Vue核心对象，进行数据绑定

     new Vue({
         // el属性：即Element，确定vue控制的区域，写入为一个选择器，使用标签id
         el: "#app",
         
         // data属性：数据的简化书写格式，返回一个模型数据
         data() {  // data() 是 ECMAScript 6 版本的新的写法
             return {
                 // 定义了username的模型数据，初始化为空串
                 username: ""
             }
         }
         /*data: function () {
         	return {
             	username:""
             }
         }*/
         
         // methods属性：用来定义函数，暂时未使用到
         
     });
     

  3. 编写视图

     
         
         
     	
         
         
         {{username}}
     
     

1.3 Vue指令

指令：HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。例如：v-if，v-for…

常见指令：

指令	作用
v-bind	为HTML标签绑定属性值，如设置 href , css样式等
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件
v-if	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else	：：
v-else-if	：：
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-for	列表渲染，遍历容器的元素或者对象的属性

1.3.1 v-bind & v-model 指令

• v-bind

  该指令可以给标签原有属性绑定模型数据。这样模型数据发生变化，标签属性值也随之发生变化

  • 核心对象

  • 视图部分

    
        百度一下
        
        百度一下
    
    

• v-model

  用于实现数据的双向绑定

  详见快速入门，此处不再赘述

1.3.2 v-on 指令

为HTML标签绑定事件

• 核心对象

  // 创建vue核心对象
  new Vue({
      el:"#app",
      // 使用methods属性，属性值为任意个方法，注意格式
      methods:{
          show(){
              alert("单击事件");
          }
      }
  });
  

• 视图部分

• 注意事项：v-on: 后面的事件名称是之前原生事件属性名去掉on

  如：

  • 单击事件 ： 事件属性名是 onclick，而在vue中使用是 v-on:click
  • 失去焦点事件：事件属性名是 onblur，而在vue中使用时 v-on:blur

1.3.3 条件判断指令

• 核心对象

  
      
  div1
      
  div2
      
  div3
  
      
  
      
      
      
      
  v-show count == 1
      
  
  
      
  
  

• 视图代码

  // 创建vue核心对象
  new Vue({
      el:"#app",
      data(){
          return {
              count:0
          }
      }
  });
  

1.3.4 v-for 指令

• 迭代器语法

  <标签 v-for="变量名 in 集合模型数据">
      {{变量名}}
  
  

• 索引语法

  <标签 v-for="(变量名,索引变量) in 集合模型数据">
      
     {{索引变量 + 1}} {{变量名}}
  
  

• 代码演示

  • vue代码

    new Vue({
        el: "#app",
        data() {
            return {
                addrs: ["北京", "上海", "广州"]
            }
        }
    });
    

  • 视图代码

    
        
    
            {{addr}}
    
        
        
    
        
    
            {{i}} ---- {{addr}}
        
    
    

1.4 生命周期

• 生命周期的八个阶段

  状态	阶段周期
  beforeCreate	创建前
  created	创建后
  beforeMount	载入前
  mounted	挂载完成
  beforeUpdate	更新前
  updated	更新后
  beforeDestroy	销毁前
  destroyed	销毁后

• 生命周期示意图
  

• 生命周期函数

  new Vue({
      el: "#app",
      data() {
          return {
              addrs: ["北京", "上海", "广州"]
          }
      },
      method:{
          show(){
              alert("");
          }
      },
      // 挂载完成时将被执行
      mounted(){
          alert("页面加载完成");
      }
  });
  

1.5 案例

1.5.1 需求

使用Vue简化AJAX中的品牌数据展示案例

1.5.2 查询所有功能

1.5.2.1 实现方式

1. 页面加载完成后发送异步请求，获取列表数据，使用mounted()

2. 后台收到请求调用对应service方法进行查询

3. 将List集合转换为JSON数据

4. 响应JSON数据

5. 便利集合数据，展示表格，使用v-for

1.5.2.2 编码

• 引入Vue的JS文件

• 创建Vue对象

  new Vue({
      el:"#app",
      data(){
          return{
              // 注意此处为数组
              brands:[]
          }
      },
      // 当前页面加载完成后发送AJAX请求，查询数据
      mounted(){
          // Axios无法直接使用原生的this
          var _this = this;
          axios({
              method: "get",
              url: "http://localhost:8080//brand-demo-ajax/selectAll"
          }).then(function (resp) {
              // 接收后台给到的数据，为JSON串，可自动反序列化为JavaScriptObjects
              _this.brands = resp.data;
          })
      }
  })
  

• 修改视图

  
      
  
      
  
      
  
          
  
              
  序号
              
  品牌名称
              
  企业名称
              
  排序
              
  品牌介绍
              
  状态
              
  操作
          
          
  
              
  {{i+1}}
              
  {{brand.brandName}}
              
  {{brand.companyName}}
              
  {{brand.ordered}}
              
  {{brand.description}}
              
  {{brand.status}}
              
  修改 删除
          
      
  
  

• 完整代码展示

  
  
  
      
      
  
  
  
      
  
      
  
      
  
          
  
              
  序号
              
  品牌名称
              
  企业名称
              
  排序
              
  品牌介绍
              
  状态
              
  操作
          
          
  
              
  {{i+1}}
              
  {{brand.brandName}}
              
  {{brand.companyName}}
              
  {{brand.ordered}}
              
  {{brand.description}}
              
  {{brand.status}}
              
  修改 删除
          
      
  
  
  
  
  
  
  
  
  
  
  

1.5.3 添加功能

1.5.3.1 实现方式

1. 点击提交按钮，发送ajax请求，携带表单JSON数据，使用v-model

2. 后台接收请求，查询接收到的品牌数据

3. 调用对应的service方法添加数据

4. 响应成功标识

5. 获取数据，判断是否添加成功，跳转到查询所有数据页面

1.5.3.2 编码

• 引入Vue的JS文件（不再赘述）

• 创建Vue对象

  new Vue({
      el: "#app",
      data(){
          return {
              brand:{}
          }
      },
      methods: {
          // 发送AJAX请求
          submitFrom() {
              // Axios无法直接使用原生的this
              var _this = this;
              axios({
                  method: "post",
                  url: "http://localhost:8080/brand-demo-ajax/add",
                  // Axios传递参数时会自动将JavaScriptObject序列化为JSON串
                  data: _this.brand
              }).then(function (resp){
                  // 判断响应数据是否为 success
                  if (resp.data == "success") {
                      // 重定向到查询所有页面
                      location.href = "http://localhost:8080/brand-demo-ajax/brand.html";
                  }
              })
          }
      }
  })
  

• 修改视图

  
  
      
  添加品牌
      
  
          品牌名称：
  
          企业名称：
  
          排序：
  
          描述信息：
  
          状态：
          禁用
          启用
  
  
          
      
  
  

• 页面完整代码

  
  
  
  
      
      
  
  
  
      
  添加品牌
      
  
          品牌名称：
  
          企业名称：
  
          排序：
  
          描述信息：
  
          状态：
          禁用
          启用
  
  
          
      
  
  
  
  
  
  
  
  
  
  

2、Element

概述：CV工程师上线（啊不是

官网：Element官网（基于Vue2.x）

2.1 快速入门

1. 引入 Element 的 Css、JS 以及 Vue.js

2. 创建 Vue 核心对象

   new Vue({
       el:"#app"
   })
   

3. 复制官网 Element 组件代码

   
   
   
       
       
   
   
   
   
       
           默认按钮
           主要按钮
           成功按钮
           信息按钮
           警告按钮
           删除
       
       
           朴素按钮
           主要按钮
           成功按钮
           信息按钮
           警告按钮
           危险按钮
       
   
       
           圆角按钮
           主要按钮
           成功按钮
           信息按钮
           警告按钮
           危险按钮
       
   
       
           
           
           
           
           
           
       
   
   
   
   
   
   
   
   
   
   
   

2.2 Element 布局

2.2.1 Layout 局部

• 通过基础的 24 分栏，迅速简便地创建布局。也就是默认将一行分为 24 栏，根据页面要求给每一列设置所占的栏数。

• 代码示例

2.2.2 Container 布局容器

• 官网给出的 Container 容器布局案例

  
  
  
      
      
  
      
  
  
  
  
  
      
          
              
                  
                      
                      
                          
                          选项1
                          选项2
                      
                      
                          选项3
                      
                      
                          
                          选项4-1
                      
                  
                  
                      
                      
                          
                          选项1
                          选项2
                      
                      
                          选项3
                      
                      
                          
                          选项4-1
                      
                  
                  
                      
                      
                          
                          选项1
                          选项2
                      
                      
                          选项3
                      
                      
                          
                          选项4-1
                      
                  
              
          
  
          
              
                  
                      
                      
                          查看
                          新增
                          删除
                      
                  
                  王小虎
              
  
              
                  
                      
                      
                      
                      
                      
                      
                  
              
          
      
  
  
  
  
  
  
  
  
  
  
  
  

2.3 案例

2.3.1 基本页面准备

2.3.2 完整代码展示

前端内容不是本人学习重点，此处不做详细说明

步骤说明：

1. 视图样式
2. 处理事件所需的函数
3. 对Vue核心对象和视图数据绑定模型

    
    
    



    
    
        
            
                
                
            
        

        
            
        

        
            
        

        
            查询
        
    

    
    
    
        批量删除
        新增
    

    
    
        
            
                
            

            
                
            

            
                
            

            
                
            

            
                
            
            
                提交
                取消