[TOC]

day03Vue正则表达式

1. Vue简介

2. Vue之Helloworld

  • html

  • {{stuName}}
  • js

  • 步骤
    1. 准备挂载点【id】
    2. new Vue()对象
    3. 设置Vue中属性
      • el
      • data

3. Vue中注意事项

  • 一般一个Vue对象，对应一个挂载点
  • 挂载点一般用id设置
  • Vue对象中属性是固定值，如【el、data、methods等】，属性值是可变的
  • Vue环境中的挂载点位置，实际上是html和js结合代码
  • Vue中一般使用两种语法，绑定数据
    • 插入绑定
    • 语法：{{}}
    • 指令绑定
    • v-bind:value
    • v-model:value
    • 等..

4. Vue中单向绑定和双向绑定

4.1 单向绑定

  • 语法
    • 标准语法，v-bind:value
    • 简写语法，:value
  • 作用：将Vue对象中数据，流向挂载点中
  • 适用场景：绑定表单中value属性值
  • 示例代码

  • 用户名：

    用户名2：

  • var vm = new Vue({
    el:”#context”,
    data:{
    “un”:”guoqian”
    }
    });

4.2 双向绑定

  • 语法：
    • 标准语法，v-model:value
    • 简写语法，v-model
  • 作用：将Vue对象中数据流向至挂载点，反向，将挂载点中数据流向Vue对象中
  • 示例代码

  • 邮箱：

    邮箱2：

    结果：{{email}}
  • new Vue({
    el:”#app”,
    data:{
    “email”:”zhenhua@163.com”
    }
    });

4.3 绑定样式表

  • 语法：
    • 标准语法，v-bind:class
    • 简写语法，:class
  • 作用：动态绑定样式表
  • 示例代码







  • 段落一


    段落2


    段落3





5. Vue中条件渲染

5.1 if-else

  • 语法：
    • v-if
    • v-else
  • 特点：当条件为true只显示if中数据，条件为false只显示else中数据【不显示数据，不加载】

5.2 show

  • 语法
    • v-show
  • 特点：当条件为true时显示数据，条件为false时隐藏数据【display：none】
  • 示例代码


  • 段落一


    段落二


    段落三





6. Vue中列表渲染

  • 语法
    • v-for
  • 作用：渲染列表
  • 示例代码



    • {{stuName}}















    学生学号 学生性别 学生年龄 学生性别
    {{index}} {{student.stuName}} {{student.stuAge}} {{student.stuGender}}




7. Vue中事件驱动

7.1 语法

  • 标准语法，v-on:事件名
  • 简写语法，@事件名

7.2 示例代码

<div id="app"><br />        <form action="target.html" method="post"><br />            用户名：<input @blur="checkUserName" v-model="uname" type="text" name="username"><br />                    <span>{{userNameMsg}}</span><br />            <br><br />            密码：<input @blur="checkPwd" v-model="password" type="password" name="pwd"><br />                    <span>{{pwdMsg}}</span><br />            <br><br />            <input type="submit" @click="checkLogin" value="登录"><br />        </form><br />    </div>




8. Vue中this关键字

8.1 Js中this

  • 在函数外面：this关键字指向window对象（代表当前浏览器窗口）
  • 在函数里面：this关键字指向调用函数的对象
  • 在js中，this关键字可变的

8.2 Vue中this

  • 在函数外面：this关键字指向window对象（代表当前浏览器窗口）
  • 在函数里面：this关键字指向Vue对象
    • this = vm

9. Event对象

9.1 定义

  • Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

9.2 Event对象常用属性&方法

  • 属性
    • target：返回触发此事件的元素（事件的目标节点）。
  • 方法
    • preventDefault()：取消控件默认行为【通知浏览器不要执行与事件关联的默认动作。】
    • stopPropagation()：取消事件冒泡【不再派发事件。】

10. Vue中侦听属性

  • Vue侦听属性语法
  • var app = new Vue({
    el:”#app”,
    data:{
    “firstName”:”jim”,
    “lastName”:”green”,
    “fullName”:”jim green”
    },
    methods:{},
    watch:{
    “firstName”:function(inputValue){
    this.fullName = inputValue + “ “ + this.lastName;
    },
    “lastName”:function(inputValue){
    this.fullName = this.firstName + “ “ + inputValue;
    }
    }
    });

11. Vue的生命周期

程序中的生命周期概念：指对象从创建到销毁的过程

11.1 Vue生命周期概述

  • 创建对象
    • 创建对象之前【beforeCreate】
    • 创建对象之后【created】
  • 数据挂载
    • 数据挂载之前【beforeMount】
    • 数据挂载之后【Mounted】
  • 数据更新
    • 数据更新之前【beforeUpdate】
    • 数据更新之后【updated】
  • 销毁对象
    • 销毁对象之前【beforeDestroy】
    • 销毁对象之后【destroyed】

12. 正则表达式

12.1 为什么使用使用正则表达式

  • 因为：验证较复杂数据格式时，使用原生js非常复杂，此时建议使用正则表达式

12.2 什么是正则表达式

  • 正则表达式：一组验证数据规则

12.3 正则表达式语法

  • 官网语法：var reg = /正则规则/;
  • 常用语法：var reg2 = /^[验证规则]{n,m}$/;
    • []：定义正则规则
    • {}：定义匹配次数
    • {n}：只能匹配n次
    • {n,}：匹配>=n次
    • {n,m}：n<=匹配次数<=m

12.4 正则常用方法

  • test()：使用test()验证数据合法性
    • 返回true：数据合法
    • 返回false：数据非法

12.5 正则表达式特殊用法

  • 特殊字符
  • 【.】：匹配除“_n*”之外的任何单个字符。要匹配包括“*n_”在内的任何字符，请使用像“(.|\n)”的模式。
  • 【\w】：等价于“[A-Za-z0-9_]”。
  • 【\d】：等价于[0-9]。
  • 特殊次数
  • 【*】：等价于{0,}。
  • 【+】：等价于{1,}。
  • 【?】：等价于{0,1}。

12.6 示例代码

<div id="app"><br />        <form action="login_success.html" method="post"><br />            用户名：<input @blur="checkUserName" v-model="uname" type="text" name="username"><br />                    <span>{{userNameMsg}}</span><br />            <br><br />            密码：<input v-model="password" type="password" name="pwd"><br />                    <span>{{pwdMsg}}</span><br />            <br><br />            <input type="submit" value="登录"><br />        </form><br />    </div>