2021最新版黑马程序员JavaWeb笔记(适合看过一遍视频)[持续更新]

小提示:不清楚的图片,电脑点击图片放大观看,超级清晰哦（持续更新，收藏不迷路哦）

第二章 JDBC

JDBC简介

JDBCAPI详解

DriverManager

Connection

Statement

ResultSet

PreparedStatement

数据库连接池

JDBC练习

环境准备

查询所有

package com.itheima.example;

import com.alibaba.druid.pool.DruidDataSourceFactory;
import com.itheima.pojo.Brand;
import org.junit.Test;

import javax.sql.DataSource;
import java.io.FileInputStream;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import java.util.Properties;

/**
 * 品牌数据的测试操作
 */
public class BrandTest {
    /**
     * 查询所有
     * 1.sql:select * from tb_brand;
     * 2.参数:不需要
     * 3.结果:List
     */
    @Test
    public void testSelectAll() throws Exception {
        // 1.获取Connection

        // 3.加载配置文件
        Properties prop = new Properties();
        prop.load(new FileInputStream(("C:\\Users\\SolomonDarren\\IdeaProjects\\JDBC\\jdbc-demo\\src\\druid.properties")));
        // 4.获取连接池对象
        DataSource dataSource = DruidDataSourceFactory.createDataSource(prop);
        // 5.获取数据库连接 Connection
        Connection connection = dataSource.getConnection();
        System.out.println(connection);
        // 2.定义sql
        String sql = "select * from tb_brand";
        // 3.获取prestmt对象
        PreparedStatement prestmt = connection.prepareStatement(sql);
        // 4.设置参数
        // 5.执行sql
        ResultSet resultSet = prestmt.executeQuery();

        // 6.处理结果List 封装Brand对象,装载List集合
        Brand brand = null;
        List<Brand> brands = new ArrayList<>();
        while (resultSet.next()) {
            // 获取数据
            int id = resultSet.getInt("id");
            String brandName = resultSet.getString("brand_name");
            String companyName = resultSet.getString("company_name");
            int ordered = resultSet.getInt("ordered");
            String description = resultSet.getString("description");
            int status = resultSet.getInt("status");
            //封装Brand对象
            brand = new Brand();
            brand.setId(id);
            brand.setBrandName(brandName);
            brand.setCompanyName(companyName);
            brand.setOrdered(ordered);
            brand.setDescription(description);
            brand.setStatus(status);
            //装载集合
            brands.add(brand);
        }
        System.out.println(brands);
        // 7.释放资源
        resultSet.close();
        prestmt.close();
        connection.close();
    }
}

添加

    /**
     * 添加
     * 1.sql:insert into tb_brand(brand_name,company_name,ordered,descripton,status)values(?,?,?,??);
     * 2.参数:除了id之外的所有信息
     * 3.结果:Boolean
     * @throws Exception
     */
    @Test
    public void testAdd() throws Exception {
        // 接收页面提交的参数
        String brandName = "香飘飘";
        String companyName = "香飘飘";
        int ordered = 1;
        String description = "绕地球一圈";
        int status = 1;

        // 1.获取Connection

        // 3.加载配置文件
        Properties prop = new Properties();
        prop.load(new FileInputStream(("C:\\Users\\SolomonDarren\\IdeaProjects\\JDBC\\jdbc-demo\\src\\druid.properties")));
        // 4.获取连接池对象
        DataSource dataSource = DruidDataSourceFactory.createDataSource(prop);
        // 5.获取数据库连接 Connection
        Connection connection = dataSource.getConnection();
        System.out.println(connection);
        // 2.定义sql
        String sql = "insert into tb_brand(brand_name,company_name,ordered,description,status)values(?,?,?,?,?);";
        // 3.获取prestmt对象
        PreparedStatement prestmt = connection.prepareStatement(sql);
        // 4.设置参数
        prestmt.setString(1,brandName);
        prestmt.setString(2,companyName);
        prestmt.setInt(3,ordered);
        prestmt.setString(4,description);
        prestmt.setInt(5,status);
        // 5.执行sql
        int count = prestmt.executeUpdate();
        // 6.处理结果
        System.out.println(count > 0);
        // 7.释放资源
        prestmt.close();
        connection.close();
    }

