第一章.正则表达式
第二章.VUE框架
第三章.书城项目
- 1.完成目标
- 2.具体步骤
  - 2.1 登录页面校验
  - 2.2 注册页面校验

第一章.正则表达式

1.正则表达式概念

正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。用我们自己的话来说: **正则表达式用来校验字符串是否满足一定的规则的公式

表达式	描述
[a-z]	这个字符必须是小写字母 a
[abc]	字符必须是abc z
[0-9]	这个字符必须是数字 5 a
[a-zA-Z0-9]	这个字符必须是字母或者是数字 [a-zA-Z0-9]
[^a-z]	这个字符不是小写字母
[\d]	等同于[0-9]
[\w]	等同于[a-zA-Z_0-9] 字母、数字、下划线
[\D]	等同于`[^0-9]`
[\W]	等同于`[^a-zA-Z0-9_]`
.	代表匹配任意字符，若只是想代表普通数据`.` 需要使用转义字符来表示`\\.`
X*	X这个字符可以出现零次或者多次 [0-9]*
X?	X这个字符可以出现零次或者一次 [0-9] ?
X+	X这个字符可以出现一次或者多次 [0-9] +
X{m}	X这个字符出现次数正好m次 [0-9]{4}
X{m, }	X这个字符出现次数至少m次 [0-9]{4, }
X{m, n}	X这个字符出现次数至少m次,最多n次 [0-9]{3,5}
(X)+	()括号代表X所表示的内容作为一组数据出现；()括号后面的+号，代表这组数据可以出现一次或者多次 (abc)+ —>代表的是abc可以连续出现一次或多次 abcabcabc abcbacabc
^X	^匹配开头
X$	$匹配结尾

2.正则表达式的创建和使用

方式1:
  var reg = /^pattern$/; //JS中,定义正则表达式规则 写在//之间
方式2:
  var reg = new RegExp("^pattern$"); //JS中,定义正则表达式规则 写在()之内

方法:
  test("字符串")--> 判断填写的字符串是否符合正则表达式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>正则表达式</title>
</head>
<body>
  <script>
      //要求: 手机号,验证格式 13800138000
      // 1开头  第二位 3456789  第3--11位必须数字
      //JS中,定义正则表达式规则  定义在 /规则/ 内部
      //方式1:
       var regExp = /^1[3456789][0-9]{9}$/;

       let b = regExp.test("13888888888");
       document.write(b+"<br/>");

      //需求: 验证用户名, 验证格式 字母,数字,下划线组成,长度6-8位
      //方式2:
      var regExp01 = new RegExp("^[a-zA-Z0-9_]{6,8}$");
      var b1 = regExp01.test("111111");
      document.write(b1+"<br/>");

  </script>
</body>
</html>

3.模糊匹配和精确匹配

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模糊匹配和准确匹配</title>

</head>
<body>
<script>
    let regExp1 = /abcd/;
    var result01 = regExp1.test("abcde");
    document.write(result01+"<br/>");//true

    let regExp2 = /^abcd$/;
    var result02 = regExp2.test("abcde");
    document.write(result02);//false

</script>
</body>
</html>

4.正则表达式匹配模式

方式1:new RegExp("正则","匹配模式")

方式2:/正则/匹配模式

匹配模式:
  第二个参数:i  忽略大小写比较

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>正则匹配模式</title>
</head>
<body>

</body>
<script>
   /*
     new RegExp("正则","匹配模式")

    /正则/匹配模式

    匹配模式:
    第二个参数:i  忽略大小写比较
    */

   let reg = new RegExp("cat","i");
   document.write(reg.test("CAT")+"<br/>");//true


    let reg1 = /cat/i;
   document.write(reg1.test("CAT")+"<br/>");//true
</script>
</html>

5.正则表达式_字符集

    正则表达式-字符类:[]表示一个区间,范围可以自己定义
        语法示例：
        1. [abc]：代表a或者b，或者c字符中的一个。
        2. [^abc]：代表除a,b,c以外的任何字符。
        3. [a-z]：代表a-z的所有小写字符中的一个。
        4. [A-Z]：代表A-Z的所有大写字符中的一个。
        5. [0-9]：代表0-9之间的某一个数字字符。
        6. [a-zA-Z0-9]：代表a-z或者A-Z或者0-9之间的任意一个字符。
        7. [a-dm-p]：a 到 d 或 m 到 p之间的任意一个字符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式字符类</title>

</head>
<body>
<script>
    let regExp3 = /abcd/;
    var result04 = regExp3.test("abcde");
    document.write(result04);

    //2.验证字符串是否以h开头,d结尾,中间是aeiou的某一个字符
    let regExp = /^h[aeiou]d$/
    var result01 = regExp.test("had");
    document.write(result01 + "<br/>");
    //3.验证字符串是否以h开头,d结尾,中间不是aeiou中的某一个字符
    let regExp1 = /h[^aeiou]d/;
    var result02 = regExp1.test("hid");
    document.write(result02)
    //4.验证字符串是否a-z任何一个小写字母开头,后面是ad
    let regExp2 = /[a-z][a][d]/;
    var result03 = regExp2.test("aad");
    document.write(result03);

</script>
</body>
</html>

6.正则表达式_逻辑运算符

 正则表达式-逻辑运算符
        语法示例：
        1. | ：或者

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式_逻辑运算符</title>

</head>
<body>
<script>
    //要求字符串是aeiou中的某一个字母开头,后跟ad
    let regExp1 = /^[a|e|i|o|u][a][d]$/;
    var result01 = regExp1.test("aad");
    document.write(result01);
</script>
</body>
</html>

