Javaweb-前端部分

1.HTML和CSS

  • HTML(HyperText Markup Language):超文本标记语言

    • 超文本:超越了文本的限制,比普通文本更强大。除了文字信息,还可以定义图片、音频、视频等内容。
    • 标记语言:由标签构成的语言
      • HTML标签都是预定义好的。例如:使用 <h1> 标签展示标题,使用<a>展示超链接,使用<img>展示图片,<video>展示视频。
      • HTML代码直接在浏览器中运行,HTML标签由浏览器解析。
  • CSS(Cascading Style Sheet):层叠样式表,用于控制页面的样式(表现)。

  • HTML基础结构:

    • java"><html>
      	<head>
          	<title></title>
          </head>
          <body>
             
          </body>
      </html>
      
  • HTML标签特点:

    • HTML标签不区分大小写
    • HTML标签的属性值,采用单引号、双引号都可以
    • HTML语法相对比较松散 (建议大家编写HTML标签的时候尽量严谨一些)

1.1 HTML基础标签

  1. 图片标签 <img>

    • 图片标签:<img>
    • 常见属性:
      • src: 指定图像的url (可以指定 绝对路径 , 也可以指定 相对路径)
      • width: 图像的宽度 (像素 / 百分比 , 相对于父元素的百分比)
      • height: 图像的高度 (像素 / 百分比 , 相对于父元素的百分比)
        • width 和 height 可以只指定一个,另一个等比缩放
    • 使用方式:
      • <img src="路径" width="..." height="...">
    • 路径:
      • 绝对磁盘路径:C:\Users\Administrator\Desktop\HTML\img\news_logo.png
      • 绝对网络路径:ht/tps://i2.sinaimg.***/dy/deco/2012/0613/yo***20120613img01/news_logo.png
      • 相对路径:
        • ./ : 当前目录 , ./ 可以省略的
        • …/: 上一级目录
  2. 标题标签

    • 标题标签:<h1> - <h6>

    • 效果:h1为一级标题,字体最大;h6为六级标题,字体最小

    • 使用方式:

      <h1>111111111111</h1>
      <h2>111111111111</h2>
      <h3>111111111111</h3>
      <h4>111111111111</h4>
      <h5>111111111111</h5>
      <h6>111111111111</h6>
      
  3. 水平分页线标签 <hr>

    • 标签:<hr>
    • 效果:水平分页线
  4. 超链接

    • 标签: <a href=“…” target=“…”>央视网</a>
    • 属性:
      • href: 指定资源访问的url
      • target: 指定在何处打开资源链接
        • _self: 默认值,在当前页面打开
        • _blank: 在空白页面打开
    • 使用方式:<a href="..." target="...">AAA</a>
  5. 视频音频标签

    • 标签:<video>
      • 属性:
        • src: 规定视频的url
        • controls: 显示播放控件
        • width: 播放器的宽度
        • height: 播放器的高度
      • 用法:<video src="..." controls width="..." height="..."></video>
    • 音频标签: <audio>
      • 属性:
        • src: 规定音频的url
        • controls: 显示播放控件
      • 用法:<audio src="..." controls></audio>
  6. 段落标签

    • 段落:<p>
      • 用法:<p>一个段落&lt;/p>
  7. 文本格式标签

    效果 标签 标签(强调)
    加粗 b strong
    倾斜 i em
    下划线 u ins
    删除线 s del
  8. 表格标签

    • 标签:

      • <table> : 用于定义整个表格, 可以包裹多个 <tr>
      • <tr> : 表格的行,可以包裹多个 <td>
      • <td> : 表格单元格(普通),可以包裹内容 , 如果是表头单元格,可以替换为 <th>
    • 属性:

      • border:规定表格边框的宽度
      • width:规定表格的宽度
      • cellspacing: 规定单元之间的空间
    • 用法:

    • <table border="1px" cellspacing="0"  width="600px">
              <tr>
                  <th>序号</th>
                  <th>品牌Logo</th>
                  <th>品牌名称</th>
                  <th>企业名称</th>
              </tr>
              <tr>
                  <td>1</td>
                  <td> <img src="img/huawei.jpg" width="100px"> </td>
                  <td>华为</td>
                  <td>华为技术有限公司</td>
              </tr>
              <tr>
                  <td>2</td>
                  <td> <img src="img/alibaba.jpg"  width="100px"> </td>
                  <td>阿里</td>
                  <td>阿里巴巴集团控股有限公司</td>
              </tr>
          </table>
      