修改

    /**
     * 修改
     * 1.sql:
     update tb_brand
         set brand_name = ?,
         company_name = ?,
         ordered = ?,
         description = ?,
         status = ?
     where id = ?
     * 2.参数:需要,所有数据
     * 3:返回结果:Boolean
     * @throws Exception
     */
 @Test
    public void testUpdate() throws Exception {
        // 接收页面提交的参数
        String brandName = "香飘飘";
        String companyName = "香飘飘";
        int ordered = 1000;
        String description = "绕地球三圈";
        int status = 1;
        int id = 5;
        // 1.获取Connection

        // 3.加载配置文件
        Properties prop = new Properties();
        prop.load(new FileInputStream(("C:\\Users\\SolomonDarren\\IdeaProjects\\JDBC\\jdbc-demo\\src\\druid.properties")));
        // 4.获取连接池对象
        DataSource dataSource = DruidDataSourceFactory.createDataSource(prop);
        // 5.获取数据库连接 Connection
        Connection connection = dataSource.getConnection();
        System.out.println(connection);
        // 2.定义sql
        String sql = "update tb_brand set " +
                "brand_name = ?," +
                "company_name = ?," +
                "ordered = ?," +
                "description = ?," +
                "status = ?" +
                " where id = ?";
/*
        String sql = "    update tb_brand\n" +
                "         set brand_name = ?,\n" +
                "         company_name = ?,\n" +
                "         ordered = ?,\n" +
                "         description = ?,\n" +
                "         status = ?\n" +
                "     where id = ?";
*/


        // 3.获取prestmt对象
        PreparedStatement prestmt = connection.prepareStatement(sql);
        // 4.设置参数
        prestmt.setString(1,brandName);
        prestmt.setString(2,companyName);
        prestmt.setInt(3,ordered);
        prestmt.setString(4,description);
        prestmt.setInt(5,status);
        prestmt.setInt(6,id);
        // 5.执行sql
        int count = prestmt.executeUpdate();
        // 6.处理结果
        System.out.println(count > 0);
        // 7.释放资源
        prestmt.close();
        connection.close();
    }

删除

    /**
     * 删除
     * 1.sql:
        delete from tb_brand where id = ?
     * 2.参数:需要id
     * 3:返回结果:Boolean
     * @throws Exception
     */
    @Test
    public void testDelete() throws Exception {
        // 接收页面提交的参数
        int id = 5;
        // 1.获取Connection

        // 3.加载配置文件
        Properties prop = new Properties();
        prop.load(new FileInputStream(("C:\\Users\\SolomonDarren\\IdeaProjects\\JDBC\\jdbc-demo\\src\\druid.properties")));
        // 4.获取连接池对象
        DataSource dataSource = DruidDataSourceFactory.createDataSource(prop);
        // 5.获取数据库连接 Connection
        Connection connection = dataSource.getConnection();
        System.out.println(connection);
        // 2.定义sql
        String sql = "delete from tb_brand where id = ?";
/*
        String sql = "    update tb_brand\n" +
                "         set brand_name = ?,\n" +
                "         company_name = ?,\n" +
                "         ordered = ?,\n" +
                "         description = ?,\n" +
                "         status = ?\n" +
                "     where id = ?";
*/


        // 3.获取prestmt对象
        PreparedStatement prestmt = connection.prepareStatement(sql);
        // 4.设置参数
        prestmt.setInt(1,id);
        // 5.执行sql
        int count = prestmt.executeUpdate();
        // 6.处理结果
        System.out.println(count > 0);
        // 7.释放资源
        prestmt.close();
        connection.close();
    }