7.正则表达式_预定义字符

 正则表达式-预定义字符
    语法示例：
    1. "." ： 匹配任何字符。(重点)
    2. "\d"：任何数字[0-9]的简写；(重点)
    3. "\D"：任何非数字[^0-9]的简写；
    4. "\s"： 空白字符：[ \t\n\x0B\f\r] 的简写
    5. "\S"： 非空白字符：[^\s] 的简写
    6. "\w"：单词字符：[a-zA-Z_0-9]的简写(重点)
    7. "\W"：非单词字符：[^\w]
 注意:^ 匹配字符串的开始，但在[]中使用表示取反

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式_预定义字符</title>

</head>
<body>
<script>
    //1.验证字符串是否是三位数字
    let regex1 = /^\d\d\d$/;
    var result01 = regex1.test("111");
    document.write(result01+"<br/>");//true

    //2.验证手机号:1开头;第二位3  5  8  整下的9位都是0-9的数字
    let regex2 = /^[1][358]\d\d\d\d\d\d\d\d\d$/;
    let result02 = regex2.test("15010878700");
    document.write(result02+"<br/>");//true

    //3.验证字符串是否以h开头,以d结尾,中间是任何一个字符
    let regex3 = /^[h].[d]$/;
    var result03 = regex3.test("had");
    document.write(result03+"<br/>");//true
</script>
</body>
</html>

8.正则表达式_数量词

 正则表达式-数量词
        语法示例：x代表字符
        1. X? : x出现的数量为 0次或1次
        2. X* : x出现的数量为 0次到多次 任意次
        3. X+ : x出现的数量为 1次或多次 X>=1次
        4. X{n} : x出现的数量为 恰好n次 X=n次
        5. X{n,} : x出现的数量为 至少n次 X>=n次  x{3,}
        6. X{n,m}: x出现的数量为 n到m次(n和m都是包含的)   n=<X<=m

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式_数量词</title>

</head>
<body>
<script>
    //1.验证字符串是否是3个数字
    // let regex1 = /^\d{3}$/
    let regex1 = /^[0-9]{3}$/
    var result01 = regex1.test("111");
    document.write(result01+"<br/>");

    //2.验证字符串是否为多个数字:1个以上
    let regex2 = /^\d+$/;
    var result02 = regex2.test("");
    document.write(result02+"<br/>");

    //3.验证手机号:1开头;第二位3  5  8  整下的9位都是0-9的数字
    let regex3 = /^[1][358][0-9]{9}$/;
    let result03 = regex3.test("15010878111");
    document.write(result03+"<br/>");

    //4.验证QQ号:第一位不能为0   5-15位   全部都是数字
    let regex4 = /^[1-9][0-9]{4,14}$/;
    let result04 = regex4.test("1111111");
    document.write(result04+"<br/>");
</script>
</body>
</html>

9.常用正则表达式

需求	正则表达式	含义
用户名	/[1] [a-zA-Z_-0-9]{5,9}$/	只能以字母或者’‘开头，后面的内容可以是字母、数字、’‘、’-‘都行，整个字符串只能有6-10位
密码	/[2] {6,12}$/	密码只能由字母、数字、’_’、’-‘、’@’、’#’、’’、’&’、’*’组成，总共是6-12位
前后空格	/^\s+\|\s+$/g	匹配开头的空格或者结尾的空格
电子邮箱	/[3] +@([a-zA-Z0-9-]+[.]{1})+[a-zA-Z]+$/	多个字母、数字、’.’、’-‘加上@多个数字、字母、’-‘再加上’.’再加上多个字母

10.生成正则表达式网站

https://www.sojson.com/regex/generate

第二章.VUE框架

1.vue框架介绍

1.VUE作者介绍:

  在为AngularJS工作之后，Vue的作者尤雨溪搞Vue.js。他声称自己的思路是提取Angular中自己喜欢的部分，构建出一款相当轻量的框架。

  Vue最早发布于2014年2月。作者在Hacker News、Echo JS与 Reddit的JavaScript版块发布了最早的版本。一天之内，Vue 就登上了这三个网站的首页。

  Vue是Github上最受欢迎的开源项目之一。同时，在JavaScript框架/函数库中， Vue所获得的星标数已超过React，并高于Backbone.js、Angular 2、jQuery等项目。

