JavaWeb—Vue&Element

目录

一、Vue

1.1 概述

1.2 快速入门

1.3 Vue指令

1.3.1 v-bind & v-model 指令

1.3.2 v-on 指令

1.3.3 条件判断指令

1.3.4 v-for 指令

1.4 生命周期

二、Element

2.1 快速入门

2.2 Element布局

2.2.1 Layout 布局

2.2.2 Container 布局容器

2.3 案例

---

一、Vue

1.1 概述

Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写

• Vue如何简化DOM书写呢？

基于MVVM (Model-View-ViewModel) 思想，实现数据的双向绑定，将变成的关注点放在数据上。

之前是将关注点放在了 DOM 操作上；而要了解 MVVM 思想，必须先知道 MVC 思想，如下图就是 MVC 思想图解

1.2 快速入门

Vue使用起来分为三步：

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

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

   new Vue({
        el:"#app",
        data(){
            return {
                username:""
            }
        }
    });

创建Vue对象时，需要传递一个 JS 对象，而该对象中需要如下属性：

• el：用来指定哪些标签受Vue管理。该属性取值 #app 中的 app 需要是受管理的标签的id属性值
• data：用来定义数据模型
• methods：用来定义函数

 3. 编写视图

    
    
    {{username}}
    

• {{ }} 是Vue中定义的插值表达式，在里面写数据模型，到时候会将该模型的数据值展示在这个位置

    
    





    
    
    {{username}}

1.3 Vue指令

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

1.3.1 v-bind & v-model 指令

    
    




    点击一下
    点击一下
    

1.3.2 v-on 指令

1.3.3 条件判断指令

    
    




    
div1
    
div2
    
div3
    

    
div v-show
    


    

1.3.4 v-for 指令

    
    



    

        {{addr}} 

    

    

    

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

    

1.4 生命周期

生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。

 下图是 Vue 官网提供的从创建 Vue 到效果 Vue 对象的整个过程及各个阶段对应的钩子函数

二、Element

Element：是饿了么公司前端开发团队提供的一套基于Vue的网站组件库，用于快速构建网页

Element提供了很多组件(组成网页的部件)供我们使用。例如：超链接、按钮、图片、表格等等

官网网址：

Element - The world's most popular Vue UI framework

2.1 快速入门

1. 将资源 element-ui 文件夹直接拷贝到项目的 webapp 下。目录结构如下

2. 创建页面，并在页面引入Element 的css、js文件 和 Vue.js

3. 创建Vue核心对象

        Element 是基于 Vue 的，所以使用Element时必须要创建 Vue 对象

4. 官网复制Element组件代码

    
    



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

    
        圆角按钮
        主要按钮
        成功按钮
        信息按钮
        警告按钮
        危险按钮
    

    
        
        
        
        
        
        
    

2.2 Element布局

Element 提供了两种布局方式，分别是：

• Layout 布局
• Container 布局容器

2.2.1 Layout 布局

2.2.2 Container 布局容器

    
    
    



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

        
            
                
                    
                    
                        查看
                        新增
                        删除
                    
                
                王小虎
            

            
                
                    
                    
                    
                    
                    
                    
                
            
        
    

2.3 案例

    
    
    




    
    

        
            
                
                
            
        

        
            
        

        
            
        

        
            查询
        
    

    
    
        批量删除
        增加
    

    
    

        
            
                
            

            
                
            

            
                
            

            
                
            

            
                
            

            
                提交
                取消