Maven

简介

Maven安装配置

基本使用

idea配置Maven

idea创建maven项目

idea导入maven项目

依赖管理

依赖范围

Mybatis

简介

快速入门

解决sql语句警告提示

Mapper代理开发

mybatis核心配置文件

Mabatis案例环境准备

查询所有

查询详情

条件查询

    @Test
    public void testSelectById() throws IOException {
        int status = 1;
        String companyName = "华为";
        String brandName = "华为";
        companyName = "%" + companyName + "%";
        brandName = "%" + brandName + "%";

/*        Brand brand = new Brand();
        brand.setStatus(status);
        brand.setCompanyName(companyName);
        brand.setBrandName(brandName);*/
        
        Map map = new HashMap();
        map.put("status", status);
        map.put("companyName", companyName);
        map.put("brandName", brandName);
        
        // 1.获取sqlSessionFactory对象
        String resource = "mybatis-config.xml";
        InputStream inputStream = Resources.getResourceAsStream(resource);
        SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
        // 2.获取SQLSession
        SqlSession sqlSession = sqlSessionFactory.openSession();
        // 3.获取mapper接口的代理对象
        BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
        // 4.执行方法
        List<Brand> brands = mapper.selectByCondition(map);
        System.out.println(brands);
        sqlSession.close();
    }

动态条件查询

添加

修改

删除

参数传递

注解开发

HTML

介绍

基础标签

DOCTYPE html>
<html lang="en">
<head>
    
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<h1>我是标题h1>
<h2>我是标题h2>
<h3>我是标题h3>
<h4>我是标题h4>
<h5>我是标题h5>
<h6>我是标题h6>
<hr>
<font face="宋体" size="8" color="#5f9ea0">传智教育font>
<hr>
<p>
    可能放在这个问题下面，大家看了很多美女觉得也就一般般，<br>
    读了大学之后认识的女孩子里比她漂亮的也不是没有，但她就是中学时代校园里最耀眼的那个女孩子。
p>
<hr>
<b>可能放在这个问题下面，大家看了很多美女觉得也就一般般，读了大学之后认识的女孩子里比她漂亮的也不是没有，但她就是中学时代校园里最耀眼的那个女孩子。b><br>
<i>可能放在这个问题下面，大家看了很多美女觉得也就一般般，读了大学之后认识的女孩子里比她漂亮的也不是没有，但她就是中学时代校园里最耀眼的那个女孩子。i><br>
<u>可能放在这个问题下<>  & "  ® © ™   ，读了大学之后认识的女孩子里比她漂亮的也不是没有，但她就是中学时代校园里最耀眼的那个女孩子。u><br>
<center><b>shashib>center>
body>
html>

图片音频视频标签

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<img src="a.jpg" width="200" height="400">
<img src="https://picx.zhimg.com/v2-1951124acb7f4cb5e6de6225ed03e089_r.jpg?source=1940ef5c">
<audio src="b.mp3" controls>audio>
<video src="c.mp4" controls width="500" height="300">video>
body>
html>

超链接标签

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<a href="http://www.baidu.com" target="_blank">baiduddda>
<ol type="A">
    <li>咖啡li>
    <li>牛奶li>
    <li>茶li>
ol>
<ul>
    <li>咖啡li>
    <li>牛奶li>
    <li>茶li>
ul>
body>
html>

列表标签

表格标签

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<table border="1" cellspacing="0" width="500">
  <tr>
      <th>序号th>
      <th>品牌logoth>
      <th>品牌名称th>
      <th>企业名称th>
  tr>
  <tr align="center">
      <td>010td>
      <td>
          <img src="../img/三只松鼠.png" width="60" height="50">
      td>
      <td>三只松鼠td>
      <td>三只松鼠td>
  tr>
    <tr align="center">
        <td>009td>
        <td>
            <img src="../img/优衣库.png" width="60" height="50">
        td>
        <td>优衣库td>
        <td>优衣库td>
    tr>
    <tr align="center">
        <td>008td>
        <td>
            <img src="../img/小米.png" width="60" height="50">
        td>
        <td>小米td>
        <td>小米科技有限公司td>
    tr>