2.VUE官网介绍:

  Vue (读音 /vjuː/，类似于**view**) 是一套用于构建用户界面的**渐进式框架**。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。

  Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

  另一方面，当与[现代化的工具链](https://cn.vuejs.org/v2/guide/single-file-components.html)以及各种[支持类库](https://github.com/vuejs/awesome-vue#libraries--plugins)结合使用时，

  Vue 也完全能够为复杂的单页应用提供驱动。

官网地址:https://cn.vuejs.org/

现代化工具链:https://cn.vuejs.org/v2/guide/single-file-components.html

vue支持类库:https://github.com/vuejs/awesome-vue#libraries—plugins

2.vue环境搭建

1. Vue框架的js文件获取
   官网提供的下载地址：https://cdn.jsdelivr.net/npm/vue/dist/vue.js

2. 创建空vue.js文件,将官网提供的vue.js文件的内容复制粘贴到本地vue.js文件中

3.在当前模块下创建一个文件夹,取名为js,将vue.js粘贴到js文件夹下即可

3.vue初体验

vue入门很简单,就分为两步:
1.在当前页面引入vue.js
  a.方式1:直接引用vue官网上的js文件,但是需要网络
  b.方式2:访问vue下载网址,将内容粘贴到我们自己创建的js文件中,再引入


2.使用vue
  a.在页面中写一个div,在div中写我们要展示的数据视图
  b.在<script>标签中编写vue代码
  c.将vue对象new出来:后面大括号中要符合json格式要求(key:value形式)
    var vue = new Vue({
        //一般都是用id选择器,来绑定整个div
        el:指定哪个区域使用vue  ->  需要用"选择器"指定

        //在页面上要展示的数据
        data:
        {
            我们要声明的数据模型(要在页面上展示的数据),写在data中
        },

        //定义函数
        methods:{
            函数名:function(){

            }
        }
    });

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue入门初体验</title>
    <script src="../js/vue.js"></script>
</head>
<body>
   <div id="app">
       <div>{{city}}</div>
   </div>

   <script>
       let vue = new Vue({
           el:"#app",
           data:{
               "city":"天津"
           }
       });
   </script>
</body>
</html>

{{}}的作用:

4.vue常用指令

4.1 设置文本指令_v-text和v-html

1.语法格式:
  v-text = "要在标签体中展示的数据属性名";
  v-html = "要在标签体中展示的数据属性名";
2.作用:
  v-text很像innerText,将数据放到指定的标签体中,但是不支持显示标签效果
  v-html很像innerHTML,将数据放到指定的标签体中,但是支持显示标签效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue之v-text指令</title>
    <script src="../js/vue.js"></script>
</head>
<body>
   <div id="app">
      <!-- 相当于:<div>{{city}}</div>-->
       <!--
         v-text:可以将vue中data中的属性值放到标签体中
       -->
       <div v-text = "city"></div>
   </div>

   <script>
       let vue = new Vue({
           el:"#app",
           data:{
               "city":"北京"
           }
       });
   </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue之v-html指令</title>
    <script src="../js/vue.js"></script>
</head>
<body>
   <div id="app">
      <!-- 相当于:<div>{{city}}</div>-->
       <!--
         v-html很像innerHTML,将数据放到指定的标签体中,但是支持显示标签效果
       -->
       <div v-html = "city"></div>
   </div>

   <script>
       let vue = new Vue({
           el:"#app",
           data:{
               "city":"<span style='color:green;'>北京</span>"
           }
       });
   </script>
</body>
</html>

4.2 绑定属性指令_v-bind

1.格式:
  绑定属性:
    v-bind:属性名="数据模型"
  简写:
    :属性名="数据模型"
2.作用:
  可以将vue中的数据绑定到标签指定的属性上

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue之v-html指令</title>
    <script src="../js/vue.js"></script>
</head>
<body>
   <div id="app">
     <!-- <input type="text" v-bind:value = "inputValue" v-bind:id = "idValue"/>-->
       <input type="text" :value = "inputValue" :id = "idValue"/>
   </div>

   <script>
       let vue = new Vue({
           el:"#app",
           data:{
              "inputValue":"张无忌",
               "idValue":"赵敏"
           }
       });
   </script>
</body>
</html>

4.3 绑定事件指令_v-on

1.概述:
  使用vue框架,如果想将指定的标签加上事件,并绑定vue中编写的函数,就需要用vue中v-on指令,就不能像以前那样直接写事件名了

2.语法:在想绑定事件的标签中
  v-on:事件名 = "要绑定的vue中的函数名"
3.简化语法:
  @事件名 = "要绑定的vue中的函数名"
4.在vue代码块中定义函数:
  函数名:function(){
      代码
  }

  或者

  函数名(){
      代码
  }

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue之v-on指令</title>
    <script src="../js/vue.js"></script>
</head>
<body>
   <div id="app">
      <!-- <input type = "button" value="单击事件" v-on:click="fun()"/>
       <input type = "button" value="鼠标悬停" v-on:mouseover="fun1()"/>-->

       <input type = "button" value="单击事件" @click="fun()"/>
       <input type = "button" value="鼠标悬停" @mouseover="fun1()"/>
   </div>

   <script>
       let vue = new Vue({
           el:"#app",
           data:{
           },
           methods:{
               fun:function () {
                   console.log("单击事件");
               },
               fun1:function(){
                   console.log("鼠标悬停");
               }
           }
       });
   </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue之v-on指令</title>
    <script src="../js/vue.js"></script>
</head>
<body>
   <div id="app">
      <!-- <input type = "button" value="单击事件" v-on:click="fun()"/>
       <input type = "button" value="鼠标悬停" v-on:mouseover="fun1()"/>-->

       <input type = "button" value="单击事件" @click="fun()"/>
       <input type = "button" value="鼠标悬停" @mouseover="fun1()"/>
   </div>

   <script>
       let vue = new Vue({
           el:"#app",
           data:{
           },
           methods:{
               fun () {
                   console.log("单击事件");
               },
               fun1(){
                   console.log("鼠标悬停");
               }
           }
       });
   </script>
</body>
</html>

4.4 双向绑定指令_v-model

1.什么是双向绑定:
  页面中的value数据和js中的value数据绑在一个,一方数据改变另一方跟着改变
2.作用:
  便于我们在vue代码中动态获取用户在页面上修改的数据
3.语法:
  v-model:value = "data中的属性名"

  直接写:v-model = "data中的属性名"

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue之v-model指令</title>
    <script src="../js/vue.js"></script>
</head>
<body>
   <div id="app">
     <!-- <input type="text" v-bind:value = "inputValue" v-bind:id = "idValue"/>-->
       <input type="text" v-model:value = "inputValue"/>
       <input type = "button" value="双向绑定" @click="fun()"/>
   </div>

   <script>
       let vue = new Vue({
           el:"#app",
           data:{
              "inputValue":"张无忌",
           },
           methods:{
               fun:function () {
                   console.log(vue.inputValue);
               }
           }
       });
   </script>
</body>
</html>

4.5 条件指定_v-if_v-show

1.作用:
  用于元素显示或者隐藏
2.语法:
  v-if = "data中的属性名"
  v-show = "data中的属性名"
3.注意:
  两个指令在浏览器视觉效果上一样,但是在源码层次上不一样
  v-if 为false时,为不显示,在源码层次上也不显示隐藏的内容
  v-show 为false时,为不显示,在源码层次上显示隐藏的内容

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>vue之v-if-show指令</title>
    <script src="../js/vue.js"></script>
</head>
<body>
   <div id="app">
      <p v-if = "isShow">我是v-if</p>
      <p v-show = "isShow">我是v-show</p>
   </div>

   <script>
       let vue = new Vue({
           el:"#app",
           data:{
               "isShow":false
           },
           methods:{
           }
       });
   </script>
</body>
</html>

4.6 循环指令_v-for

1.作用:
  循环指令,用于循环
2.语法:
  v-for = "对象名 in 遍历的data中的集合属性名"

  在文本标签体中使用{{对象名}}渲染每一个数组元素

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>vue之v-for指令</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <!--
      如果直接写一个变量,默认就是值
      如果写三个变量:依次代表----值  键  索引
    -->
    <p v-for="(p,index) in person">{{p}} {{index}}</p>
    <hr style="color: green"/>

    <!--
      如果遍历的是普通数组,in前面写两个变量依次是:值,索引
    -->
    <p v-for="(p,index) in personArray">{{p}} {{index}}</p>
    <hr style="color: green"/>

     <!--
      由于arrayPerson是一个数组,数组中存储的都是json对象
      所以我们遍历出来的也是json对象,想拿到json中的value
      就需要用:json对象.key
     -->
    <p v-for="p in arrayPerson">{{p.name}} {{p.age}}</p>
</div>

<script>
    let vue = new Vue({
        el: "#app",
        data: {
            "person": {"name": "张三", "age": 12},
            "personArray": ["张三", "李四", "王五", "赵六"],
            "arrayPerson": [
                {"name": "张三丰", "age": 100},
                {"name": "张翠山", "age": 15}
            ]
        },
        methods: {}
    });
</script>
</body>
</html>

5.取消控件默认行为

1.很多控件都有默认行为,比如:
  a.a标签超链接,点击就会跳转到指定的路径
  b.form表单提交按钮,点击就会把form表单中的数据提交到服务器

2.取消控件默认行为的目的:
  如果我们希望点击之后根据我们判断的结果再看是否要跳转,是否要提交表单数据

5.1 取消控件默认行为

1.语法:调用[事件对象]的[preventDefault()]方法
  event.preventDefault()

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue之v-on指令</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <a href="https://www.baidu.com" @click="stop()">百度一下</a>

    <form action="#" method="get">
        <input type="text" name="username"/>
        <input type="submit" value="提交" @click="stop1()"/>
    </form>
</div>

<script>
    let vue = new Vue({
        el: "#app",
        data: {},
        methods: {
            stop() {
                //取消超链接默认行为
                console.log("超链接默认行为已经取消!")
                event.preventDefault();
            },
            stop1() {
                 /*
                 取消提交表单默认行为
                 取消提交表单默认行为使用场景:
                 如果我们做注册功能时:如果注册的用户名或者密码不符合要求,就算点击"注册"按钮,
                 表单也不会将注册的错误信息提交到服务器
                 */
                console.log("提交表单默认行为已经取消!")
                event.preventDefault();
            }
        }
    });
</script>
</body>
</html>

取消提交表单默认行为使用场景:
如果我们做注册功能时:如果注册的用户名或者密码不符合要求,就算点击”注册”按钮,
表单也不会将注册的错误信息提交到服务器

6.阻止事件冒泡

1.什么是事件冒泡:
  点击内层的div,会将内层div要触发的事件传递到外层div,也就是说点击内层div绑定的事件时,外层div绑定的事件也触发了

2.正确的逻辑:
  点击内层div,只触发内层div绑定的事件;点击外层div,只触发外层div绑定的事件

6.1 事件冒泡演示

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>vue之事件冒泡</title>
    <script src="../js/vue.js"></script>
    <style>
        #outer {
            width: 400px;
            height: 400px;
            background-color: lightskyblue;
        }

        #inner {
            width: 200px;
            height: 200px;
            background-color: lightgreen;
        }
    </style>
