【学习】es6实战+vue了解＋vue安装

最新推荐文章于 2024-04-18 14:59:03 发布

plexiglass

最新推荐文章于 2024-04-18 14:59:03 发布

阅读量581

点赞数

文章标签： vue.js javascript html

本文链接：https://blog.csdn.net/plexiglass/article/details/122657735

版权

2022.1.21

#es6实战

【1】用户名验证

功能需求：

如果用户名输入合法, 则后面提示信息为 : 用户名合法,并且颜色为绿色
如果用户名输入不合法, 则后面提示信息为: 用户名不符合规范, 并且颜色为绿色
分析：

用户名只能为英文字母,数字,下划线或者短横线组成, 并且用户名长度为 6~16位.

首先准备好这种正则表达式模式 /$[a-zA-Z0-9-_]{6,16}^/

当表单失去焦点就开始验证.

如果符合正则规范, 则让后面的span标签添加 right 类.

如果不符合正则规范, 则让后面的span标签添加 wrong 类.

<body>
    <input type="text" class="uname"> <span>请输入用户名</span>
    <script>
        //  量词是设定某个模式出现的次数
        var reg = /^[a-zA-Z0-9_-]{6,16}$/; // 这个模式用户只能输入英文字母 数字 下划线 短横线但是有边界符和[] 这就限定了只能多选1
        // {6,16}  中间不要有空格
        // console.log(reg.test('a'));
        // console.log(reg.test('8'));
        // console.log(reg.test('18'));
        // console.log(reg.test('aa'));
        // console.log('-------------');
        // console.log(reg.test('andy-red'));
        // console.log(reg.test('andy_red'));
        // console.log(reg.test('andy007'));
        // console.log(reg.test('andy!007'));
        var uname = document.querySelector('.uname');
        var span = document.querySelector('span');
        uname.onblur = function() {
            if (reg.test(this.value)) {
                console.log('正确的');
                span.className = 'right';
                span.innerHTML = '用户名格式输入正确';
            } else {
                console.log('错误的');
                span.className = 'wrong';
                span.innerHTML = '用户名格式输入不正确';
            }
        }
    </script>
</body>

【2】表单验证

分析：

1.手机号码: /^1[3|4|5|7|8][0-9]{9}$/

2.QQ: [1-9][0-9]{4,} (腾讯QQ号从10000开始)

3.昵称是中文: ^[\u4e00-\u9fa5]{2,8}$

<body>
    <script>
        // 座机号码验证:  全国座机号码  两种格式:   010-12345678  或者  0530-1234567
        // 正则里面的或者 符号  |  
        // var reg = /^\d{3}-\d{8}|\d{4}-\d{7}$/;
        var reg = /^\d{3,4}-\d{7,8}$/;
    </script>
</body>

#vue初见

【1】什么是vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动
【2】为vue配置环境

1.在Vue.js的官网上直接下载vue.js,并在.html中通过<script>标签中引用。

2.CDN

<! – 引入CDN开发版 -->

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

3.NPM

1）从node.js官网下载并安装node，安装过程很简单，一直点下一步就ok了，安装完之后，我们通过打开命令行工具（win+R）,输入

    node -v 命令，查看node的版本，若出现相应的版本号，则说明你安装成功了。

2）npm包管理器，是集成在node中的，所以安装了node也就有了npm,直接输入 npm -v 命令，显示npm的版本信息。

3）安装cnpm
到目前为止，node的环境已经安装完成，npm 包管理器也有了，由于有些npm资源被屏蔽或者是国外资源的原因，经常会导致npm安装依赖包的时候失败，所以我们还需要npm的国内镜像----cnpm.

npm install -g cnpm --registry=http://registry.npm.taobao.org

在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org

4）

vue-cli 脚手架构建工具

npm install -g vue-cli

在命令行中运行命令 npm install -g vue-cli ，然后等待安装完成。

安装完成后，我们需要准备的环境和工具都准备好了

5）初始化一个vue项目

新建一个vue-project文件
在命令行中运行命令 vue init webpack firstApp（初始化一个完整版的项目）

输入命令后，会询问我们几个简单的选项，我们根据自己的需要进行填写就可以了。

Project name :项目名称，如果不需要更改直接回车就可以了。注意：这里不能使用大写，所以我把名称改成了firstapp
Project description:项目描述，默认为A Vue.js project,直接回车，不用编写。
Author：作者，如果你有配置git的作者，他会读取。
Install vue-router? 是否安装vue的路由插件，我们这里需要安装，所以选择Y
Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。我们这里不需要输入n（建议）
setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha，我们这里不需要，所以输入n。
Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试，我们这里不需要，所以输入n
运行初始化命令的时候会让用户输入几个基本的配置选项，如项目名称、项目描述、作者信息，对于有些不明白或者不想填的信息可以一直按回车去填写就好了，等待一会，就会显示创建项目创建成功
创建成功后，我们进入项目目录

6）

运行项目

在项目目录中，运行命令 npm run dev （npm run start），会用热加载的方式运行我们的应用，热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。

7）

在idea中搭建vue开发环境

在idea中打开刚才创建的vue项目

在idea->terminal控制台中启动项目

plexiglass

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【学习】es6实战+vue了解＋vue安装

2022.1.21#es6实战【1】用户名验证功能需求：如果用户名输入合法, 则后面提示信息为 : 用户名合法,并且颜色为绿色如果用户名输入不合法, 则后面提示信息为: 用户名不符合规范, 并且颜色为绿色分析：用户名只能为英文字母,数字,下划线或者短横线组成, 并且用户名长度为 6~16位.首先准备好这种正则表达式模式 /$[a-zA-Z0-9-_]{6,16}^/当表单失去焦点就开始验证.如果符合正则规范, 则让后面的span标签添加 right 类.如果不符合正则
复制链接

扫一扫