table>
<hr>
<table border="1" cellspacing="0" width="500">
    <tr>
        <th colspan="2">品牌logoth>
        <th>品牌名称th>
        <th>企业名称th>
    tr>
    <tr align="center">
        <td>010td>
        <td>
            <img src="../img/三只松鼠.png" width="60" height="50">
        td>
        <td>三只松鼠td>
        <td>三只松鼠td>
    tr>
    <tr align="center">
        <td rowspan="2">009td>
        <td>
            <img src="../img/优衣库.png" width="60" height="50">
        td>
        <td>优衣库td>
        <td>优衣库td>
    tr>
    <tr align="center">
        <td>
            <img src="../img/小米.png" width="60" height="50">
        td>
        <td>小米td>
        <td>小米科技有限公司td>
    tr>
table>
<div>我是divdiv>
<div>woshidivdiv>
<span>我是spanspan>
<span>我是spanspan>
body>
html>

布局标签

表单标签

表单项标签

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<form action="#" method="post">
    <input type="hidden" name="id" value="123">
    <label for="username">用户名:label>
    <input type="text" name="username" id="username"><br>
    <label for="password">密码:label>
    <input type="password" name="password" id="password"><br>
    <br>
    性别:
    <input type="radio" name="gender" value="1" id="male"><label for="male">男label>
    <input type="radio" name="gender" value="2" id="female"><label for="female">女label>
    <br>
    爱好:
    <input type="checkbox" name="hobby" value="1" id="ly"><label for="ly">旅游label>
    <input type="checkbox" name="hobby" value="2" id="dy"><label for="dy">电影label>
    <input type="checkbox" name="hobby" value="3" id="yx"><label for="yx">游戏label>
    <br>
    <input type="file">
    <br>
    城市:
    <select>
        <option>北京option>
        <option>香港option>
        <option>上海option>
    select>
    <br>
    个人描述:
    <textarea cols="5" rows="6" name="desc">textarea>
    <br>
    <input type="submit" value="免费注册">
    <input type="reset" value="重置">
    <input type="button" value="普通按钮">
form>
body>
html>

CSS

简介

CSS导入方式

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        span{
            color: red;
        }
    style>

    <link href="../css/demo.css" rel="stylesheet">
head>
<body>
<div style="color: red">hello cssdiv>

<span>hello cssspan>

<p>hello cssp>
body>
html>

CSS选择器

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        div{
            color: red;
        }
        #name{
            color: blue;
        }
        .cls{
            color: pink;
        }
        span{

        }
    style>
head>
<body>
<div>div1div>
<div id="name">div2div>
<div class="cls">div3div>

<span class="cls">spanspan>
body>
html>

JavaScript

简介

引入方式

书写语法

输出语句

变量

数据类型

运算符

流程控制语句

函数

JavaScript对象

Array

String

自定义对象

BOM对象

Window

History

Location

DOM

Element对象

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<img id="light" src="../imgs/off.gif"> <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"> 游戏
<br>

<script>
    //1. getElementById：根据id属性值获取，返回一个Element对象
    var img = document.getElementById("light");
    // alert(img);
    img.src = "../imgs/on.gif";

    //2. getElementsByTagName：根据标签名称获取，返回Element对象数组
    var divs = document.getElementsByTagName("div");
    /*
        style:设置元素css样式
        innerHTML：设置元素内容
    */

    for (let i = 0; i < divs.length; i++) {
        //divs[i].style.color = 'red';
        divs[i].innerHTML = "呵呵";
        alert(divs.length)
    }

    //3. getElementsByName：根据name属性值获取，返回Element对象数组
    var hobbys = document.getElementsByName("hobby");
    for (let i = 0; i < hobbys.length; i++) {
        //alert(hobbys[i]);
        hobbys[i].checked = true;
    }

    //4. getElementsByClassName：根据class属性值获取，返回Element对象数组

    var clss = document.getElementsByClassName("cls");
    /*for (let i = 0; i < clss.length; i++) {
        alert(clss[i]);

    }*/