</head>
<body>
<div id="app">
    <div id="outer" @click="fn1()">
        <div id="inner" @click="fn2()"></div>
    </div>
</div>

<script>
    let vue = new Vue({
        el: "#app",
        data: {},
        methods: {
            fn1() {
                console.log("我是外层div");
            },
            fn2() {
                console.log("我是内层div")
            }
        }
    });
</script>
</body>
</html>

6.2 阻止事件冒泡

1.概述:
  点击内层div,只触发内层div绑定的事件;点击外层div,只触发外层div绑定的事件
2.语法:
  event.stopPropagation()

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>vue之事件冒泡</title>
    <script src="../js/vue.js"></script>
    <style>
        #outer {
            width: 400px;
            height: 400px;
            background-color: lightskyblue;
        }

        #inner {
            width: 200px;
            height: 200px;
            background-color: lightgreen;
        }
    </style>
</head>
<body>
<div id="app">
    <div id="outer" @click="fn1()">
        <div id="inner" @click="fn2()"></div>
    </div>
</div>

<script>
    let vue = new Vue({
        el: "#app",
        data: {},
        methods: {
            fn1() {
                console.log("我是外层div");
            },
            fn2() {
                console.log("我是内层div")
                //点击内层的div，只会让内层div触发事件，而不会传递到外层，这就是阻止事件的冒泡
                event.stopPropagation()
            }
        }
    });
