Vue 全套教程，入门 Vue 必知必会

Posted Nice2cu_Code

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue 全套教程，入门 Vue 必知必会相关的知识，希望对你有一定的参考价值。

Vue(一)

文章目录

一、Vue简介

1. 介绍

Vue 是一套用来动态构建用户界面的渐进式 javascript 框架

  • 构建用户界面：把数据通过某种办法变成用户界面
  • 渐进式：Vue 可以自底向上逐层的应用，简单应用只需要一个轻量小巧的核心库，复杂应用可以引入各式各样的 Vue 插件

2. 特点

2.1 采用组件化模式，提高代码复用率、且让代码更好维护

每一个组件由三部分组成：html、CSS、JS，如下图：

2.2 使用虚拟 DOM 和 Diff 算法，尽量复用 DOM 节点

如果数据修改，不需要重新拼串，在虚拟 DOM 层会通过 Diff 算法比较与原数据的差异，从而复用原数据，如下图：

2.3 声明式编码，让编码人员无需直接操作 DOM，提高开发效率

不需要像命令式编码一样将每一步操作都通过代码编写，如下图：

二、HelloWorld

  1. 首先需要引入Vue，通过本地文件引入，或通过网络引入：https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js
  2. 想要让Vue工作，就需要创建一个Vue实例，给这个实例传入一些数据，比如 data（定义数据）、methods（定义方法） 等，并将这个实例绑定给页面的 div 标签（称为容器）
  3. 在容器的标签中通过 （插值表达式）编写 JS 表达式可以直接获取 data 中的数据，一旦 data 中的数据发生改变，那么页面中用到该数据的地方也会自动更新

代码示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>初识Vue</title>
        
        <!-- 通过网络引入Vue -->
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    </head>
    <body>
        
        <!-- 准备好一个容器 -->
        <div id="root">
            <!-- 获取Vue实例中data中的数据 -->
            <h1>Hello，name，address</h1>
        </div>

        <script type="text/javascript" >
            //创建Vue实例
            new Vue(
                el:'#root', //el用于指定当前Vue实例与哪个容器绑定，此处绑定id值为root的容器
                data: //data中用于存储数据，数据供el所指定的容器去使用
                    name:'周杰伦',
                    address:'台北'
                
            )
        </script>
    </body>
</html>

运行结果：

注意：

  1. 容器中的代码依然符合 HTML 规范，只不过可以写一些 Vue 的语法
  2. 容器和 Vue 实例是一一对应的，可以有多个容器和Vue实例一一对应（但是一般只写一个容器和一个Vue实例，其余内容配合组件一起使用）

三、v-bind指令

基本语法：v-bind:属性名 = "JS表达式"，表示将 JS 表达式的值赋值给此属性（单向绑定）

简写：:属性名 = "JS表达式"

代码示例：

<div id="root">
    <!-- 插值表达式获取data中的属性值 -->
    <h3>你好，name</h3>
    <!-- 单向绑定data中的属性值赋值给href属性 -->
    <a v-bind:href="school.url.toUpperCase()">点我去school.name学习</a>
    <!-- 简写方式 -->
    <a :href="school.url">点我去学习</a>
</div>
</body>

<script type="text/javascript">
    
    //阻止vue在启动时生成生产提示
    Vue.config.productionTip = false 

    new Vue(
        el:'#root',
        data:
            name:'Jack',
            school:
                name:'霍格沃茨',
                url:'http://www.baidu.com',
            
        
    )
</script>

运行结果：

注意：

  1. 如果 data 中的属性值发生变化，单向绑定的数据也会自动的随之变化

  2. 插值表达式一般写在标签体中，单向绑定一般用于给标签的属性绑定值

四、v-model指令

基本语法：v-model:value = "JS表达式"，表示双向绑定，也就是 data 中的值被修改，页面的值也会被修改；页面的值被修改，对应的 data 属性值也会随之修改

简写：v-model = "JS表达式"，即双向绑定默认操作的属性就是 value

代码示例：

<body>
    <div id="root">

        <!-- 普通写法 -->
        双向数据绑定：<input type="text" v-model:value="name"><br/>

        <!-- 简写 -->
        双向数据绑定：<input type="text" v-model="name"><br/>

        <div> data属性的值：name </div>
    </div>
</body>

<script type="text/javascript">
    new Vue(
        el:'#root',
        data:
            name:'Bruno Mars'
        
    )
</script>

运行结果：

注意：

  1. 双向绑定只能使用在表单类元素上，也就是标签必须有 value 属性，比如输入框、单选框、多选框等
  2. 插值表达式和单向绑定数据只能从 data 流向页面，而双向绑定还可以使数据从页面流向 data