script>
body>
html>

事件监听

表单验证

正则表达式

web核心介绍

HTTP

HTTP简介

请求数据格式

Tomcat

简介

基本使用

web项目结构

创建mavenWeb项目

idea中使用Tomcat

Tomcat的maven插件

Servlet

简介

快速入门

执行流程

生命周期

方法介绍

体系结构

urlPatten配置

XML配置servlet

Request和Response

继承体系

Request获取请求数据

通用方式获取请求参数

@WebServlet("/req2")
public class RequestDemo2  extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("get....");
        Map<String, String[]> parameterMap = req.getParameterMap();
        for (String key : parameterMap.keySet()) {
            System.out.print(key + ":");
            String[] values = parameterMap.get(key);
            for (String value : values) {
                System.out.print(value + " ");
            }
            System.out.println();
        }
        String[] hobbies = req.getParameterValues("hobby");
        for (String hobby : hobbies) {
            System.out.println(hobby);
        }
        String parameter = req.getParameter("username");
        String password = req.getParameter("password");
        System.out.println(parameter);
        System.out.println(password);

    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doGet(req,resp);
    }
}

idea模板创建servlet

请求参数中文乱码

Request请求转发

Response对象

Response设置相应数据功能介绍

Response完成重定向

资源路径问题

Response响应字符数据

Response响应字节数据

案例

用户登录

package com.itheima.web;

import com.itheima.mapper.UserMapper;
import com.itheima.pojo.User;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;

@WebServlet("/loginServlet")
public class LoginServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");
        String password = request.getParameter("password");

        String resource = "mybatis-config.xml";
        InputStream inputStream = Resources.getResourceAsStream(resource);
        SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);

        SqlSession sqlSession = sqlSessionFactory.openSession();
        UserMapper mapper = sqlSession.getMapper(UserMapper.class);
        User user = mapper.select(username, password);

        sqlSession.close();

        response.setContentType("text/html;charset=utf-8");
        PrintWriter writer = response.getWriter();
        if (user != null) {
            writer.write("登陆成功");
        } else {
            writer.write("登录失败");
        }
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

用户注册

package com.itheima.web;

import com.itheima.mapper.UserMapper;
import com.itheima.pojo.User;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.io.InputStream;

@WebServlet("/registerServlet")
public class RegisterServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");
        String password = request.getParameter("password");

        User user = new User();
        user.setUsername(username);
        user.setPassword(password);

        String resource = "mybatis-config.xml";
        InputStream inputStream = Resources.getResourceAsStream(resource);
        SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);

        SqlSession sqlSession = sqlSessionFactory.openSession();
        UserMapper userMapper = sqlSession.getMapper(UserMapper.class);

        User user1 = userMapper.selectByUsername(username);

        if (user1 == null) {
            userMapper.add(user);
            sqlSession.commit();
            sqlSession.close();
        } else {
            response.setContentType("text/html;charset=utf-8");
            response.getWriter().write("用户名已存在");
        }

    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

SqlSessionFactory工具类抽取

package com.itheima.util;

import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;

import java.io.IOException;
import java.io.InputStream;

public class SqlSessionFactoryUtils {
    private static SqlSessionFactory sqlSessionFactory;
    static {
        try {
            String resource = "mybatis-config.xml";
            InputStream inputStream = Resources.getResourceAsStream(resource);
            sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
        } catch (IOException e) {
            throw new RuntimeException(e);
        }
    }
    public static SqlSessionFactory getSqlSessionFactory(){
        return sqlSessionFactory;
    }
}

