Vue+Element基础介绍

Vue:是一套构建【用户界面】的渐进式前端框架，只关注视图层，很方面与其他库或已有的项目整合。通过API来实现【响应数据的绑定】和【组合的视图组件】

视图：负责页面的渲染，主要由HTML+CSS构成

脚本：负责业务数据模型以及数据的处理逻辑

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

let vm = new Vue({

​ 选项列表；

});

选项列表：

el:用于接收获取到页面的【元素】，根据常用的选择器获取

data:用于保存当前的Vue对象的数据。在视图中声明的变量需要再此处赋值

methods:定义方法。方法可以直接通过对象名调用，this代表当前Vue对象

数据绑定：{{变量名}}，在data里面给数据赋值

    
姓名：{{name}}
    
班级：{{classRoom}}
    打招呼
    修改班级

Vue的常用指令

    
    
    
    
    



    
    

    {{msg}}

    
    


    
    
我是可以看见的div，使用v-show

    
    

        大于0.5
    
    

        小于0.5
    

    
    循环数组：
    

        
{{item}}
    
    循环数组：
    

        
{{index}}:{{item}}
    
    循环对象：
    

        
{{key}}:{{val}}
    
    循环对象：
    

        
{{index}}:{{key}}:{{val}}
    
    循环字符串：
    

        
{{index}}:{{val}}
    
    循环数字：
    

        
{{index}}:{{val}}
    

    
    

    
    
    


    
    
    您在文本框中输入的内容是：{{inputtxt}}

    
    {{ msg }}

    

        {{ msg }}
    

    This will never change: {{msg}}

Element:【网站快速成型】工具，是饿了么公司前端开发团队提供的一套【基于Vue的网站组件库】。使用Element必须要有Vue，组件：组成网页的部件，例如超链接，按钮，图片…

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

引入三个文件，复制对应网站的代码，还有要创建vue核心对象

模板：

快速入门

    
    
    
    
    
    
    


我是按钮




    
        默认按钮
        主要按钮
        成功按钮
        信息按钮
        警告按钮
        危险按钮
    
    


    
        朴素按钮
        主要按钮
        成功按钮
        信息按钮
        警告按钮
        危险按钮
    
    


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


    
        
        
        
        
        
        
    

布局方式

基础布局：将页面分成最多24个部分，自由切分。每行分成多少列

第一个span=24，那么就是整个一行，也就是一列，第二个是两个span=12，将一行分为两列，三个span=8.....以此类推

    



    

    

容器布局：将页面分成头部区域、侧边栏区域、主区域、底部区域

    
    
    
    
    
    
    
    



    
        Header
        
            Aside
            
                Main
                Footer
            
        
    

表单组件

    
    
    
    
    
    
    



    
        
            
        
        
            
                
                
            
        
        
            
                
                    
                
            
            -
            
                
                    
                
            
        
        
            
        
        
            
                
                
                
                
            
        
        
            
                
                
            
        
        
            
        
        
            立即创建
            重置
        
    

表格组件

顶部导航栏组件

    
    
    
    
    
    
    



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

侧边导航栏组件

    
    
    
    
    
    
    



    
        
自定义颜色
        
            
                
                
                    
                    选项1
                    选项2
                
                
                    选项3
                
                
                    
                    选项1
                
            
            
                
                导航二
            
            
                
                导航三
            
            
                
                导航四
            
        
    

综合案例：学生列表

    
    
    
    

    
    
    

    




    
    
        
            
                
                    处理中心
                    
                        
                        选项1
                        选项2
                        选项3
                    
                    首页
                
            
        
        
        
            
                
                    
                        
                        
                            在校学生管理
                            学生的升级/留级
                            学生就业情况
                        
                    

                    
                        
                        
                            意向学生管理
                            未报名学生管理
                            已报名学生管理
                        
                    

                    
                        
                        
                            已有课程管理
                            正在研发课程管理
                            新技术课程管理
                        
                    
                
            

            
            
                
                    学生列表
                    

                        添加学生
                    
                    
                        
                        
                        
                        
                        
                        
                        
                            编辑
                            删除
                        
                    
                    
                
            
        
    

Vue高级使用

自定义组件：

定义格式：

Vue.component(组件名称，{

​ props:组件的属性,

​ data:组件的数据函数,

​ template:组件解析的标签模板

})

    
    
    
    
    




    自定义按钮

Vue异步操作：在Vue发送异步请求，本质上还是AJAX。可以使用axios这个插件简化操作

使用步骤：引入axios核心js文件，调用axios对象的方法发起异步请求和处理响应数据

常用方法：

get(请求的资源路径和请求的参数)：发起GET 请求

post(请求的资源路径，请求的参数)：发起POST 请求

then(response):请求成功后的回调函数，通过response获取响应的数据

catch（error）：请求失败后的回调函数，通过error获取错误信息

servlet：

package com.lcl;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/testServlet")
public class TestServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("UTF-8");
        resp.setContentType("text/html;charset=UTF-8");

        String name = req.getParameter("name");
        System.out.println(name);

        resp.getWriter().write("请求成功");
    }
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }
}

测试页面：

    
    
    
    



    {{name}}
    发送请求

vue02没完成，登陆页面样式卡住了