Web前端开发

 一、概述 

1.1 什么是HTML、CSS？ 

二、HTML

2.1 HTML快速入门 

 

 

2.2 基础标签和样式 

2.2.1 标题

（1）标题排版

输入！加回车，直接生成HTML基本结构标签 。

    
    
    
    
    


    
    
    
    
    
    新浪政务>正文

    
焦点访谈：中国底气 新思想夯实大国粮仓

    

    2023年03月02日 21:50 央视网
    

    
    

 

（2）样式1 

 

（3）样式2

 使用优先级：id选择器>类选择器>元素选择器

（4）超链接

2.2.2 正文

（1）正文排版

（2）页面布局

  

 

 2.2.3 表格标签

2.2.4 表单标签 

 

2.2.5 表单项标签

三、JS 

3.1 引入方式

3.2 基础语法

（1）书写语法

 （2）变量

（3）数据类型、运算符、流程控制语句 

3.3 函数

3.4 对象

（1）Array

 

 

1.查看数组长度 

2.遍历数组

3.添加数组元素

4，删除元素 

（2）String

（3）JSON

 

 （4）BOM

 

 

（5）DOM

 

 

（6）DOM案例

 

3.5 事件监听

（1）事件绑定

（2）常见事件

    
    
    
    




    

        
        
        

        
    
  

    




    

        

            
学号
            
姓名
            
分数
            
评语
        
        

            
001
            
张三
            
90
            
很优秀
        
        

            
002
            
李四
            
92
            
优秀
        
    

 （3）案例

四、Vue

4.1 概述

4.2 常用指令

（1）v-bind & v-model 

 

 （2）v-on

 （3）v-if & v-show

    
    
    
    
    


    

        
        年龄经判定,为:
        年轻人(35及以下)
        中年人(35-60)
        老年人(60及以上)

        



        年龄经判定,为:
        年轻人(35及以下)
        中年人(35-60)
        老年人(60及以上)

    

（4）v-for

    
    
    
    
    


    


        
{{addr}}

        


        
{{index + 1}} : {{addr}}

    

（5）案例

    
    
    
    
    


    
    

        
        

            

                
编号
                
姓名
                
年龄
                
性别
                
成绩
                
等级
            

            

                
{{index + 1}}
                
{{user.name}}
                
{{user.age}}
                

                    男
                    女
                
                
{{user.score}}
                

                    优秀
                    及格
                    不及格
                
            
        

    

4.3 生命周期

五、Ajax 

5.1 介绍

 

5.2 Axios 

 

6 前端工程化

6.1 前后端分离开发

6.1.1 介绍

 

6.1.2 YAPI

 

 

6.2 环境准备

 

6.3 vue项目

 创建：

 

 

6.4 vue项目开发流程

7 Element 

7.1 快速入门

7.2 常见组件

7.2.1 table表格

7.2.2 pagination分页

7.2.3 dialog对话框

7.2.4 form表单