</script>
</body>
</html>

1.其实我们还可以使用”事件修饰符”来做[取消控件默认行为]和[阻止事件冒泡]的操作

2.使用方式:在标签中写: @事件.prevent @事件 .stop
a.@事件.prevent = "函数名"  -> 取消控件默认行为


b.@事件.stop = "函数名" ->阻止事件冒泡
注意:一般我们不使用事件修饰符来做,因为直接在标签中写就写死了,我们应该在函数中做判断,符合某种条件时让控件默认行为失效或阻止事件冒泡

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>vue之取消控件默认行为</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <a href="https://www.baidu.com" @click.prevent="stop()">百度一下</a>

    <form action="#" method="get">
        <input type="text" name="username"/>
        <input type="submit" value="提交" @click.prevent="stop1()"/>
    </form>
</div>

<script>
    let vue = new Vue({
        el: "#app",
        data: {

        },
        methods: {
            stop() {
                //取消超链接默认行为
                console.log("超链接默认行为已经取消!")
               // event.preventDefault();
            },
            stop1() {
                /*
                取消提交表单默认行为
                取消提交表单默认行为使用场景:
                如果我们做注册功能时:如果注册的用户名或者密码不符合要求,就算点击"注册"按钮,
                表单也不会将注册的错误信息提交到服务器
                */
                console.log("提交表单默认行为已经取消!")
                //event.preventDefault();
            }
        }
    });
</script>
</body>
</html>

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>vue之事件冒泡</title>
    <script src="../js/vue.js"></script>
    <style>
        #outer {
            width: 400px;
            height: 400px;
            background-color: lightskyblue;
        }

        #inner {
            width: 200px;
            height: 200px;
            background-color: lightgreen;
        }
    </style>
</head>
<body>
<div id="app">
    <div id="outer" @click="fn1()">
        <div id="inner" @click.stop ="fn2()"></div>
    </div>
</div>

<script>
    let vue = new Vue({
        el: "#app",
        data: {},
        methods: {
            fn1() {
                console.log("我是外层div");
            },
            fn2() {

                console.log("我是内层div")
                //点击内层的div，只会让内层div触发事件，而不会传递到外层，这就是阻止事件的冒泡
                //event.stopPropagation()
            }
        }
    });
</script>
</body>
</html>

7.属性监听

7.1 属性监听介绍

1.什么是属性监听:
  控件中绑定的属性值的变化,能让vue监听器监听到,从而改变vue中的数据

2.使用:vue中的监听器-->watch->可以监听控件中内容的变化
  watch:{
      监听的data中的数据属性名:function(参数){

      }
  }

  参数:就是监听的数据属性值,名字叫啥都可以

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>vue之属性监听</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model = "message"/>
</div>

<script>
    let vue = new Vue({
        el: "#app",
        data: {
            "message":"张无忌"
        },
        //vue监听器
        watch:{
            /*
              watch为vue中的监听器,可以监听控件中内容的变化
              格式:

              监听的数据属性名:function(参数){

              }

              参数:就是监听的数据属性值,名字叫啥都可以
             */
            "message":function (inputValue) {
                console.log(inputValue);
            }
        }

    });
</script>
</body>
</html>

7.2 属性监听练习

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>vue之属性监听</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model = "xing"/><br/>
    <input type="text" v-model = "ming"/><br/>
    <input type="text" v-model = "name"/><br/>
</div>

<script>
    let vue = new Vue({
        el: "#app",
        data: {
            "xing":"张",
            "ming":"三",
            "name":"张三"
        },
        //vue监听器
        watch:{
            "xing":function (xing) {
                vue.name = xing+vue.ming;
            },
            "ming":function (ming) {
                vue.name = vue.xing+ming;
            }
        }

    });
</script>
</body>
</html>

8.VUE练习

8.1 页面效果

8.2 任务分解

第一步：显示表格
第二步：显示四个文本框
第三步：创建一个input标签用来显示用户在文本框中实时输入的内容
第四步：点击添加记录按钮实现记录的添加

8.3.1 显示表格数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE练习</title>
    <script src="../js/vue.js"></script>
    <style type="text/css">
        table, th, td {
            border-collapse: collapse;
            border: 1px solid black;
            padding: 5px;
        }
    </style>
</head>
<body>
<div id="app">
    <table>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>专业</th>
            <th>操作</th>
        </tr>
        <tr v-for="emp in empPerson">
            <!--利用v-text设置值-->
            <!--<td v-text = "emp.empId"></td>
            <td v-text = "emp.empName"></td>
            <td v-text = "emp.empAge"></td>
            <td v-text = "emp.empSubject"></td>-->

            <!--利用插值表达式{{}}-->
            <td>{{emp.empId}}</td>
            <td>{{emp.empName}}</td>
            <td>{{emp.empAge}}</td>
            <td>{{emp.empSubject}}</td>
            <td>
                <input type="button" value="删除"/>
            </td>
        </tr>


    </table>
</div>

<script>
    let vue = new Vue({
        el: "#app",
        data: {
            "empPerson": [
                {
                    "empId": 11,
                    "empName": "张三",
                    "empAge": 20,
                    "empSubject": "Java"
                },
                {
                    "empId": 22,
                    "empName": "李四",
                    "empAge": 21,
                    "empSubject": "PHP"
                },
                {
                    "empId": 33,
                    "empName": "王五",
                    "empAge": 22,
                    "empSubject": "C++"
                }
            ]
        },

    });
</script>
</body>
</html>

8.3.2 实现表格删除功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE练习</title>
    <script src="../js/vue.js"></script>
    <style type="text/css">
        table, th, td {
            border-collapse: collapse;
            border: 1px solid black;
            padding: 5px;
        }
    </style>