五、el与data的两种写法

5.1 el的两种写法

5.1.1 第一种写法

<script type="text/javascript">
    new Vue(
        el: '#root', //绑定id为root的容器
        data: 
       		//定义数据 
    	
    )
</script>

5.1.2 第二种写法

<script type="text/javascript">
    const vm = new Vue(
        data: 
       		//定义数据 
    	
    )
    vm.$mount('#root') //绑定id为root的容器
</script>

两种方式的区别：

第一种创建Vue对象的时候就要绑定容器；第二种先创建Vue对象，可以做一些其他操作后再绑定容器。

5.2 data的两种写法

5.2.1 对象式

<script type="text/javascript">
    new Vue(
        el: '#root',
        //定义data对象，然后在其中定义属性
        data: 
       		name:'Nicki Minaj' 
    	
    )
</script>

5.2.2 函数式

<script type="text/javascript">
    new Vue(
        el: '#root',
        //定义data函数，然后在返回值中定义属性
        data()
            return
                //返回值是定义的数据
                name:'Nicki Minaj' 
            
        
    )
</script>

注意：

  1. 使用组件时，必须使用函数式定义数据
  2. 由 Vue 管理的函数不能写成箭头函数，如果使用箭头函数，则函数中的 this 表示的是 window，如果使用普通函数格式，则 this 表示 Vue对象

六、MVVM模型

  • M：模型 (Model) ：data中的数据
  • V：视图 (View) ：模板代码
  • VM：视图模型 (ViewModel)：Vue实例

图示：

图中 Vue 实例的双向箭头表示：

  1. Data Bindings：数据存放在 Model 中，经过 Vue 实例将数据绑定在页面上
  2. DOM Listeners：页面上的数据会被 Vue 实例监听，比如双向绑定：页面数据发生变化，对应 Model 中的数据也跟着变化

代码示例：

<body>
    <div id="root">
        <h1>学校名称：name</h1>
        <h1>学校地址：address</h1>

        <!-- VM身上的所有数据，view中都可以直接获取 -->
        <h1>测试一下2：$options</h1>
        <h1>测试一下3：$emit</h1>
    </div>
</body>

<script type="text/javascript">

    //一般使用vm这个变量名表示Vue实例
    const vm = new Vue(
        el:'#root',
        data:
            name:'清华大学',
            address:'北京',
        
    )
    // 控制台输出Vue实例
    console.log(vm)
</script>

运行结果1：

控制台输出 Vue 实例：

运行结果2：

页面展示：

结论：

  1. data 中所有的属性，最后都出现在了 Vue 实例中
  2. Vue 实例身上所有的属性以及 Vue 原型所有的属性，都可以直接在 View 中使用

七、Object.defineProperty方法

先看一段 JS 代码，将一个变量的值赋值给一个属性：

let number = 18
let person = 
    name:'张三',
    sex:'男',
    age:number //age值为18

如果通过这种方式给 age 赋值，只有第一次代码执行到赋值语句时才会将 age 的值修改为 18，如果以后 number 的值发生变化，则 age 不会跟着变化。

方法介绍：

此方法用于给对象定义属性使用，参数1表示给哪个对象定义属性，参数2表示给对象中的哪个属性赋值，参数3写赋予值的配置对象（对属性值进行一些高级的操作），如下所示：

<script type="text/javascript" >
    
    let person = 
        name:'张三',
        sex:'男',
    

    Object.defineProperty(person,'age',
        value:18, //这个属性值为18
        enumerable:true, //控制属性是否可以枚举（被遍历），默认值是false
        writable:true, //控制属性是否可以被修改，默认值是false
        configurable:true //控制属性是否可以被删除，默认值是false
    )
    
</script>

运行结果：

get()、set()方法：

<script type="text/javascript" >

    let number = 12
    let person = 
        name:'张三',
        sex:'男',
    

    Object.defineProperty(person,'age',

        //当有人读取person的age属性时，get函数（getter）就会被调用，且返回值就是age此时的值
        get()
            console.log('有人读取age属性，get方法被调用')
            return number //返回定义的number变量值
        ,

        //当有人修改person的age属性时，set函数（setter）就会被调用，且参数是要赋予age属性的值
        set(value)
            console.log('有人修改age属性，set方法被调用，修改值为',value)

            //age的值取决于number，修改number的值就可以修改age的值
            //并没有直接修改age属性值
            number = value 
        
    )
</script>

运行结果：