1.2 CSS

  1. CSS引入方法

    • 三种引入方法:
      • 行内样式:在标签内使用style属性,属性值是css属性键值对
        • 用法:<h1 style="xxx:xxx;">中国新闻网&lt;/h1>
      • 内嵌样式:定义<style>标签,在标签内部定义css样式,一般写在<head>内
        • 用法:<style> h1 {...} &lt;/style>
      • 外联样式:定义<link>标签,通过href属性引入外部css文件,企业常用
        • 用法:<link rel="stylesheet" href="css/news.css">
  2. 颜色标识

    • 三种表示方式:
      • 关键字:预定义的颜色名
        • 取值:red、green、blue…
      • rgb表示:红绿蓝三原色,每项取值范围:0-255
        • 取值:rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0)
      • 十六进制表示:#开头,将数字转换成十六进制表示
        • 取值:#000000、#ff0000、#*********,简写:#000、#***c
  3. 元素选择器

    • 选择器的名字必须是标签的名字

    • 作用:选择器中的样式会作用于所有同名的标签上

    • 用法:

      元素名称 {
          css样式名:css样式值;
      }
      -----------
      p{
           color: red;
       }
      -------
      <p>
          Red...
      </p>
      
  4. 类选择器

    • 选择器的名字前面需要加上 .

    • 作用:选择器中的样式会作用于所有class的属性值和该名字一样的标签上,可以是多个

    • 用法:

      .class属性值 {
          css样式名:css样式值;
      }
      ------------
      .cls{
           color: green;
       }
      ------
      <p class=".cls">
          Green...
      </p>
      
  5. id选择器

    • 选择器的名字前面需要加上#

    • 作用:选择器中的样式会作用于指定id的标签上,而且有且只有一个标签(由于id是唯一的)

    • 用法:

      #id属性值 {
          css样式名:css样式值;
      }
      -------------
      #p1 {
          color: blue;
      }
      -------------
      <p id="p1">
          Blue...
      </p>
      
  6. CSS其他常用属性

  • text-indent: 设置段落的首行缩进
  • line-height: 设置行高
  • text-align: 设置对齐方式, 可取值为 left / center / right
  • font-size: 用来设置字体的大小,单位px不可省略
  1. HTML占位符
  • 在HTML页面中无论输入了多少个空格, 最多只会显示一个。 可以使用空格占位符(&nbsp;)来生成空格,如果需要多个空格,就使用多次占位符。

  • 那在HTML中,除了空格占位符以外,还有一些其他的占位符,如下:

    • 显示结果 描述 占位符
      空格 &nbsp;
      < 小于号 &lt;
      > 大于号 &gt;
      & 和号 &amp;
      " 引号 &quot;
      撇号 &apos;

1.3 页面布局

  1. 盒子模型:
  • 盒子:页面中所有的元素(标签),都可以看做是一个 盒子,由盒子将页面中的元素包含在一个矩形区域内,通过盒子的视角更方便的进行页面布局

  • 盒子模型组成:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)

  1. 布局标签:
  • 布局标签:实际开发网页中,会大量频繁的使用 div 和 span 这两个没有语义的布局标签。

  • 标签:<div> <span>

  • 特点:

    • div标签:

      • 一行只显示一个(独占一行)
      • 宽度默认是父元素的宽度,高度默认由内容撑开
      • 可以设置宽高(width、height)
    • 用法:<div>...</div>

    • span标签:

      • 一行可以显示多个
      • 宽度和高度默认由内容撑开
      • 不可以设置宽高(width、height)
    • 用法:<span>...</span>

  • 布局实现:

    • 需要将body中的新闻标题部分、正文部分使用一个 div 布局标签将其包裹起来,方便通过css设置内容占用的宽度,比如:65%。
    • 通过css为该div设置外边距,auto可以自动计算

1.4 表单标签

  • 表单场景: 表单就是在网页中负责数据采集功能的,如:注册、登录的表单。

  • 表单标签: <form>

  • 表单属性:

    • action: 规定表单提交时,向何处发送表单数据,表单提交的URL。
    • method: 规定用于发送表单数据的方式,常见为: GET、POST。
      • GET:表单数据是拼接在url后面的, 如: xxxxxxxxxxx?username=Tom&age=12,url中能携带的表单数据大小是有限制的。
      • POST: 表单数据是在请求体(消息体)中携带的,大小没有限制。更安全
  • 表单项标签: 不同类型的input元素、下拉列表、文本域等。

    • input: 定义表单项,通过type属性控制输入形式
      • type取值
        • text:默认值,定义单行的输入字段
        • password:密码字段
        • radio:单选按钮
        • checkbox:复选框
        • file:文件上床按钮
        • date/time/datetime-local:日期/时间/日期时间
        • number:数字输入框
        • emall:邮件输入框
        • hidden:隐藏域
        • submit/reset/button:提交/重置/可点击按钮
    • select: 定义下拉列表,<option>定义列表项
    • textarea: 定义文本域
  • 用法:

    <!-- value: 表单项提交的值 lable表示一整个区域都可选中-->
    <form action="" method="post">
         姓名: <input type="text" name="name"> <br><br>
         密码: <input type="password" name="password"> <br><br> 
         性别: <input type="radio" name="gender" value="1"><label><input type="radio" name="gender" value="2"></label> 
        <br><br>
         爱好: <label><input type="checkbox" name="hobby" value="java"> java </label>
              <label><input type="checkbox" name="hobby" value="game"> game </label>
              <label><input type="checkbox" name="hobby" value="sing"> sing </label> <br><br>
         图像: <input type="file" name="image">  <br><br>
         生日: <input type="date" name="birthday"> <br><br>
         时间: <input type="time" name="time"> <br><br>
         日期时间: <input type="datetime-local" name="datetime"> <br><br>
         邮箱: <input type="email" name="email"> <br><br>
         年龄: <input type="number" name="age"> <br><br>
         学历: <select name="degree">
                   <option value="">----------- 请选择 -----------</option>
                   <option value="1">大专</option>
                   <option value="2">本科</option>
                   <option value="3">硕士</option>
                   <option value="4">博士</option>
              </select> 
        <br><br>
         描述: <textarea name="description" cols="30" rows="10"></textarea>  <br><br>
         <input type="hidden" name="id" value="1">
    	 	
         <!-- 表单常见按钮 -->
         <input type="button" value="按钮">
         <input type="reset" value="重置"> 
         <input type="submit" value="提交">   
         <br>
    </form>
    