</head>
<body>
<div id="app">
    <table>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>专业</th>
            <th>操作</th>
        </tr>
        <tr v-for="(emp,index) in empPerson">
            <!--<td v-text = "emp.empId"></td>
            <td v-text = "emp.empName"></td>
            <td v-text = "emp.empAge"></td>
            <td v-text = "emp.empSubject"></td>-->
            <td>{{emp.empId}}</td>
            <td>{{emp.empName}}</td>
            <td>{{emp.empAge}}</td>
            <td>{{emp.empSubject}}</td>
            <td>
                <input type="button" value="删除" @click = "deletePerson(index)"/>
            </td>
        </tr>


    </table>
</div>

<script>
    let vue = new Vue({
        el: "#app",
        data: {
            "empPerson": [
                {
                    "empId": 11,
                    "empName": "张三",
                    "empAge": 20,
                    "empSubject": "Java"
                },
                {
                    "empId": 22,
                    "empName": "李四",
                    "empAge": 21,
                    "empSubject": "PHP"
                },
                {
                    "empId": 33,
                    "empName": "王五",
                    "empAge": 22,
                    "empSubject": "C++"
                }
            ]
        },
        methods:{
            /*
            因为每一个对象都是数组中的一个元素,所以我们直接根据对象
            对应的索引删除即可
            */
            deletePerson(index){
                vue.empPerson.splice(index,1);
            }
        }

    });
</script>
</body>
</html>

8.3.3 添加员工

想实现添加员工,首先需要在vue的data中获取我们输入框中的内容,然后添加到表格中,所以需要v-model实现一个双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE练习</title>
    <script src="../js/vue.js"></script>
    <style type="text/css">
        table, th, td {
            border-collapse: collapse;
            border: 1px solid black;
            padding: 5px;
        }
    </style>
</head>
<body>
<div id="app">
    <table>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>专业</th>
            <th>操作</th>
        </tr>
        <tr v-for="(emp,index) in empPerson">
            <!--<td v-text = "emp.empId"></td>
            <td v-text = "emp.empName"></td>
            <td v-text = "emp.empAge"></td>
            <td v-text = "emp.empSubject"></td>-->
            <td>{{emp.empId}}</td>
            <td>{{emp.empName}}</td>
            <td>{{emp.empAge}}</td>
            <td>{{emp.empSubject}}</td>
            <td>
                <input type="button" value="删除" @click = "deletePerson(index)"/>
            </td>
        </tr>

    </table>

    <hr size="3" color="red"/>

    <form action="#" method = "get">
        <table>
            <tr>
                <td>编号:</td>
                <td><input type="text" v-model = "employee.empId"></td>
            </tr>
            <tr>
                <td>姓名:</td>
                <td><input type="text" v-model = "employee.empName"></td>
            </tr>
            <tr>
                <td>年龄:</td>
                <td><input type="text" v-model = "employee.empAge"></td>
            </tr>
            <tr>
                <td>专业:</td>
                <td><input type="text" v-model = "employee.empSubject"></td>
            </tr>
            <tr align="center">
                <td colspan="2"><input type="button" value="添加数据"></td>
            </tr>
        </table>
    </form>
</div>

<script>
    let vue = new Vue({
        el: "#app",
        data: {
            "empPerson": [
                {
                    "empId": 11,
                    "empName": "张三",
                    "empAge": 20,
                    "empSubject": "Java"
                },
                {
                    "empId": 22,
                    "empName": "李四",
                    "empAge": 21,
                    "empSubject": "PHP"
                },
                {
                    "empId": 33,
                    "empName": "王五",
                    "empAge": 22,
                    "empSubject": "C++"
                }
            ],

            //输入框中要绑定的数据模型
            "employee":{
                "empId": 44,
                "empName": "赵六",
                "empAge": 33,
                "empSubject": "IOS"
            }
        },
        methods:{
            /*
            因为每一个对象都是数组中的一个元素,所以我们直接根据对象
            对应的索引删除即可
            */
            deletePerson(index){
                vue.empPerson.splice(index,1);
            }
        }

    });
</script>
</body>
</html>

实现添加:将表单中的数据加到表格中,其实就是将表单中要添加的数据(json对象)添加到empPerson数组中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE练习</title>
    <script src="../js/vue.js"></script>
    <style type="text/css">
        table, th, td {
            border-collapse: collapse;
            border: 1px solid black;
            padding: 5px;
        }
    </style>
</head>
<body>
<div id="app">
    <table>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>专业</th>
            <th>操作</th>
        </tr>
        <tr v-for="(emp,index) in empPerson">
            <!--<td v-text = "emp.empId"></td>
            <td v-text = "emp.empName"></td>
            <td v-text = "emp.empAge"></td>
            <td v-text = "emp.empSubject"></td>-->
            <td>{{emp.empId}}</td>
            <td>{{emp.empName}}</td>
            <td>{{emp.empAge}}</td>
            <td>{{emp.empSubject}}</td>
            <td>
                <input type="button" value="删除" @click = "deletePerson(index)"/>
            </td>
        </tr>

    </table>

    <hr size="3" color="red"/>

    <form action="#" method = "get">
        <table>
            <tr>
                <td>编号:</td>
                <td><input type="text" v-model = "employee.empId"></td>
            </tr>
            <tr>
                <td>姓名:</td>
                <td><input type="text" v-model = "employee.empName"></td>
            </tr>
            <tr>
                <td>年龄:</td>
                <td><input type="text" v-model = "employee.empAge"></td>
            </tr>
            <tr>
                <td>专业:</td>
                <td><input type="text" v-model = "employee.empSubject"></td>
            </tr>
            <tr align="center">
                <td colspan="2"><input type="button" value="添加数据" @click = "insert()"></td>
            </tr>
        </table>
    </form>
