10.Vue和Element

1、Vue 快速入门

1.1、Vue的介绍

  • Vue是一套构建用户界面的渐进式前端框架。
  • 只关注视图层，并且非常容易学习，还可以很方便的与其它库或已有项目整合。
  • 通过尽可能简单的API来实现响应数据的绑定和组合的视图组件。
  • 特点
    易用：在有HTMLCSSJavaScript的基础上，快速上手。
    灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
    性能：20kbmin+gzip运行大小、超快虚拟DOM、最省心的优化。

1.2、Vue的快速入门

  • 开发步骤
  1. 下载和引入vue.js文件。
  2. 编写入门程序。
    视图：负责页面渲染，主要由HTML+CSS构成。
    脚本：负责业务数据模型（Model）以及数据的处理逻辑。

  • 代码实现

    


    
    
    快速入门


    
    
    
        {{msg}}

1.3、Vue快速入门详解

  • Vue 核心对象：每一个 Vue 程序都是从一个 Vue 核心对象开始的。

    let vm = new Vue({
 选项列表;
});

  • 选项列表
    el选项：用于接收获取到页面中的元素。(根据常用选择器获取)。
    data选项：用于保存当前Vue对象中的数据。在视图中声明的变量需要在此处赋值。
    methods选项：用于定义方法。方法可以直接通过对象名调用，this代表当前Vue对象。

  • 数据绑定
    在视图部分获取脚本部分的数据。
    {{变量名}}

1.4、Vue快速入门的升级




    
    
    快速入门升级


    
    

        
姓名：{{name}}

        
班级：{{classRoom}}

1.5、Vue小结

  • Vue是一套构建用户界面的渐进式前端框架。
  • Vue的程序包含视图和脚本两个核心部分。
  • 脚本部分
    • Vue核心对象。
    • 选项列表
      • el：接收获取的元素。
      • data：保存数据。
      • methods：定义方法。
  • 视图部分
    • 数据绑定：{{变量名}}

2、Vue 常用指令

2.1、指令介绍

  • 指令：是带有 v- 前缀的特殊属性，不同指令具有不同含义。例如 v-html，v-if，v-for。

  • 使用指令时，通常编写在标签的属性上，值可以使用 JS 的表达式。

  • 常用指令

2.2、文本插值

  • v-html：把文本解析为 HTML 代码。

    


    
    
    文本插值


    
    
        
    {{msg}}

2.3、绑定属性

  • v-bind：为 HTML 标签绑定属性值。

    


    
    
    绑定属性

2.4、条件渲染

  • v-if：条件性的渲染某元素，判定为真时渲染,否则不渲染。

  • v-else：条件性的渲染。

  • v-else-if：条件性的渲染。

  • v-show：根据条件展示某元素，区别在于切换的是display属性的值。

    


    
    
    条件渲染


    
    
        
        
    div1
    
        
    div2
    
        
    div3
    

        
    div4

2.5、列表渲染

  • v-for：列表渲染，遍历容器的元素或者对象的属性。

    


    
    
    列表渲染


    
    
        
      
            
    • 
                {{name}}
            
      • 
            
    • 
                {{value}}
            
      •

2.6、事件绑定

  • v-on：为 HTML 标签绑定事件。

    


    
    
    事件绑定


    
    
        
    {{name}}

2.7、表单绑定

  • 表单绑定
    v-model：在表单元素上创建双向数据绑定。

  • 双向数据绑定
    更新data数据，页面中的数据也会更新。
    更新页面数据，data数据也会更新。

  • MVVM模型(ModelViewViewModel)：是MVC模式的改进版
    在前端页面中，JS对象表示Model，页面表示View，两者做到了最大限度的分离。
    将Model和View关联起来的就是ViewModel，它是桥梁。
    ViewModel负责把Model的数据同步到View显示出来，还负责把View修改的数据同步回Model。

    


    
    
    表单绑定


    
    
        
    
            姓名：
            
    
            年龄：

2.8、小结

  • 指令：是带有v-前缀的特殊属性，不同指令具有不同含义。
  • 文本插值
    v-html：把文本解析为HTML代码。
  • 绑定属性
    v-bind：为HTML标签绑定属性值。
  • 条件渲染
    v-if：条件性的渲染某元素，判定为真时渲染,否则不渲染。
    v-else：条件性的渲染。
    v-else-if：条件性的渲染。
    v-show：根据条件展示某元素，区别在于切换的是display属性的值。
  • 列表渲染
    v-for：列表渲染，遍历容器的元素或者对象的属性。
  • 事件绑定
    v-on：为HTML标签绑定事件。
  • 表单绑定
    v-model：在表单元素上创建双向数据绑定。