上述代码完成了一种功能：person 对象中有 age 这个属性，但是 age 属性的值并不是固定的，可以随时读取，随时修改。

八、数据代理

8.1 数据代理概念

数据代理：通过一个代理对象，操作另一个对象中的数据，而不是直接操作该对象。

代码示例：

<!-- 想要通过obj2获取、修改obj中的数据，而不是直接操作obj -->
<script type="text/javascript" >

    let obj = 
        x:100
    
    let obj2 = 
        y:200
    

    Object.defineProperty(obj2,'x',
        get()
            return obj.x
        ,
        set(value)
            obj.x = value
        
    )
</script>

运行结果：

8.2 Vue中的数据代理

观察下述代码：

<body>
    <div id="root">
        <h2>名称：name</h2>
        <h2>地址：address</h2>
    </div>
</body>

<script type="text/javascript">
    const vm = new Vue(
        el:'#root',
        data:
            name:'Jay',
            address:'台湾'
        
    )
</script>

运行结果1：

运行结果2：

运行结果3：

总结：

  1. Vue 中的数据代理指的就是通过 Vue 实例（Vue实例中也会有上述的 name、address 属性）来代理 data 对象中 name、address 属性的操作

  2. 如果没有数据代理，那么在 View 中获取 data 中的数据只能通过上述的 _data 来获取

    • Vue 使用数据代理的目的就是可以编码时简写，比如直接写 name 就可以拿到 'Jay' 这个值（编码获取的是 Vue 中的 name，最终通过 getter() 方法读取到的是 data 中的 name）
    • Vue 使用数据代理还可以将数据的改变同步到页面上，比如修改 vm.name 值，最终通过 setter() 方法修改的是 data 中的数据，data 中的数据发生了变化，最终会直接影响到页面上的数据
    • 只要 data 中的数据发生变化，Vue 就会重新解析模板（View），以更新模板中的值，如果解析模板的过程中，插值表达式中有调用函数，这个函数一定会被重新调用

  3. 通过 Object.defineProperty() 方法把 data 对象中的所有属性添加到 Vue 实例上，并且为每个属性自动的添加 getter/setter，通过这些方法修改 data 中的属性值

  4. 具体见下图：

    可以发现编码时写的 data 没有出现在 Vue 实例中，都转换成了 _data，所以最终读取的都是 _data 中的数据。

  5. 只有 data 中的数据会做数据代理

九、事件处理

9.1 基本使用

基本语法：v-on:事件名 = "xxx"，xxx 表示事件发生时要执行的函数，也可以写一些简单的逻辑语句

简写：@事件名 = "xxx"

**事件对象：**事件触发的时候会执行某个函数，该函数的形参（如果只有一个）会自动接收一个事件对象（即使调用函数时没有传递任何实参），这个事件对象中包含这个事件的各种信息

代码示例：

<body>
    <div id="root">
        <h2>欢迎来到name学习</h2>
        <!-- 调用函数时没有传递任何参数 -->
        <button @click="showInfo1">点我提示信息1</button>
    </div>
</body>

<script type="text/javascript">
    const vm = new Vue(
        el:'#root',
        data:
            name:'霍格沃茨',
        ,
        
        //定义的方法要写在methods对象中
        methods:
            showInfo1(event)
                
                //event表示事件对象，target表示发生这个事件时的标签
                //event可以更改成其他的任何字母（都表示事件对象）
                console.log(event.target)
                
                //innerText表示标签中的文本
                console.log(event.target.innerText)
            ,
        
    )
</script>

运行结果1：

运行结果2：

9.2 $event

如果想要事件发生时既要传递实参又要在函数中使用事件对象，那么就必须在调用函数时使用 $event 来表示传递的是事件对象，如下代码所示：

<div id="root">
    <h2>欢迎来到name学习</h2>
    <!-- $event表示这个参数是事件对象而不是自定义的实参 -->
    <button @click="showInfo1($event, 22)">点我提示信息1</button>
</div>
</body>

<script type="text/javascript">
    const vm = new Vue(
        el:'#root',
        data:
            name:'霍格沃茨',
        ,
        methods: 
            showInfo1(event, number) 
                // event表示事件对象，number表示接收的实参
                console.log(event.target)
                console.log('参数数字是' + number)
            ,
        
    )
</script>

运行结果：

总结：

methods 中定义的方法属于被 Vue 实例所管理的方法：

  • 如果使用箭头函数，this 表示 window
  • 如果使用普通函数，this 表示 Vue 实例或者组件实例对象

9.3 事件修饰符