</div>

<script>
    let vue = new Vue({
        el: "#app",
        data: {
            "empPerson": [
                {
                    "empId": 11,
                    "empName": "张三",
                    "empAge": 20,
                    "empSubject": "Java"
                },
                {
                    "empId": 22,
                    "empName": "李四",
                    "empAge": 21,
                    "empSubject": "PHP"
                },
                {
                    "empId": 33,
                    "empName": "王五",
                    "empAge": 22,
                    "empSubject": "C++"
                }
            ],

            //输入框中要绑定的数据模型
            "employee":{
                "empId": 44,
                "empName": "赵六",
                "empAge": 33,
                "empSubject": "IOS"
            }
        },
        methods:{
            /*
            因为每一个对象都是数组中的一个元素,所以我们直接根据对象
            对应的索引删除即可
            */
            deletePerson(index){
                vue.empPerson.splice(index,1);
            },

            //添加员工
            insert(){
                //判断,如果有一个输入框为空,就显示添加失败

                if (vue.employee.empName==""){
                    alert("添加失败");
                } else{
                    //将employee中的数据添加到empPerson数组中
                    vue.empPerson.push(vue.employee);
                    //清空输入框,由于是双向绑定,所以直接清空employee中的数据就好了
                    vue.employee = {};

                }

            }
        }
    });
</script>
</body>
</html>

9.VUE生命周期

9.1 VUE生命周期介绍

在我们各种语言的编程领域中，『生命周期』都是一个非常常见的概念。一个对象从创建、初始化、工作再到释放、清理和销毁，会经历很多环节的演变。比如我们在JavaSE阶段学习过线程的生命周期(线程状态)，今天学习Vue对象的生命周期，将来还要学习Servlet、Filter等Web组件的生命周期。

总结:
  1.我们只需要关注
    初始化vue对象-->挂载el-->挂载完成-->更新-->销毁
  2.最值得关注的是:挂载完成
    只要是挂载完成,指的是vue真正将div控制起来   el:"#app"->绑定div

9.2 VUE生命周期钩子

1.什么是生命周期钩子:就是调用函数
  当vue每到一个阶段,就会自动调用对应的钩子函数(生命周期函数)
2.我们最值得关注的是:挂载完成
  对应的钩子函数:mounted函数->代表el键对应的div区域,加载完成
3.Vue中第一次页面加载会触发以下钩子函数
      beforeCreate created beforeMount mounted

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE生命周期钩子</title>
    <script src="../js/vue.js"></script>

</head>
<body>
<div id="app">
    <input type="text">
</div>

<script>
    let vue = new Vue({
        el: "#app",
        data: {
        },
        methods:{

        },


        //当vue真正控制div时触发此钩子函数
        mounted(){
            console.log("挂载完成");
        }
    });
</script>
</body>
</html>

10.MVVM

是 Model-View-ViewModel 的缩写

1.Model-View-ViewModel 的介绍

Model: 代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。我们可以把Model称为数据层，因为它仅仅关注数据本身，不关心任何行为

View: 用户操作界面（DOM）。当ViewModel对Model进行更新的时候，会通过数据绑定更新到View

ViewModel：业务逻辑层（创建Vue实例），View需要什么数据，ViewModel要提供这个数据；View有某些操作，ViewModel就要响应这些操作，所以可以说它是Model for View.

2.为什么要使用 MVVM (即优点)

低耦合。视图（View）可以独立于Model变化和修改，
可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑
前后端分离，开发人员可以专注于业务逻辑（ViewModel）和数据的开发，设计人员可以专注于页面设计

总结： MVVM模式简化了界面与业务的依赖，解决了数据频繁更新。MVVM 在使用当中，利用双向绑定技术，使得 Model 变化时，ViewModel 会自动更新，而 ViewModel 变化时，View 也会自动变化。

第三章.书城项目

1.完成目标

a.实现登录表单校验
b.实现注册表单校验

2.具体步骤

2.1 登录页面校验

1.判断用户名不能为空
2.判断密码不能为空

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>尚硅谷会员登录页面</title>
    <link type="text/css" rel="stylesheet" href="../../static/css/style.css" />

    <!--引入vue.js-->
    <script src="../../static/script/vue.js"></script>

    <!--样式-->
    <style>
      .errorMsg{
        color: red;
      }
    </style>
  </head>
  <body>
    <div id="login_header">
      <a href="../../03.书城/index.html">
        <img class="logo_img" alt="" src="../../static/img/logo.gif" />
      </a>
    </div>

    <div class="login_banner">
      <div id="l_content">
        <span class="login_word">欢迎登录</span>
      </div>

      <div id="content">
        <div class="login_form" id="app">
          <div class="login_box">
            <div class="tit">
              <h1>尚硅谷会员</h1>
            </div>
            <div class="msg_cont">
              <b></b>
              <!--
                使用v-text将vue中显示的错误提示放在span的标签体中
              -->
              <span class="errorMsg" v-text="errorMessage"></span>
            </div>
            <div class="form">
              <form action="login_success.html">
                <label>用户名称：</label>
                <input
                  class="itxt"
                  type="text"
                  placeholder="请输入用户名"
                  v-model = "username"
                  autocomplete="off"
                  tabindex="1"
                  name="username"
                  id="username"
                />
                <br />
                <br />
                <label>用户密码：</label>
                <input
                  class="itxt"
                  type="password"
                  placeholder="请输入密码"
                  v-model = "pwd"
                  autocomplete="off"
                  tabindex="1"
                  name="password"
                  id="password"
                />
                <br />
                <br />
                <input type="submit" value="登录" id="sub_btn" @click = "loginUser()"/>
              </form>
              <div class="tit">
                <a href="regist.html">立即注册</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="bottom">
      <span>
        尚硅谷书城.Copyright &copy;2015
      </span>
    </div>

    <script>
        let vue = new Vue({
            el:"#app",
            data:{
                "username":"",
                "pwd":"",
                "errorMessage":""
            },
            methods:{
                loginUser(){
                    //如果填写的用户名和密码有一个为空,就直接阻止表单提交
                    if (vue.username=="" || vue.pwd==""){
                        vue.errorMessage = "用户名或密码不正确!!!";
                        event.preventDefault();
                    }
                }
            }
        });
    </script>
  </body>