2.JavaScript

1.引入方式

  1. 内部脚本:将 JS 代码定义在 HTML 页面中

    • JavaScript代码必须位于<script></script>标签之间

    • 在HTML文档中,可以在任意地方,放置任意数量的<script>

    • 一般会把脚本置于<body>元素的底部,可改善显示速度

      <body>
          
      </body>
      <script>
          alert("Hello");//可不加分号,但是建议加,好看
      </script>
      
  2. 外部脚本:JS代码定义在外部 JS 文件中,然后引入 HTML 页面中

    • 外部JS文件中,只包含JS代码,不包含 <script>标签

    • 引入外部js的<script>标签,必须是双标签

      BB.js文件
      -------------
      alert("Hello");
      --------------
      AA.html(同目录下)
      ----------------
      <head>
          <script src = "BB.js"></script>
      </head>
      

2.基础语法

  • 语法规则:

    • 区分大小写:与 Java 一样,变量名、函数名以及其他一切东西都是区分大小写的

    • 每行结尾的分号可有可无

    • 大括号表示代码块

    • 注释:

      • 单行注释:// 注释内容
      • 多行注释:/* 注释内容 */
  • 变量声明:

    • var :声明变量,可以是任意类型
    • let :只在代码块内生效
    • const :声明常量,不可修改
    • 声明规则:
      • JavaScript 是一门弱类型语言,变量可以存放不同类型的值 。
      • 变量名需要遵循如下规则:
        • 组成字符可以是任何字母、数字、下划线(_)或美元符号($)
        • 数字不能开头
        • 建议使用驼峰命名
  • 三种输出语句实例:

    • window.alert() :警告框
    • document.write() :在HTML输出内容
    • console.log() :写入浏览器控制台
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-***patible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JS-基本语法</title>
    </head>
    <body>
    
    </body>
    <script>
        /* window.alert()可缩写为alert("JS"); *///var全局变量,作用域大
        var a = 10;
    	//let局部变量,局部生效
        {
            //let不能重复定义
            let a = "张张";
            //let a = "lili";
            alert(a);//张张
        }
        //const常量,改变有错但不报错,运行会终止
        const pi = 3.14;
        //pi = 3.15;
        alert(pi);//3.14
        alert(a);//10
        
        //方式一: 弹出警告框
        // window.alert(a);
    
        // //方式二: 写入html页面中
        // document.write(a);
    
        //方式三: 控制台输出
        console.log(a);
    </script>
    </html>
    

3.数据类型运算符

  • 分为原始类型和引用类型,typeof可以返回变量的数据类型:

    数据类型 描述
    number 数字(整数、小数、NaN(Not a Number))
    string 字符串,单双引皆可
    boolean 布尔。true,false
    null 对象为空
    undefined 当声明的变量未初始化时,该变量的默认值是 undefined
    • 0,null,undefined,“”,NaN都理解为false
    • NaN : 表示非数字,不能运算比较
  • 运算符(形如Java):

    • 注意

      • = :赋值运算符
      • == :判断值相等,但会进行类型转化
      • === :判断值和类型相等,不会进行类型转换
    • 类型转换:

      • parseInt()将其他类型转换为数值类型
  • 流程控制语句if,switch,for等和java保持一致

    运算规则 运算符
    算术运算符 + , - , * , / , % , ++ , –
    赋值运算符 = , += , -= , *= , /= , %=
    比较运算符 > , < , >= , <= , != , == , === 不会进行类型转换
    逻辑运算符 && , || , !
    三元运算符 条件表达式 ? true_value: false_value
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-***patible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-运算符</title>
</head>
<body>
    
</body>
<script>
    //原始数据类型
    alert(typeof 3); //number
    alert(typeof 3.14); //number

    alert(typeof "A"); //string
    alert(typeof 'Hello');//string

    alert(typeof true); //boolean
    alert(typeof false);//boolean

    alert(typeof null); //object 

    var a ;
    alert(typeof a); //undefined

    var age = 20;
    var _age = "20";
    var $age = 20;

    alert(age == _age);//true ,只比较值
    alert(age === _age);//false ,类型不一样
    alert(age === $age);//true ,类型一样,值一样

</script>
</html>

4.函数

  • 两种定义格式:

    • 第一种:

      function 函数名(参数1,参数2..){
          要执行的代码
      }
      
      • 形式参数不需要声明类型,并且JavaScript中不管什么类型都是let或者var去声明,加上也没有意义。
      • 返回值也不需要声明类型,直接return即可
    • 第二种:

      • 通过var去定义函数的名字,具体格式如下:

        var functionName = function (参数1,参数2..){   
        	//要执行的代码
        }
        

        在JavaScript中,函数的调用只需要名称正确即可,参数列表个数不管的。