事件修饰符有6种：

  • prevent：阻止事件的默认行为
  • stop：阻止事件冒泡（使用在内部标签上）
    • 事件冒泡：内部标签的事件触发时，外层标签如果有相同的事件，那么这个外部标签的事件会被自动触发
  • once：事件只触发一次
  • self：只关心自己标签上触发的事件，不监听事件冒泡
  • capture：使用事件的捕获模式
  • passive：事件的默认行为立即执行，无需等待事件回调执行完毕

9.3.1 prevent事件

代码示例：

<body>
    <div id="root">
        <h2>欢迎来到name学习</h2>
        <!-- a标签的默认行为是跳转到指定的页面，prevent阻止跳转，只执行函数 -->
        <a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>
    </div>
</body>

<script type="text/javascript">
    new Vue(
        el:'#root',
        data:
            name:'霍格沃茨'
        ,
        methods:
            showInfo()
                alert('同学你好！')
            
        
    )
</script>

点击之后只弹出提示信息，没有跳转到百度页面。

9.3.2 stop事件

代码示例：

<body>
    <div id="root">
        <h2>欢迎来到name学习</h2>
        <!-- div标签是外层标签，拥有与内层标签一致的点击事件 -->
        <div @click = "showInfo">
            <!-- 默认点击按钮之后，内部标签的事件触发，外部标签的事件也会随之触发（事件冒泡） -->
            <!-- 使用stop阻止了事件冒泡，不会触发外层标签的同一事件 -->
            <button @click.stop = "showInfo"> 按钮 </button>
        </div>

    </div>
</body>

<script type="text/javascript">
    new Vue(
        el:'#root',
        data:
            name:'霍格沃茨'
        ,
        methods:
            showInfo()
                alert('同学你好！')
            
        
    )
</script>

只弹出一次提示信息，如果不阻止事件冒泡，则会弹出两次提示信息。

9.3.3 once事件

<!-- 事件只会执行一次，之后再点击也不会触发事件了 -->
<button @click.once="showInfo"> 按钮 </button>

9.3.4 self事件

<!-- div标签是外层标签，拥有与内层标签一致的点击事件 -->
<!-- 使用了self事件，只有点击了外部事件才会触发，不监听事件冒泡 -->
<div @click.self = "showInfo">
    <button @click= "showInfo"> 按钮 </button>
</div>

点击了按钮之后，只弹出一次提示信息。

注意：事件修饰符可以连续写，比如：@click.prevent.stop = "method" 表示既阻止事件的默认行为又阻止事件冒泡的发生。