</html>

2.2 注册页面校验

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>尚硅谷会员注册页面</title>
    <link type="text/css" rel="stylesheet" href="../../static/css/style.css" />
    <link rel="stylesheet" href="../../static/css/register.css" />
    <style type="text/css">
      .login_form {
        height: 420px;
        margin-top: 25px;
      }

      .message{
        font-size: 10px;
        color: red;
        margin: 2px 0;
      }
    </style>

    <script src="../../js/vue.js"></script>
  </head>
  <body>
    <div id="login_header">
      <a href="../../03.书城/index.html">
        <img class="logo_img" alt="" src="../../static/img/logo.gif" />
      </a>
    </div>

    <div class="login_banner">
      <div class="register_form" id="app">
        <h1>注册尚硅谷会员</h1>
        <form action="regist_success.html">
          <div class="form-item">
            <div>
              <label>用户名称:</label>
              <input type="text" placeholder="请输入用户名" v-model = "user.username" @change = "checkUsername()"/>
            </div>
            <span class="message" v-text = "message.usernameMessage"></span>
          </div>
          <div class="form-item">
            <div>
              <label>用户密码:</label>
              <input type="password" placeholder="请输入密码" v-model = "user.password" @change = "checkPwd()"/>
            </div>
            <span class="message" v-text = "message.passwordMessage"></span>
          </div>
          <div class="form-item">
            <div>
              <label>确认密码:</label>
              <input type="password" placeholder="请输入确认密码" v-model = "user.passwordConfirm" @click = "checkPwdConfirm()"/>
            </div>
            <span class="message" v-text = "message.passwordConfirmMessage"></span>
          </div>
          <div class="form-item">
            <div>
              <label>用户邮箱:</label>
              <input type="text" placeholder="请输入邮箱" v-model = "user.email" @change = "checkEmail()"/>
            </div>
            <span class="message" v-text = "message.emailMessage"></span>
          </div>
          <div class="form-item">
            <div>
              <label>验证码:</label>
              <div class="verify">
                <input type="text" placeholder="" />
                <img src="../../static/img/code.bmp" alt="" />
              </div>
            </div>
            <span class="message"></span>
          </div>
          <button class="btn" @click = "checkRegister()">注册</button>
        </form>
      </div>
    </div>
    <div id="bottom">
      <span>
        尚硅谷书城.Copyright &copy;2015
      </span>
    </div>



    <script>
       let vue = new Vue({
         el:"#app",
         data:{
           "user":{
             "username":"",
             "password":"",
             "passwordConfirm":"",
             "email":""
           },
           "message":{
             "usernameMessage":"",
             "passwordMessage":"",
             "passwordConfirmMessage":"",
             "emailMessage":""
           }

         },
         methods:{
           //校验用户名
           checkUsername(){
             //注册的用户名必须是6-16位的数字大小写字母
             let regex = /^[0-9A-Za-z]{6,16}$/;
             //判断输入的内容是否符合用户名正则表达式
             if (regex.test(this.user.username)){
               this.message.usernameMessage = "";
               return true;
             }else{
               this.message.usernameMessage = "用户名格式不正确";
               return false;
             }
           },

           //校验密码
           checkPwd(){
             //注册的密码必须是8-16位的数字、字母、_
             let regex1 = /^[0-9A-Za-z_]{8,16}$/;
             //判断输入的内容是否符合密码正则表达式
             if (regex1.test(this.user.password)){
               this.message.passwordMessage = "";
               return true;
             } else{
               this.message.passwordMessage = "密码格式不正确";
               return false;
             }
           },

           //校验确认密码
           checkPwdConfirm(){
             //判断输入的密码是否和要注册的密码内容一样
             if (this.user.password==this.user.passwordConfirm){
               this.message.passwordConfirmMessage = "";

               return true;
             } else{
               this.message.passwordConfirmMessage = "密码不一致";
               return false
             }
           },

           //校验邮箱
           checkEmail(){
             let regex = /^[a-zA-Z0-9_\.-]+@([a-zA-Z0-9-]+[\.]{1})+[a-zA-Z]+$/;
             //判断输入的内容是否符合邮箱规则
             if (regex.test(this.user.email)){
               this.message.emailMessage = "";
               return true;
             } else{
               this.message.emailMessage = "邮箱格式不正确";
               return false;
             }
           },

           //如果以上输入框有一项格式不正确就阻止表单提交
           checkRegister(){
             /*
               为了这里做判断,我们给上面的四个方法加boolean返回值
              */
             if (!this.checkUsername()|| !this.checkPwd()|| !this.checkPwdConfirm()|| !this.checkEmail()) {
               event.preventDefault();
             }
           }

         }
       });
    </script>
  </body>
</html>

a-zA-Z_ ↩︎
a-zA-Z0-9_-@#&* ↩︎
a-zA-Z0-9_.- ↩︎

3.正则表达式-VUE-书城项目