5.对象

5.1 Array对象
  • Array对象时用来定义数组的。通过索引获取数组中的值。

  • 特点:长度可以变化,可以存储任意数据类型的值,

  • 常用语法格式有如下2种:

    • 方式1:
      • var 变量名 = new Array(元素列表);
    • 方式2:
      • var 变量名 = [ 元素列表 ];
  • 属性方法:

    • 属性:

      • length:设置或返回数组中元素数量
    • 方法:

      • forEach():遍历数组中每个有值的元素,并调用一次传入函数
      • push():将新元素添加到数组末尾,返回新的长度
      • splice():从数组中删除元素
      <script>
          var arr = [1,2,3,4];
          arr[10] = 50;
          for(let i = 0; i < arr.length; i++){
              console.log(arr[i]); //1,2,3,4,undefined,50
          }
          arr.forEach(function(e){
              console.log(e);//1,2,3,4,50
          })//可简写为以下形式
          arr.forEach((e)=>{
              console.log(e);
          })
          arr.push(7,8,9);
          console.log(arr);//1,2,3,4,50,7,8,9,length = 14
          splice(2,2);
          console.log(arr);//1,2,50,7,8,9,length = 12
      
      </script>
      
      
5.2 String对象
  • 语法格式:

    • 创建方式1:
      • var 变量名 = new String(“…”) ;
    • 创建方式2:
      • var 变量名 = “…” ;
  • 属性方法:

    • 属性:
      • length:字符串长度
    • 方法:
      • charAt():返回指定位置字符
      • indexOf():检索字符串
      • trim():去除字符串两边空格
      • substring():提取字符串中两个指定的索引号之间的字符
    <body>
        
    </body>
    <script>
        //创建字符串对象
        //var str = new String("Hello String");
        var str = "  Hello String    ";
    
        console.log(str);
    
        //length
        console.log(str.length);//18
    
        //charAt
        console.log(str.charAt(4));//l
    
        //indexOf
        console.log(str.indexOf("lo"));//5
    
        //trim
        var s = str.trim();
        console.log(s.length);//12
    
        //substring(start,end) --- 开始索引, 结束索引 (含头不含尾)
        console.log(s.substring(0,5));//Hello
    
    </script>
    </html>
    
5.3 JSON对象
  • 自定义对象语法规格:

    • 其语法格式如下:

      var 对象名 = {
          属性名1: 属性值1, 
          属性名2: 属性值2,
          属性名3: 属性值3,
          函数名称: function(形参列表){}
      };
      
      

      我们可以通过如下语法调用属性:

      对象名.属性名
      

      通过如下语法调用函数:

      对象名.函数名()
      
  • json对象:JavaScript Object Notation,JavaScript对象标记法。是通过JavaScript标记法书写的文本。

    • 语法格式:

      • 其格式如下:

        {
            "key":value,
            "key":value,
            "key":value
        }
        

        其中,key必须使用引号并且是双引号,value可以是任意数据类型。

    • json数据常用于作为前后台交互的数据载体

      <script>
          
          var jsonstr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}';
          alert(jsonstr.name);//undefined
          var obj = JSON.parse(jsonstr);//将jsonstr字符串转换为json对象
      	alert(obj.name);	
          alert(JSON.stringify(obj));
      </script>
      
5.4 BOM对象
  • BOM对象:Browser Object Model,翻译过来是浏览器对象模型。也就是JavaScript将浏览器的各个组成部分封装成了对象。我们要操作浏览器的部分功能,可以通过操作BOM对象的相关属性或者函数来完成。

  • 提供的对象描述:

    • Window:浏览器窗口对象

    • Nacigator:浏览器对象

    • Screen:屏幕对象

    • History:历史记录对象

    • Location:地址栏对象

  • Window对象

    • 属性:
      • history :用于获取history对象
      • location :用于获取location对象
      • Navigator :用于获取Navigator对象
      • Screen :用于获取Screen对象
    • 函数:
      • alert() :显示带有一段消息和一个确认按钮的警告框。
      • ***firm() :显示带有一段消息以及确认按钮和取消按钮的对话框。
      • setInterval(fn,毫秒值) :按照指定的周期(以毫秒计)来调用函数或计算表达式。
      • setTimeout(fn,毫秒值) :在指定的毫秒数后调用函数或计算表达式。
  • Location对象:浏览器地址栏对象,常用href属性

    • 属性:
      • href :获取或设置浏览器的地址信息