9.4 按键修饰符

  • 使用方式：@事件名.按键修饰符名称 = "要执行的方法"

  • 作用：用来和按键事件绑定在一起，修饰特定按键事件

    • click：点击事件
    • keyup：按键抬起事件
    • keydown：按键按下事件

  • 常用的按键修饰符有9个

    • enter：回车
    • delete：删除或退格
    • esc：退出
    • space：空格
    • tab：换行

      正则表达式必知必会(修订版)整理教程

       正则表达式必知必会(修订版)整理教程

      1.   正则表达式入门

      1.1  用途

      是一种工具，主要用途是搜索变化多端的文本。匹配       到我们想要的信息。

      1.2  使用正则表达式

      在线测试工具：http://tool.oschina.net/regex/

      2.  匹配单个字符

      2.1  匹配纯文本

      例子：

      文本

      Hello,my name is zhaikaishun,please visitmy blog at http://blog.csdn.net/t1dmzks?viewmode=contents

      正则表达式

      Zhaikaishun

      结果

      Hello,my name is zhaikaishun,pleasevisit my blog athttp://blog.csdn.net/t1dmzks?viewmode=contents

       

      正则表达式

      my

      结果

      Hello,myname is zhaikaishun,please visit my blog at http://blog.csdn.net/t1dmzks?viewmode=contents

      2.1.1 多个匹配结果问题

      大多数正则表达式引擎默认匹配第一个匹配，比如这个my，只匹配第一个，但是也有的匹配全部，如何将两个或两个以上的全部找出来呢，在js中使用g，其他的，请参照相关信息

      2.1.2字母大小写问题

      正则表达式是区分大小写的，Zhaikaishun不匹配zhaikaishun，不过绝大多数是不区分的，例如mysql，javascript不区分大小写，如何让区分大小写的也不区分，有相关的方法，具体问题具体分析，后面也有相关的例子，这里暂时不阐述

      2.2  匹配任意字符

      文本

      Hust

      Wust

      Whu

      Hust1

      Whu1

      Hust2.zks

      Whu.tzgg

      正则表达式

      Hust

      结果

      Hust

      Wust

      Whu

      Hust1

      Whu1

      Hust2.zks

      Whu.tzgg

      分析：

      能将Hust+一个字符给匹配出来，一个 . 代表任何单个字符、字母、数字、甚至是本身，可以组合使用，例如

      正则表达式

      .u..

      匹配结果

      Hust

      Wust

      Whu

      Hust1

      Whu1

      Hust2.zks

      Whu.tzgg

      分析：能匹配 u的前面一个字符+u+后面两个字符

      2.3  匹配特殊字符

      使用转义字符\\

      例如匹配 . 使用\\.  ；匹配\\ 使用 \\\\

       

      2.    

      3.   匹配一组字符

      3.1匹配多个字符中的某一个

      使用[] 例如，匹配abc中的某一个字符，可以[abc]

      例如 文本

      Zhaikaishun like Eating ice creams,but Ican’t eat to much

      正则表达式

      [Ee]at

      结果

      Zhaikaishun like Eatingice creams,but I can’t eat to much

      分析： [Ee]匹配E或者e，at匹配at

       

      3.2利用字符区间

      例如:

      [0123456789]可以写成[0-9]

      常见合法区间

      [A-Z]

      匹配从A到Z的所有大写字母

      [a-z]

      匹配从a到z的所有小写字母

      [A-z]

      匹配所有从ASCII字符A到ASCII字符z，中间还包括一些其他的字符，例如],[,/,^等字符，不常用

      [A-Za-z0-9]

      匹配大写A-Z，小写a-z，数字0-9的任意一个

       

      3.3 取非匹配

      除了这个字符集合的字符，其他全部匹配

      例如[^0-9]只要不是0-9的字符都可以匹配

       

      4.   使用元字符

      元字符是在正则表达式的特殊字符

      对特殊字符进行转义的方法，使用\\

      这里先列出正则表达式所有元字符及其使用方法一览表，方便大家查阅，不理解的可以在看完整个整理即可了解

      4.1正则表达式所有元字符及其使用方法一览表

       

      字符

      描述

      \\

      将下一个字符标记为一个特殊字符、或一个原义字符、或一个 后向引用、或一个八进制转义符。例如，'n'匹配字符 "n"。'\\n' 匹配一个换行符。序列 '\\\\' 匹配 "\\" 而 "\\(" 则匹配 "("。

      ^

      匹配输入字符串的开始位置。如果设置了 RegExp 对象的 Multiline 属性，^ 也匹配 '\\n' 或 '\\r' 之后的位置。

      $

      匹配输入字符串的结束位置。如果设置了RegExp 对象的 Multiline 属性，$ 也匹配 '\\n' 或 '\\r' 之前的位置。

      *

      匹配前面的子表达式零次或多次。例如，zo* 能匹配 "z" 以及 "zoo"。 * 等价于{0,}。

      +

      匹配前面的子表达式一次或多次。例如，'zo+' 能匹配 "zo" 以及 "zoo"，但不能匹配 "z"。+ 等价于 {1,}。

      ?

      匹配前面的子表达式零次或一次。例如，"do(es)?" 可以匹配 "do" 或 "does" 中的"do" 。? 等价于 {0,1}。

      {n}

      n 是一个非负整数。匹配确定的 n 次。例如，'o{2}' 不能匹配 "Bob" 中的 'o'，但是能匹配 "food" 中的两个 o。

      {n,}

      n 是一个非负整数。至少匹配n 次。例如，'o{2,}' 不能匹配 "Bob" 中的 'o'，但能匹配 "foooood" 中的所有 o。'o{1,}' 等价于 'o+'。'o{0,}' 则等价于 'o*'。

      {n,m}

      m 和 n 均为非负整数，其中n <= m。最少匹配 n 次且最多匹配 m 次。刘， "o{1,3}" 将匹配 "fooooood" 中的前三个 o。'o{0,1}' 等价于 'o?'。请注意在逗号和两个数之间不能有空格。

      ?

      当该字符紧跟在任何一个其他限制符 (*, +, ?, {n}, {n,}, {n,m})后面时，匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字符串，而默认的贪婪模式则尽可能多的匹配所搜索的字符串。例如，对于字符串 "oooo"，'o+?' 将匹配单个 "o"，而 'o+' 将匹配所有 'o'。

      .

      匹配除 "\\n" 之外的任何单个字符。要匹配包括 '\\n' 在内的任何字符，请使用象 '[.\\n]' 的模式。

      (pattern)

      匹配pattern 并获取这一匹配。所获取的匹配可以从产生的 Matches 集合得到，在VBScript 中使用 SubMatches 集合，在Visual Basic Scripting Edition 中则使用 $0…$9 属性。要匹配圆括号字符，请使用 '\\(' 或 '\\)'。

      (?:pattern)

      匹配 pattern 但不获取匹配结果，也就是说这是一个非获取匹配，不进行存储供以后使用。这在使用 "或" 字符 (|) 来组合一个模式的各个部分是很有用。例如， 'industr(?:y|ies) 就是一个比 'industry|industries' 更简略的表达式。

      (?=pattern)

      正向预查，在任何匹配 pattern 的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。例如， 'Windows (?=95|98|NT|2000)' 能匹配 "Windows 2000" 中的 "Windows" ，但不能匹配 "Windows 3.1" 中的 "Windows"。预查不消耗字符，也就是说，在一个匹配发生后，在最后一次匹配之后立即开始下一次匹配的搜索，而不是从包含预查的字符之后开始。

      (?!pattern)

      负向预查，在任何不匹配Negative lookahead matches the search string at any point where a string not matching pattern 的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。例如'Windows (?!95|98|NT|2000)' 能匹配 "Windows 3.1" 中的 "Windows"，但不能匹配 "Windows 2000" 中的 "Windows"。预查不消耗字符，也就是说，在一个匹配发生后，在最后一次匹配之后立即开始下一次匹配的搜索，而不是从包含预查的字符之后开始

      x|y

      匹配 x 或 y。例如，'z|food' 能匹配 "z" 或 "food"。'(z|f)ood' 则匹配 "zood" 或 "food"。

      [xyz]

      字符集合。匹配所包含的任意一个字符。例如， '[abc]' 可以匹配 "plain" 中的 'a'。

      [^xyz]

      负值字符集合。匹配未包含的任意字符。例如， '[^abc]' 可以匹配 "plain" 中的'p'。

      [a-z]

      字符范围。匹配指定范围内的任意字符。例如，'[a-z]' 可以匹配 'a' 到 'z' 范围内的任意小写字母字符。

      [^a-z]

      负值字符范围。匹配任何不在指定范围内的任意字符。例如，'[^a-z]' 可以匹配任何不在 'a' 到 'z' 范围内的任意字符。

      \\b

      匹配一个单词边界，也就是指单词和空格间的位置。例如， 'er\\b' 可以匹配"never" 中的 'er'，但不能匹配 "verb" 中的 'er'。

      \\B

      匹配非单词边界。'er\\B' 能匹配 "verb" 中的 'er'，但不能匹配 "never" 中的 'er'。

      \\cx

      匹配由x指明的控制字符。例如， \\cM 匹配一个 Control-M 或回车符。 x 的值必须为 A-Z 或 a-z 之一。否则，将 c 视为一个原义的 'c' 字符。

      \\d

      匹配一个数字字符。等价于 [0-9]。

      \\D

      匹配一个非数字字符。等价于 [^0-9]。

      \\f

      匹配一个换页符。等价于 \\x0c 和 \\cL。

      \\n

      匹配一个换行符。等价于 \\x0a 和 \\cJ。

      \\r

      匹配一个回车符。等价于 \\x0d 和 \\cM。

      \\s

      匹配任何空白字符，包括空格、制表符、换页符等等。等价于 [ \\f\\n\\r\\t\\v]。

      \\S

      匹配任何非空白字符。等价于 [^ \\f\\n\\r\\t\\v]。

      \\t

      匹配一个制表符。等价于 \\x09 和 \\cI。

      \\v

      匹配一个垂直制表符。等价于 \\x0b 和 \\cK。

      \\w

      匹配包括下划线的任何单词字符。等价于'[A-Za-z0-9_]'。

      \\W

      匹配任何非单词字符。等价于 '[^A-Za-z0-9_]'。

      \\xn

      匹配 n，其中 n 为十六进制转义值。十六进制转义值必须为确定的两个数字长。例如， '\\x41' 匹配 "A"。'\\x041' 则等价于 '\\x04' & "1"。正则表达式中可以使用 ASCII 编码。.

      \\num

      匹配 num，其中 num 是一个正整数。对所获取的匹配的引用。例如，'(.)\\1' 匹配两个连续的相同字符。

      \\n

      标识一个八进制转义值或一个后向引用。如果 \\n 之前至少 n 个获取的子表达式，则 n 为后向引用。否则，如果 n 为八进制数字 (0-7)，则 n 为一个八进制转义值。

      \\nm

      标识一个八进制转义值或一个后向引用。如果 \\nm 之前至少有is preceded by at least nm 个获取得子表达式，则 nm 为后向引用。如果 \\nm 之前至少有 n 个获取，则 n 为一个后跟文字 m 的后向引用。如果前面的条件都不满足，若  n 和 m 均为八进制数字 (0-7)，则 \\nm 将匹配八进制转义值 nm。

      \\nml

      如果 n 为八进制数字 (0-3)，且 m 和 l 均为八进制数字 (0-7)，则匹配八进制转义值 nml。

      \\un

      匹配 n，其中 n 是一个用四个十六进制数字表示的 Unicode 字符。例如， \\u00A9 匹配版权符号 (?)。

       

      5.  重复匹配

      5.1有多少个匹配

      文本 Hello,MyEmail is abcd@gmail..com ,xiaoming’sEmail is asdw.gmail.magic.com

      5.1.1匹配一个或多个字符

      使用+，例如为了匹配上述的电子邮箱

      正则表达式

      \\w+@\\w+\\.\\w+

      结果

      hello,my email is abcd@gmail.com, ,xiaoming’s Email is .sdw.gmail.magic.com

      分析：\\w可以匹配所有的字母和数字（以及下划线_。这个字符在电子邮件中是合法的），第一个\\w+匹配多个字母或数字字符，然后接一个@(@不需要转义)，第二个\\w+匹配多个字母或数字字符，\\.匹配一个.(.需要转义，这里才用的\\.)第三个\\w+匹配多个字母或数字字符.

       

      但是这里我们漏掉了asdw.gmail.magic.com，加入要这两个都匹配出来，可以使用[\\w.]+@[\\w.]+\\.\\w+

       

       

      5.1.2匹配0个或多个字符

      使用*即可。和+类似，但是+至少匹配一次，*可以一次也不匹配

      5.1.3匹配0个或一个字符

      使用元字符?

      5.2匹配的重复次数

      正则表达式的+、*、？解决了很多问题，但是有时候，我们需要精确到某一个次数，正则表达式提供了一个设置次数的语法

      5.2.1匹配一个精确的值

      {num}匹配num次，例如

      文本 1231234 12345 abcde abcedf

      正则表达式：\\w{5}

      结果：123 1234 12345 abcde abce5f

      5.2.2为重复匹配设定一个区间

      {num1,num2}匹配num1次到num2次之间，例如

      文本：aa11aa,aa1aa,bb111bb,bb1111aa

      正则表达式：[0-9]{2,4}

      结果：aa11aa,aa1aa,bb111bb,bb1111aa

      5.2.3匹配至少重复多少次

      {num,}例如：

      文本：  123 1234 12345 abcde,abcedfabcdefghijk

      正则表达式： \\w{4,}

      结果： 123 1234 12345 abcde abcedf,abcedfabcdefghijk

      5.3防止匹配过渡

      ？只能匹配一个字符，{n}和{m,n}也有一个重复次数的上限但是对于其他的，例如+、*等没有一个上限，有时候就会导致过渡匹配的情况，例如下面这个例子

      文本: Learn English is important,but in <b>CH</b>AND<b>JP<b>,the teachingis not available.

      正则表达式:<[Bb]>.* </[Bb]>

      结果: Learn English is important,but in <b>CH</b>AND<b>JP<b>,theteaching is not available.

      分析：显然，这个.*把第第二个</b>和第三个<b>都给一网打尽，虽然没有漏掉我们所需要的文本，但是，这两个b却莫名失踪了，还多匹配了一个and

            为什么会这样呢，是因为*和+都是“贪婪型”元字符，他们在进行匹配时是多多益善的而不是适可而止的。

           解决办法：使用这些元字符的“懒惰型”版本，使其匹配尽可能的少，

      常见的贪婪型元字符和他们的懒惰型版本

      贪婪型元字符

      懒惰型元字符

      *

      *?

      +

      +?

      {n,}

      {n,}?

       

      比如刚才那个例子

      正则表达式：<[Bb]>.*?</[Bb]>

      结果：LearnEnglish is  important,but in <b>CH</b>AND<b>JP<b>,theteaching is not available.

      6．匹配位置

      6.1单词边界：

      限定符\\b指定单词边界,b是英文boundary(边界)的首字母，例如

      文本：The catscattered his food all over the room.

      正则表达式：cat

      结果: The cat scatteredhis food all over the room.

      正则表达式：\\bcat\\b

      结果: The cat scattered his food all overthe room.

       

      如果想不匹配一个单词的边界（），使用\\B ，例如下面的例子匹配多余的空格

      文本: please enter the nine-digit id as it appears on your color – cpdedpass-key

      正则表达式:\\B-\\B

      结果：please enter the nine-digit id as it appears on your color– cpded pass-key

      分析：\\B-\\B

      将匹配一个前后都不是单词边界的连字符（因为空格和连字符都不是字母数字或下划线）。只有color – cpded中的连字符可以与之匹配

      6.2字符串边界

      6.2.1匹配字符串开头

      在第三章节中，我们知道使用^可以用来取非，其实他还有匹配一个字符串的开头

      当^出现在一个字符集合中（被放到[和]之间）并且紧跟在左方括号[的后面是，才能发挥“求非”作用。如果是在一个字符集合的外面并且位于一个模式的开头，^将匹配字符串的开头。例如,下面的测试可以检查一个文档是否为xml文档（xml文档必须是<?xmlversion="1.0"?>类型，而且必须放在开头）

      文本: this is not a xml document, real not a xmldocument

      <?xmlversion="1.0"ecoding=”utf-8” ?>
      <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML1.1//EN" " >
      <wml>
      <head>
      <access/>

      正则表达式：<\\?xml.*\\?>

      结果：this is not a xml document, real not a xmldocument

      <?xmlversion="1.0"ecoding=”utf-8” ?>
      <!DOCTYPEwml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" " >
      <wml>
      <head>
      <access/>

      我们就以为这是xml文件了，其实这不是xml文件，xml文件必须是在开头有上述标示才行

      正确的正则表达式：^\\s*<\\?xml.*?\\?>

       

      6.2.2匹配字符串结尾

      使用$即可

       

      6.2.3分行匹配

      （?m）说明是分行模式，必须出现在整个模式的最前面，下例将会找出所有的注释文章

      文本：

      String author()default "aaa";
       //aaaaaaa

       int[]arrayAttr() default {1};
       //bbbbbbbb
       MetaAnnotation annotationAttr() default@MetaAnnotation("");
       //ccccccc
       Class<PersonChiness> classType()default PersonChiness.class;

      正则表达式：(?m)^\\s*//.*$

      结果：Stringauthor() default "aaa";
       //aaaaaaa

       int[]arrayAttr() default {1};
       //bbbbbbbb
       MetaAnnotation annotationAttr() default@MetaAnnotation("");
       //ccccccc
       Class<PersonChiness> classType()default PersonChiness.class;
      警告：有许多正则表达式不支持(?m)

      7.使用子表达式

      7.1子表达式

      子表达式是一个更大的表达式的一部分，把一个表达式分解成一系列子表达式的目的就是为了把那些子表达式当做一个独立元素来使用。子表达式必须用()括起来

      例如 &nbsp;{2,}只能匹配&nbsp;;;;这样的文本

      只有(&nbsp;)(2,)才能匹配&nbsp; &nbsp; &nbsp; &nbsp;这样的文本（&nbsp;）是一个子表达式，它将被视为一个独立元素，而紧跟在它后面的{2，}将作用于这个子表达式

       

      例如我们想要匹配一个年份,|是或的意思

      文本 1949-05-10

      正则表达式19|20\\d{2}

      结果：1949-05-10

      因为上述表达式

      匹配19或者20后面再加连个数字，自然就匹配到了19

       

      正则表达式

      (19|20)d{2}

         结果1949-05-10

      7.2子表达式的嵌套

      子表达式允许嵌套，这样可以构造出功能强大的正则表达式来，但是这种嵌套最好遵循适可而止的原则，不然太复杂也看不懂.

      如果我们要匹配一个合法的IP地址,首先我们得把规则列举出来

      类似于255.255.255.255

      这里有4个模块。对于每一个模块，有以下几个规则

      l  任何一个1位或者2位的数字

      l  任何一个以1开头的3为数字

      l  任何一个以2开头，第二位在0-4之间的三位数字

      l  任何一个以25开头，第三位在0-5的三位数字

      正则表达式：

      (((\\d{1,2}）|(1\\d{2})|(2[0-4]\\d)|(25[0-5])）\\.){3}((\\d{1,2}）|(1\\d{2})|(2[0-4]\\d)|(25[0-5])）

      以上是关于Vue 全套教程，入门 Vue 必知必会的主要内容，如果未能解决你的问题，请参考以下文章

      正则表达式必知必会(修订版)整理教程

      资料 丨 新手入门手册《MySQL必知必会》！

      Vue组件通信应知必知

      MYSQL必知必会,详尽入门,一文帮你学会SQL必知必会

      《SQL必知必会》读书笔记

      SQL必知必会(第五版)