JSP

简介

快速入门

原理

JSP缺点

EL表达式

JSTL标签

<%--
  Created by IntelliJ IDEA.
  User: SolomonDarren
  Date: 2022/6/21
  Time: 21:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<input type="button" value="新增"><br>
<hr>
<table border="1" cellspacing="0" width="800">
    <tr>
        <th>序号th>
        <th>品牌名称th>
        <th>企业名称th>
        <th>排序th>
        <th>品牌介绍th>
        <th>状态th>
        <th>操作th>

    tr>

    <c:forEach items="${brands}" var="brand" varStatus="status">
    <tr align="center">
<%--        <td>${brand.id}td>--%>
        <td>${status.index}td>
        <td>${brand.brandName}td>
        <td>${brand.companyName}td>
        <td>${brand.ordered}td>
        <td>${brand.description}td>
        <c:if test="${brand.status == 1}">
            <td>启用td>
        c:if>
        <c:if test="${brand.status == 0}">
            <td>禁用td>
        c:if>
        <td><a href="#">修改a> <a href="#">删除a>td>
    tr>
    c:forEach>


table>
<hr>
<c:forEach begin="0" end="10" step="1" var="i">
    <a href = "#">${i}<a>
c:forEach>
body>
html>

MVC模式

案例

会话跟踪技术

概述

基本使用

原理

汉字

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String value = "张三";
        value = URLEncoder.encode(value, "UTF-8");
        Cookie cookie = new Cookie("username", value);
        cookie.setMaxAge(60*60*24*7);
        response.addCookie(cookie);

    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        Cookie[] cookies = request.getCookies();
        for (Cookie cookie : cookies) {
            String name = cookie.getName();
            if ("username".equals(name)) {
                String value = cookie.getValue();
                value = URLDecoder.decode(value, "UTF-8");
                System.out.println(name + ":" + value);
                break;
            }
        }
    }

Session

基本使用

原理

使用细节

小结

案例

Filter

概述

快速入门

执行流程

拦截路径

过滤器链

案例

Listener

AJAX

概述

同步和异步

AJAX快速入门

Axios

JSON

JSON数据和Java对象转换

Vue

快速入门

常用指令

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>

<div id="app">
  <input name = "username" v-model="username">
  {{ username }}
div>
<script src="js/vue.js">script>

<script>
    new Vue({
      el:'#app',
      data:{
        username:"dd",
        name:"dd"
      }
    });
script>
body>
html>

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
head>
<body>

<div id="app">
  <a v-bind:href="url">点击一下a>
div>

<script src="js/vue.js">script>
<script>
new Vue({
  el: "#app",
  data(){
    return{
      username: "",
      url:"https://www.baidu.com"
    }
  }
})
script>
body>
html>

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
head>
<body>
<div id="app">
  <div v-if="count == 1">div1div>
  <div v-else-if="count == 2">div2div>
  <div v-else>div3div>
  <hr>
  <div v-show="count == 3">div v-showdiv>
  <br>
  <input v-model="count">

div>
<script src="js/vue.js">script>
<script>
new Vue({
  el: "#app",
  data(){
    return{
      username: "",
      url:"https://www.baidu.com",
      count:3
    }
  },
  methods:{
    show(){
      alert("我被点了");
    }
  }
});
script>
body>
html>

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
head>
<body>
<div id="app">
  <div v-for="addr in addrs">
    {{addr}} <br>
  div>
  <div v-for="(addr,i) in addrs">
    {{i + 1}}--{{addr}} <br>
  div>
div>
<script src="js/vue.js">script>
<script>
new Vue({
  el: "#app",
  data(){
    return{
      username: "",
      url:"https://www.baidu.com",
      count:3,
      addrs:["北京","上海","西安"]
    }
  },
  methods:{
    show(){
      alert("我被点了");
    }
  }
});
script>
body>
html>

生命周期

Element

快速入门

Element布局