5.5 DOM对象
  • DOM对象:Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。

    • 封装的对象分为
      • Document:整个文档对象
      • Element:元素对象
      • Attribute:属性对象
      • Text:文本对象
      • ***ment:注释对象
  • 获取DOM对象(Element对象,标签)

    函数 描述
    document.getElementById() 根据id属性值获取,返回单个Element对象
    document.getElementsByTagName() 根据标签名称获取,返回Element对象数组
    document.getElementsByName() 根据name属性值获取,返回Element对象数组
    document.getElementsByClassName() 根据class属性值获取,返回Element对象数组
  • 操作对象:

    • innerHTML : 修改标签内容传入HTML
    <body>
        <img id="h1" src="img/off.gif">  <br><br>
    
        <div class="cls">传智教育</div>   <br>
        <div class="cls">黑马程序员</div>  <br>
    
        <input type="checkbox" name="hobby"> 电影
        <input type="checkbox" name="hobby"> 旅游
        <input type="checkbox" name="hobby"> 游戏
    </body>
    
    <script>
        //1. 获取Element元素
    
        //1.1 获取元素-根据ID获取
        // var img = document.getElementById('h1');
        // alert(img);
    
        //1.2 获取元素-根据标签获取 - div
        // var divs = document.getElementsByTagName('div');
        // for (let i = 0; i < divs.length; i++) {
        //     alert(divs[i]);
        // }
    
    
        //1.3 获取元素-根据name属性获取
        // var ins = document.getElementsByName('hobby');
        // for (let i = 0; i < ins.length; i++) {
        //     alert(ins[i]);
        // }
    
    
        //1.4 获取元素-根据class属性获取
        // var divs = document.getElementsByClassName('cls');
        // for (let i = 0; i < divs.length; i++) {
        //     alert(divs[i]);
        // }
    
    
    
        //2. 查询参考手册, 属性、方法
        var divs = document.getElementsByClassName('cls');
        var div1 = divs[0];
        
        div1.innerHTML = "传智教育666";
    
    </script>
    </html>
    
5.6 事件
  • 事件绑定:

    • 方式1:通过html标签中的事件属性进行绑定

      • 例如一个按钮,我们对于按钮可以绑定单机事件,可以借助标签的onclick属性,属性值指向一个函数。
    • 方式2:通过DOM中Element元素的事件属性进行绑定

      • html中的标签被加载成element对象,可以通过element对象的属性来操作标签的属性。
      <body>
          <input type="button" id="btn1" value="事件绑定1" onclick="on()">
          <input type="button" id="btn2" value="事件绑定2">
      </body>
      <script>
          function on(){
              alert("按钮1被点击了...");
          }
      
          document.getElementById('btn2').onclick = function(){
              alert("按钮2被点击了...");
          }
      </script>
      </html>
      
  • 常见事件:

    事件属性名 说明
    onclick 鼠标单击事件
    onblur 元素失去焦点
    onfocus 元素获得焦点
    onload 某个页面或图像被完成加载
    onsubmit 当表单提交时触发该事件
    onmouseover 鼠标被移到某元素之上
    onmouseout 鼠标从某元素移开

3.Vue

1.概述

  • Vue:构建用户界面的渐进式框架。Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

  • MVVM:是Model-View-ViewModel的缩写,有3个单词,具体释义如下:

    • Model: 数据模型,特指前端中通过请求从后台获取的数据
    • View: 视图,用于展示数据的页面,可以理解成我们的html+css搭建的页面,但是没有数据
    • ViewModel: 数据绑定到视图,负责将数据(Model)通过JavaScript的DOM技术,将数据展示到视图(View)上
  • 使用方式:

    • 1.在<head>区域使用<script>标签引入vue.js文件

    • 2.js代码区定义vue对象

    • 3.在html区域编写视图,其中{{}}是插值表达式,用来将vue对象中定义的model展示到页面上的

      <body>
          <div id="app">
              <input type="text" v-model="message">
              {{message}}
          </div>
      </body>
      <script>
          //定义Vue对象
          new Vue({
              el: "#app", //vue接管区域
              data:{
                  message: "Hello Vue"
              }
          })
      </script>
      
  • vue常用属性:

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

2.Vue指令

  • 常用指令:

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

    <body>
        <div id="app">
            <!-- 
                v-bind中v-bind可以省略但 : 不能  
                v-model 双向绑定可以获取表单的值然后提交给服务器
                v-on 给html标签绑定事件,可以简写为@
                v-if 是条件性渲染,判断为true才渲染
                v-show 根据条件展示元素,切换的是展示的display属性值
                v-if和v-show浏览器呈现的效果是一样的,但是浏览器中html源码不一样。
    
                <标签 v-for="(变量名,索引变量) in 集合模型数据">如果不需要索引可以省去,
                索引变量是从0开始,所以要表示序号的话,需要手动的加1
                {{索引变量 + 1}} {{变量名}}
                </标签>
    		>
    
            <a v-bind:href="url">链接1</a>
            <a :href="url">链接2</a>
    
            <input type="text" v-model="url">
    
            <input type="button" value="点我一下" v-on:click="handle()">
            <input type="button" value="点我一下" @click="handle()">
    
            年龄<input type="text" v-model="age">经判定,为:
            <span v-if="age <= 35">年轻人(35及以下)</span>
            <span v-else-if="age > 35 && age < 60">中年人(35-60)</span>
            <span v-else>老年人(60及以上)</span>
    
            年龄<input type="text" v-model="age">经判定,为:
            <span v-show="age <= 35">年轻人(35及以下)</span>
            <span v-show="age > 35 && age < 60">中年人(35-60)</span>
            <span v-show="age >= 60">老年人(60及以上)</span>
    
            <div v-for="addr in addrs">{{addr}}</div>
            <hr>
            <div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}
    
    
        </div>
    </body>
    <script>
        //定义Vue对象
        new Vue({
            el: "#app", //vue接管区域
            data:{
               url: "https://www.baidu.***"
               age: 20	
               addrs:["北京", "上海", "西安", "成都", "深圳"]
            }method:{
                handle: function(){
                    alert("你点我了一下...");
                }
            
        	}
        })
    </script>
    

