JavaScript正则表达式,cookie以及vue的简单实例

正则表达式概述

1.什么是正则表达式:是一个特性的字符串模版
提供一种字符模式的模版,来验证输入项中数据的合法性
2.正则表达式是a-z和特殊字符(元字符)组成

正则表达式(重点)

1.字符类
2.量词
3.指定匹配位置
4.选择匹配符
5.分组
正则表达式的格式:
var 变量名=/正则表达式/

正则表达式判定(重点)

1.test()方法:匹配成功,返回true,匹配不成功返回false
格式:变量名.test("要匹配的字符串");
2.exec()方法:匹配不成功返回null,匹配成功,返回数组
格式:变量名.exec("要匹配的字符串");
数组中的元素,可以根据下标来获取

正则表达式-字符类

1.[...]:在方括号内指定一个或者多个字符组成的字符列表,与字符列表中任意字符匹配,都被认为是匹配的。每次匹配只能匹配列表中的一个字符。可以使用连接字符-来指定范围匹配
2.[^...]:匹配列表中指定字符以外的所有字符,可以使用连接字符-来指定范围不匹配
3..:匹配除换行符\n和回车符之外的任何单个字符,等效于[^\n\r]
4.\d:匹配一个数字字符,等效于[0-9]
5.\D:与\d互补
6.\s:匹配任何Unicode空白字符,包括空格、制表符、换页符等,等效于[\f\t\n\r]
7.\S:与\s互补
8.\w:匹配包括下划线的任何单个字符,包括A~Z,a~z,0~9和下划线"_",等效于[a-zA-Z0-9_]

正则表达式-量词

?	出现零次或一次(最多出现一次)
+	出现一次或多次(至少出现一次)
*	出现零次或多次(任意次)
{n}	出现n次
{n,}	至少出现n次
{n,m}	出现n到m次

正则表达式-指定匹配位置

^ (脱字符)匹配开头,在多行匹配中匹配行开头。
$ (美元符号)匹配结尾,在多行匹配中匹配行结尾。
\b 匹配单词边界
\B 匹配单词的非边界

正则表达式-选择匹配符

正则表达式的选择匹配符只有一个"|",使用"|"可以匹配指定的多个选项中的任意一项。

例如/World|Dream/可以匹配"One World One Dream"中的World或者Dream

正则表达式-分组

分组就是使用小括号将多个单独的字符或字符类组合成子表达式,以便可以像处理一个独立的单元那样,用"|"、"*"、"+"或者"?"等来处理他们。比如/J(ava)?Script/可以匹配JavaScript,也可以匹配JScript 

正则表达式案例(重点)

案例:要一个输入框,一个按键,输入框输入身份证,点击按键,弹出生日,如果身份证号码不正确,那么弹出'请输入合法的身份证号'
思路:
1.获取输入的信息
2.正则表达式判定
3.获取生日打印出来
4.输入错误提示

cookie的概述和组成

1.什么是cookie:是一个保存在客户机中的简单的文本文件.
2.有什么用:这个文件与特定的 Web 文档关联在一起, 保存了该客户机访问这个Web 文档时的信息, 当客户机再次访问这个 Web 文档时这些信息可供该文档使用。
3.cookie的组成:cookie由名/值对形式的文本组成:name=value。
4.JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie。
完整格式为:
document.cookie = 'user=值;[expires=失效时间; path=路径访问; domain=域名访问; secure=安全的https限制通信]'
中括号是可选,name=value是必选。

案例:向本地磁盘写入cookie,内容为用户名和昵称,并在页面上弹出cookie的内容

cookie的局限性

第一:每个特定的域名下最多生成20个cookie(根据不同的浏览器有所区别)

第二:cookie的最大大约为4096字节(4k),为了更好的兼容性,一般不能超过4095字节即可。

第三:cookie存储在客户端的文本文件,所以特别重要和敏感的数据是不建议保存在cookie的。比如银行卡号,用户密码等

Vue.js框架简单描述

Vue.js是什么:是一套构建用户界面的渐进式框架
渐进式框架说明:
Vue.js框架有很多东西,你可以先使用一部分,然后逐渐的使用全部
有什么用:Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件,它不仅易于上手,还便于与第三方库或既有项目整合.

Vue.js引入到html文件中

<script language="JavaScript" src="js/vue.min.js">
</script>

Vue.js的helloworld

	<body>
		<div id="app">
		  <p>{{ message }}</p>
		</div>
		
		<script>
		new Vue({
		  el: '#app',
		  data: {
		    message: 'Hello Vue.js!'
		  }
		})
		</script>
	</body>

<!--
div 标签可以把文档分割为独立的、不同的部分
{{message}} : 表示view。

new Vue():表示创建Vue对象,用于连接view和model。

el:表示指向view。

data:表示指向model。

通过Vue对象连接view和model,{{message}}就可以获取到Vue对象中data定义的message的内容。
-->

Vue.js的绑定元素


<!--
span用来组合文档中的行内元素,span 没有固定的格式表现。
当对它应用样式时,它才会产生视觉上的变化
v-bind:称为指令,将这个元素节点的 title 特性
和 Vue 实例的 mes 属性保持一致
-->

猜你喜欢

转载自blog.csdn.net/BS936/article/details/107771929