3、Element 基本使用

3.1、Element介绍

  • Element：网站快速成型工具。是饿了么公司前端开发团队提供的一套基于Vue的网站组件库。

  • 使用Element前提必须要有Vue。

  • 组件：组成网页的部件，例如超链接、按钮、图片、表格等等~

  • Element官网：https://element.eleme.cn/#/zh-CN

  • 自己完成的按钮

  • Element 提供的按钮

3.2、Element快速入门

  • 开发步骤

    1. 下载 Element 核心库。
    2. 引入 Element 样式文件。
    3. 引入 Vue 核心 js 文件。
    4. 引入 Element 核心 js 文件。
    5. 编写按钮标签。
    6. 通过 Vue 核心对象加载元素。

  • 代码实现

    


    
    
    快速入门
    
    
    


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

3.3、基础布局

将页面分成最多 24 个部分，自由切分。

  • 代码实现

    


    
    
    基础布局

3.4、容器布局

将页面分成头部区域、侧边栏区域、主区域、底部区域。

  • 代码实现

    


    
    
    容器布局
    
    
    
    


    
    
        
            头部区域
            
              侧边栏区域
              
                主区域
                底部区域

3.5、表单组件

由输入框、下拉列表、单选框、多选框等控件组成，用以收集、校验、提交数据。

  • 代码实现

    


    
    
    表单组件
    
    
    


    
    
        
            
              
            
            
              
                
                
              
            
            
              
                
                  
                
              
              -
              
                
                  
                
              
            
            
              
            
            
              
                
                
                
                
              
            
            
              
                
                
              
            
            
              
            
            
              立即创建
              重置

3.6、表格组件

用于展示多条结构类似的数据，可对数据进行编辑、删除或其他自定义操作。

  • 代码实现

    


    
    
    表格组件

3.7、顶部导航栏组件

  • 代码实现

    


    
    
    顶部导航栏
    
    
    


    
    
      
      处理中心
      
        
        选项1
        选项2
        选项3
        
          
          选项1
          选项2
          选项3
        
      
      消息中心
      订单管理

3.8、侧边导航栏组件

  • 代码实现

    


    
    
    侧边导航栏
    
    
    


    
    
      
        
          
            
            
              
              选项1
              选项2
            
            
              选项3
            
            
              
              选项1
            
          
          
            
            导航二
          
          
            
            导航三
          
          
            
            导航四

3.9、小结

  • Element：网站快速成型工具。是一套为开发者、设计师、产品经理准备的基于Vue的桌面端组件库。
  • 使用Element前提必须要有Vue。
  • 使用步骤
    1.下载Element核心库。
    2.引入Element样式文件。
    3.引入Vue核心js文件。
    4.引入Element核心js文件。
    5.借助常用组件编写网页。
  • 常用组件
    网页基本组成部分，布局、按钮、表格、表单等等~~~
    常用组件不需要记住，只需要在Element官网中复制使用即可。

4、综合案例 学生列表

4.1、案例效果和分析

4.2、头部区域的实现

  • 实现思路

    • 头部效果实现。
    • 侧边栏和主区域效果实现。

  • 代码实现

    


    
    
    学生列表
    
    
    
    


  
    
    
      
      
        
          
    
            
          
    
          
            处理中心
            
              
              选项1
              选项2
              选项3
            
            首页

4.3、侧边栏区域的实现



    
        
            
                
                
                    在校学生管理
                    学生升级/留级
                    学生就业情况
                
            
            
                
                
                    意向学生管理
                    未报名学生管理
                    已报名学生管理
                
            
            
                
                
                    已有课程管理
                    正在研发课程管理
                    新技术课程管理

4.4、主区域的实现

主区域和侧边栏区域放在一起



    
        学生列表
        

            添加学生
        

        
            
            
            
            
            
            
            
                编辑
                删除

在vue中定义data
JavaWeb

相关

JavaWeb的三大作用域

javaweb:Servlet执行抛出异常

javaweb项目理解与体会

JavaWeb静态资源发布

JavaWeb基础【HTTP】

03.JavaWeb核心05-EL表达式&过滤器&监听器

JavaWeb概念及Web资源的分类

javaweb-HttpServletRequest

干货来袭！最全面的Javaweb完整学习教程

关于 maven 建立 Javaweb 项目无法解析插件与下载失败问题

JavaWeb之登录功能的实现

IDEA新建一个Maven的Javaweb项目

标签