3.生命周期

vue的生命周期:指的是vue对象从创建到销毁的过程。vue的生命周期包含8个阶段:每触发一个生命周期事件,会自动执行一个生命周期方法,这些生命周期方法也被称为钩子方法。其完整的生命周期如下图所示:

状态 阶段周期
beforeCreate 创建前
created 创建后
beforeMount 挂载前
mounted 挂载完成
beforeUpdate 更新前
updated 更新后
beforeDestroy 销毁前
destroyed 销毁后
  • mounted:挂载完成,Vue初始化成功,HTML页面渲染成功。一般用于页面初始化自动的ajax请求后台数据
  • mounted声明周期的钩子函数,与methods同级,例:
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           
        },
        methods: {
            
        },
        mounted () {
            alert("vue挂载完成,发送请求到服务端")
        }
    })
</script>

4.Vue项目开发

  • 对于vue项目,index.html文件默认是引入了入口函数main.js文件,我们找到src/main.js文件,其代码如下:

    import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    
    Vue.config.productionTip = false
    
    new Vue({
      router,
      render: h => h(App)
    }).$mount('#app')
    
    

    上述代码中,包括如下几个关键点:

    • import: 导入指定文件,并且重新起名。例如上述代码import App from './App.vue'导入当前目录下得App.vue并且起名为App
    • new Vue(): 创建vue对象
    • $mount(‘#app’);将vue对象创建的dom对象挂在到id=app的这个标签区域中,作用和之前学习的vue对象的le属性一致。
    • router: 路由,详细在后面的小节讲解
    • render: 主要使用视图的渲染的。
  • 打开App.vue, .vue结尾的都是vue组件。而vue的组件文件包含3个部分:

    • template: 模板部分,主要是HTML代码,用来展示页面主体结构的
    • script: js代码区域,主要是通过js代码来控制模板的数据来源和行为的
    • style: css样式部分,主要通过css样式控制模板的页面效果得
    <template>
      <div id="app">
        {{message}}
      </div>
    </template>
    
    <script>
    export default {
      data(){
        return {
          "message":"hello world"
        }
      }
    }
    </script>
    
    <style>
    </style>
    

5.组件库Element

5.1 引入
  • Element:是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库,用于快速构建网页。Element 提供了很多组件(组成网页的部件)供我们使用。例如 超链接、按钮、图片、表格等等。

  • 链接:https://element.eleme.***/#/zh-***

  • 使用方式:

      1. 安装ElementUI组件库

      2. 在main.js这个入口js文件中引入ElementUI的组件库

        import ElementUI from 'element-ui';
        import 'element-ui/lib/theme-chalk/index.css';
        
        Vue.use(ElementUI);
        
      3. 创建一个vue组件文件,组件名称后缀是.vue,并且在组件文件中编写之前介绍过的基本组件语法,

        <template>
        
        </template>
        
        <script>
        export default {
        
        }
        </script>
        
        <style>
            
        </style>
        
5.2 组件
  • Table表格

    • 组件属性:
      • data: 主要定义table组件的数据模型
      • prop: 定义列的数据应该绑定data中定义的具体的数据模型
      • label: 定义列的标题
      • width: 定义列的宽度
  • Pagination分页

    • 属性:

      • background: 添加北京颜色,也就是上图蓝色背景色效果。
      • layout: 分页工具条的布局,其具体值包含sizes, prev, pager, next, jumper, ->, total, slot 这些值
      • total: 数据的总数量
    • 事件:

      • size-change : pageSize 改变时会触发
        • current-change :currentPage 改变时会触发
  • Dialog对话框

    • 属性:
      • visible.sync :是否显示 Dialog
        • visible属性绑定的dialogTableVisble属性一开始默认是false,所以对话框隐藏;然后我们点击按钮,触发事件,修改属性值为true,然后对话框visible属性值为true,所以对话框呈现出来。
  • Form表单

<template>
    <div>
    <!-- Button按钮 -->
        <el-row>
            <el-button>默认按钮</el-button>
            <el-button type="primary">主要按钮</el-button>
            <el-button type="su***ess">成功按钮</el-button>
            <el-button type="info">信息按钮</el-button>
            <el-button type="warning">警告按钮</el-button>
            <el-button type="danger">危险按钮</el-button>
        </el-row>

        <!-- Table表格 -->
        <el-table
        :data="tableData"
        style="width: 100%">
            <el-table-column
                prop="date"
                label="日期"
                width="180">
            </el-table-column>
            <el-table-column
                prop="name"
                label="姓名"
                width="180">
            </el-table-column>
            <el-table-column
                prop="address"
                label="地址">
            </el-table-column>
        </el-table>

        <br>
        <!-- Pagination分页 -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background
            layout="sizes,prev, pager, next,jumper,total"
            :total="1000">
        </el-pagination>

        <br><br>
        <!--Dialog 对话框 -->
        <!-- Table -->
        <el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>

        <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
        <el-table :data="gridData">
            <el-table-column property="date" label="日期" width="150"></el-table-column>
            <el-table-column property="name" label="姓名" width="200"></el-table-column>
            <el-table-column property="address" label="地址"></el-table-column>
        </el-table>
        </el-dialog>

        <br><br>
        <!-- Dialog对话框-Form表单 -->
        <el-button type="text" @click="dialogFormVisible = true">打开嵌套Form的 Dialog</el-button>

        <el-dialog title="Form表单" :visible.sync="dialogFormVisible">
            
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="活动名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="活动区域">
                    <el-select v-model="form.region" placeholder="请选择活动区域">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="活动时间">
                    <el-col :span="11">
                    <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
                    </el-col>
                    <el-col class="line" :span="2">-</el-col>
                    <el-col :span="11">
                    <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
                    </el-col>
                </el-form-item>
            
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">立即创建</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
export default {
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      //表单案例的提交事件
      onSubmit() {
        console.log(this.form); //输出表单内容到控制台
        this.dialogFormVisible=false; //关闭表案例的对话框
      }
    },
     data() {
        return {
        //表单案例的数据双向绑定
        form: {
          name: '',
          region: '',
          date1: '',
          date2:''
        },
        gridData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        dialogTableVisible: false,
        dialogFormVisible: false, //控制form表单案例的对话框
        tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      }
}
</script>

<style>
</style>

5.异步加载

  • 通过import命令导入axios,代码如下:

    import axios  'axios';
    

    页面加载完成,自动加载,使用之前的mounted钩子函数,并且我们需要将得到的员工数据要展示到表格,所以数据需要赋值给数据模型tableData,所以我们编写如下代码:

     mounted(){
            axios.get("http://yapi.smart-xwork.***/mock/169327/emp/list")
            .then(resp=>{
                this.tableData=resp.data.data; //响应数据赋值给数据模型
            });
        }
    

    <template> : 用于自定义列的内容

    • slot-scope: 通过属性的row获取当前行的数据
<template>
    <div>
        <!-- 设置最外层容器高度为700px,在加上一个很细的边框 -->
        <el-container style="height: 700px; border: 1px solid #eee">
            <el-header style="font-size:40px;background-color: rgb(238, 241, 246)">tlias 智能学习辅助系统</el-header>
            <el-container>
                <el-aside width="230px"  style="border: 1px solid #eee">
                     <el-menu :default-openeds="['1', '3']">
                        <el-submenu index="1">
                            <template slot="title"><i class="el-icon-message"></i>系统信息管理</template>
                          
                            <el-menu-item index="1-1">部门管理</el-menu-item>
                            <el-menu-item index="1-2">员工管理</el-menu-item>
                          
                     
                        </el-submenu>
                     </el-menu>
                </el-aside>
                <el-main>
                    <!-- 表单 -->
                    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                        <el-form-item label="姓名">
                            <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
                        </el-form-item>
                        <el-form-item label="性别">
                            <el-select v-model="searchForm.gender" placeholder="性别">
                            <el-option label="男" value="1"></el-option>
                            <el-option label="女" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                          <el-form-item label="入职日期">
                             <el-date-picker
                                v-model="searchForm.entrydate"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">查询</el-button>
                        </el-form-item>
                    </el-form>
                    <!-- 表格 -->
                    <el-table :data="tableData">
                        <el-table-column prop="name"      label="姓名" width="180"></el-table-column>
                        <el-table-column prop="image"     label="图像" width="180">
                            <template slot-scope="scope">
                                <img :src="scope.row.image" width="100px" height="70px">
                            </template>
                        </el-table-column>
                        <el-table-column prop="gender"    label="性别" width="140">
                            <template slot-scope="scope">
                                {{scope.row.gender==1?"男":"女"}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="job"       label="职位" width="140"></el-table-column>
                        <el-table-column prop="entrydate" label="入职日期" width="180"></el-table-column>
                        <el-table-column prop="updatetime" label="最后操作时间" width="230"></el-table-column>
                        <el-table-column label="操作" >
                            <el-button type="primary" size="mini">编辑</el-button>
                            <el-button type="danger" size="mini">删除</el-button>
                        </el-table-column>
                    </el-table>

                    <!-- Pagination分页 -->
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        background
                        layout="sizes,prev, pager, next,jumper,total"
                        :total="1000">
                    </el-pagination>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import axios  'axios'
export default {
     data() {
      return {
        tableData: [
           
        ],
        searchForm:{
            name:'',
            gender:'',
            entrydate:[]
        }
      }
    },
    methods:{
        onSubmit:function(){
            console.log(this.searchForm);
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        }
    },
    mounted(){
        axios.get("http://yapi.smart-xwork.***/mock/169327/emp/list")
        .then(resp=>{
            this.tableData=resp.data.data;
        });
    }
}
</script>

<style>

</style>

6.路由

  • 前端路由:URL中的hash(#号之后的内容)与组件之间的对应关系,

  • vue官方提供了路由插件Vue Router,其主要组成如下:

    • VueRouter:路由器类,根据路由请求在路由视图中动态渲染选中的组件

    • <router-link>:请求链接组件,浏览器会解析成<a>

    • <router-view>:动态视图组件,用来渲染展示与路由路径对应的组件

  • 原理:

    • VueRouter根据我们配置的url的hash片段和路由的组件关系去维护一张路由表;

      然后我们页面提供一个组件,用户点击,发出路由请求;

      接着我们的VueRouter根据路由请求,在路由表中找到对应的vue组件;

      最后VueRouter会切换中的组件,从而进行视图的更新

  • 使用步骤:

    • src/router/index.js文件中定义路由表,根据其提供的模板代码进行修改
    • 在main.js中,引入了router功能
    • 路由基本信息配置好了,路由表已经被加载,修改页面按钮为router-link
    • 在内容展示区域即App.vue中定义route-view,作为组件的切换

4.Ajax

1.Ajax

  • Ajax: 全称Asynchronous JavaScript And XML,异步的JavaScript和XML。其作用有如下2点:

    • 与服务器进行数据交换:通过Ajax可以给服务器发送请求,并获取服务器响应的数据。
    • 异步交互:可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术,如:搜索联想、用户名是否可用的校验等等。
  • 数据交互作用:

    • 前端可以通过Ajax技术,向后台服务器发起请求,后台服务器接受到前端的请求,从数据库中获取前端需要的资源,然后响应给前端,前端在通过我们学习的vue技术,可以将数据展示到页面上。
  • 异步交互:

    • 在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术。
  • 同步:

    • 浏览器页面在发送请求给服务器,在服务器处理请求的过程中,浏览器页面不能做其他的操作。只能等到服务器响应结束后才能,浏览器页面才能继续做其他的操作。
  • 异步:

    • 浏览器页面发送请求给服务器,在服务器处理请求的过程中,浏览器页面还可以做其他的操作。
  • 客户端Ajax请求代码的步骤:

    • 第一步:创建.html的文件,提供如下代码,主要是按钮绑定单击事件,我们希望点击按钮,来发送ajax请求

      <body>
          
          <input type="button" value="获取数据" onclick="getData()">
      
          <div id="div1"></div>
          
      </body>
      <script>
          function getData(){
           
          }
      </script>
      </html>
      

      第二步:创建XMLHttpRequest对象,用于和服务器交换数据,也是原生Ajax请求的核心对象,提供了各种方法。代码如下:

      //1. 创建XMLHttpRequest 
      var xmlHttpRequest  = new XMLHttpRequest();
      

      第三步:调用对象的open()方法设置请求的参数信息,例如请求地址,请求方式。然后调用send()方法向服务器发送请求,代码如下:

      //2. 发送异步请求
      xmlHttpRequest.open('GET','http://yapi.smart-xwork.***/mock/169327/emp/list');
      xmlHttpRequest.send();//发送请求
      

      第四步:我们通过绑定事件的方式,来获取服务器响应的数据。

      //3. 获取服务响应数据
      xmlHttpRequest.onreadystatechange = function(){
          //此处判断 4表示浏览器已经完全接受到Ajax请求得到的响应, 200表示这是一个正确的Http请求,没有错误
          if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
              document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;
          }
      }
      

2.Axios

  • Axios是对原生的AJAX进行封装,简化书写。

  • 基本使用:

    • 引入Axios文件

      <script src="js/axios-0.18.0.js"></script>
      
    • 使用Axios发送请求,并获取响应结果,官方提供的api很多,此处给出2种,如下

      • 发送 get 请求

        axios({
            method:"get",
            url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan"
        }).then(function (resp){
            alert(resp.data);
        })
        
      • 发送 post 请求

        axios({
            method:"post",
            url:"http://localhost:8080/ajax-demo1/aJAXDemo1",
            data:"username=zhangsan"
        }).then(function (resp){
            alert(resp.data);
        });
        

      axios()是用来发送异步请求的,小括号中使用 js的JSON对象传递请求相关的参数:

      • method属性:用来设置请求方式的。取值为 get 或者 post。
      • url属性:用来书写请求的资源路径。如果是 get 请求,需要将请求参数拼接到路径的后面,格式为: url?参数名=参数值&参数名2=参数值2。
      • data属性:作为请求体被发送的数据。也就是说如果是 post 请求的话,数据需要作为 data 属性的值。

      then() 需要传递一个匿名函数。我们将 then()中传递的匿名函数称为 回调函数,意思是该匿名函数在发送请求时不会被调用,而是在成功响应后调用的函数。而该回调函数中的 resp 参数是对响应的数据进行封装的对象,通过 resp.data 可以获取到响应的数据。

  • 请求方法别名:

    • Axios还针对不同的请求,提供了别名方式的api,具体如下:

      方法 描述
      axios.get(url [, config]) 发送get请求
      axios.delete(url [, config]) 发送delete请求
      axios.post(url [, data[, config]]) 发送post请求
      axios.put(url [, data[, config]]) 发送put请求

      可以将get请求代码改写成如下:

      axios.get("http://yapi.smart-xwork.***/mock/169327/emp/list").then(result => {
          console.log(result.data);
      })
      

      post请求改写成如下:

      axios.post("http://yapi.smart-xwork.***/mock/169327/emp/deleteById","id=1").then(result => {
          console.log(result.data);
      })
      
转载请说明出处内容投诉
CSS教程_站长资源网 » Javaweb-前端部分

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买