文档章节

label 与laber for的区别之鸡零狗碎

杜宝
 杜宝
发布于 2017/08/30 13:51
字数 1140
阅读 15
收藏 0
点赞 0
评论 0

label 与laber for的区别

先上代码:

   <form role="form" >
        <div class="form-group">
            <label>user</label>
            <input type="text" class="form-control">
            <label for="username">user</label>
            <input type="text" id="username" class="form-control" placeholder="请输入用户名">
        </div>

    </form>

在上效果:

for属性相当于绑定 label 和input,但点击 label的时候,鼠标会focus到相应的input上

form中的role属性

html 里面的 role 本质上是增强语义性,当现有的HTML标签不能充分表达语义性的时候,就可以借助role来说明。通常这种情况出现在一些自定义的组件上,这样可增强组件的可访问性、可用性和可交互性。

在html5中的话,不建议使用

v-if 于v-show

v-if 是“真正的”条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。

相比之下, v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。

一般来说, v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件不太可能改变,则使用 v-if 较好

    js中的splice() 方法与 slice() 方法

  1. splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。(修改原数组
<script type="text/javascript">

var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"

document.write(arr + "<br />")
arr.splice(2,0,"William")
document.write(arr + "<br />")

</script>
//输出结果是
George,John,Thomas,James,Adrew,Martin
George,John,William,Thomas,James,Adrew,Martin
  1. slice() 方法可从已有的数组中返回选定的元素。(不修改原数组
<script type="text/javascript">

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr + "<br />")
document.write(arr.slice(1) + "<br />")
document.write(arr)

</script>
//输出结果是
George,John,Thomas
John,Thomas
George,John,Thomas

Vue中对象数组怎么初始化+赋值

 var vue= new  Vue({
                el:'.box',
                data:{
                  userData:[ {name:'Jack',passwd:'hahha'},{name:'Nick',passwd:'213123'}],
                    username:'',
                    password:'',
                    nowIndex:-100

                },

动态添加对象到数组:

   this.userData.push({
                            name:this.username,
                            passwd:this.password

                        });

input type 中:button和submit的区别

type = "submit" 用在表单内,里面有类似的默认方法封装,普通单击就是提交所在表单
type = "button" 就是说这个是个普通的按钮,如果不写单击等事件,那么这个按钮点击是没有任何反应的,
所有事件都需要自己手动写

Vue事件

事件对象:$event

事件冒泡:由内至外,由下至上在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。

以下事件不冒泡:blur、focus、load、unload。

阻止冒泡:

  1. 标签上@click.stop
  2. 标签上接受参数为事件对象($event)然后在函数体内ev.cancelBubble=true

阻止默认行为

例子:鼠标右键点击事件

  1. @contextmenu.prevent
  2. ev.preventDefault();
  • 获取键盘按键---键码,用于Web游戏
  1.           event.keycode
  2.           @keyup.13="pressEntry()"

标签属性

v-bind 绑定属性值     缩写    :src

图片例子

<img v-bind:src="url" alt="">

  1. :calss  
  •  :class="[red]"  red是数据   
  • :class="[a,b,c]"  可以是数组
  • :class="{red:a,blue:false}" 可以使json
  1. :style
  •  :style="[red]"  red是数据   
  • :style="[a,b,c]"  可以是数组
  • :style="{red:a,blue:false}" 可以使json ,json 必须使用驼峰命名法

模板

  • {{message}}  动态渲染
  • {{*message}}  只渲染一次

过滤器

  • uppercase
  • lowercase
  • capitalize 首字母大写  {{'ascasc' | capitalize}} 首字母大写
  • currency 美元格式     {{num |currency 参数}}    例: curency '¥'

vue-resouce用于交互的模块($http)

  • get
//获取一个文本数据
function(){

this.$http.get('get.php',{a:1,b:2}).then(function(res){

alert(res.data);
},function(res){alert(res.status);}

)



}
  • post
     window.onload=function(){
            new Vue({
                el:'body',
                data:{

                },
                methods:{
                    get:function(){
                        this.$http.post('post.php',{
                            a:1,
                            b:20
                        },{
                            emulateJSON:true  //消息头,区分于get
                        }).then(function(res){
                            alert(res.data);
                        },function(res){
                            alert(res.status);
                        });
                    }
                }
            });
        };
  • jsonp(本质是走get)
     get:function(){
                        this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
                            wd:'a'
                        },{
                            jsonp:'cb'//关键字
                        }).then(function(res){
                            alert(res.data.s);
                        },function(res){
                            alert(res.status);
                        });
                    }

 

© 著作权归作者所有

共有 人打赏支持
杜宝
粉丝 2
博文 33
码字总数 16488
作品 0
兰州
FCF学习笔记三之setDataXML与setDataURL

先贴下使用setDataXML的例子: <div id="chartdiv" align="center"> 存放fusionChartsdiv区域 </div> <script type="text/javascript"> var myCharts = new FusionCharts("FusionCharts/Col......

battier
2011/07/01
0
0
Python正则表达式:最短匹配

最短匹配应用于:假如有一段文本,你只想匹配最短的可能,而不是最长。 例子 比如有一段html片段,'this is first labelthe second label',如何匹配出每个a标签中的内容,下面来看下最短与最...

j_hao104
2016/10/23
73
0
改善C#程序的建议6:在线程同步中使用信号量

所谓线程同步,就是多个线程之间在某个对象上执行等待(也可理解为锁定该对象),直到该对象被解除锁定。C#中对象的类型分为引用类型和值类型。CLR在这两种类型上的等待是不一样的。我们可以...

文艺小青年
2017/06/29
0
0
Block_概要和回调上的应用

block是iOS4.0之后新增的特性,现在我们看案列代码都能够看到block的应用。最普遍的就是用作回调。 一.关于block的一些基础信息 1.建立block,看下面两个例子 void (^block)(void); //这是一...

LouDev
2014/10/09
1K
2
谈谈 sizeToFit 与 sizeThatFit

先看看苹果官方文档对这连个的方法的解释: 意思是说,sizeThatFits: 会计算出最优的 size 但是不会改变 自己的 size,而 sizeToFit: 会计算出最优的 size 而且会改变自己的 size。那么两者的...

法斗斗
06/29
0
0
getter\setter方法来设置读取内容和赋值内容

getter和setter方法以get、set开头,后面跟的就是属性的名字,如getLabel 定义好方法后,就可以像普通属性一样使用。但是有本质区别:当这种属性被读取是,对应的getter方法被调用,当属性被...

任意球master
07/12
0
0
gtkaml 0.6 beta1 发布,Gtk+的UI开发包

gtkaml 0.6 beta1 发布,该版本包含了一种全新的方法用于跟 Vala 编译器进行交互,除此之外跟老版本没什么区别,除了兼容 Vala 0.12/0.14/0.15、命令行中源文件顺序不再相关,支持自定义创建...

红薯
2012/01/04
656
1
用矩阵的概念思考图形界面的解决方案

从线性代数和矩阵的角度,我获得一个灵感,是关于如何操作U I界面的。 一, 图形界面的静态部分 1, 将需要显示的每个数据元素,以及相应的U I元素,组成一个对象。例如有n个这样的对象。每个对...

徐朝_尼克徐
2017/11/26
0
0
word2vec/lstm on mxnet with NCE loss

Softmax是用来实现多类分类问题常见的损失函数。但如果类别特别多,softmax的效率就是个问题了。比如在word2vec里,每个词都是一个类别,在这种情况下可能有100万类。那么每次都得预测一个样...

xlvector
2016/07/18
0
0
iOS学习2:创建属于自己的页面,自定义初始界面

一、新建一个Single View Application 二、在项目中按command+N新建文件,命名为MyViewController,下面的勾选项是选择是否生成与其对应的xib文件,选择第二个是生成iPhone视图,选择第一个生...

芳仔小脚丫
2013/06/09
0
4

没有更多内容

加载失败,请刷新页面

加载更多

下一页

我的成长记录(一)

今天突然精神抖擞,在我的博客下新开一项分类>成长记录,专门记录每隔一段时间我的一点感悟吧。因为今天才专门花时间新开这样一个分类,所以以前有过的一些感悟没有记录下来,现在已经想不起...

dtqq
11分钟前
0
0
机器学习管理平台 MLFlow

最近工作很忙,博客一直都没有更新。抽时间给大家介绍一下Databrick开源的机器学习管理平台-MLFlow。 谈起Databrick,相信即使是不熟悉机器学习和大数据的工程湿们也都有所了解,它由Spark的...

naughty
今天
0
0
idea tomcat 远程调试

tomcat 配置 编辑文件${tomcat_home}/bin/catalina.sh,在文件开头添加如下代码。    CATALINA_OPTS="-Xdebug -Xrunjdwp:transport=dt_socket,server=y,suspend=n,address=7829" Idea端配......

qwfys
今天
1
0
遍历目录下的文件每250M打包一个文件

#!/usr/bin/env python # -*- utf-8 -*- # @Time : 2018/7/20 0020 下午 10:16 # @Author : 陈元 # @Email : abcmeabc@163.com # @file : tarFile.py import os import tarfile import thr......

寻爱的小草
今天
1
0
expect同步文件&expect指定host和要同步的文件&构建文件分发系统&批量远程执行命令

20.31 expect脚本同步文件 expect通过与rsync结合,可以在一台机器上把文件自动同步到多台机器上 编写脚本 [root@linux-5 ~]# cd /usr/local/sbin[root@linux-5 sbin]# vim 4.expect#!/...

影夜Linux
今天
1
0
SpringBoot | 第九章:Mybatis-plus的集成和使用

前言 本章节开始介绍数据访问方面的相关知识点。对于后端开发者而言,和数据库打交道是每天都在进行的,所以一个好用的ORM框架是很有必要的。目前,绝大部分公司都选择MyBatis框架作为底层数...

oKong
今天
13
0
win10 上安装解压版mysql

1.效果 2. 下载MySQL 压缩版 下载地址: https://downloads.mysql.com/archives/community/ 3. 配置 3.1 将下载的文件解压到合适的位置 我最终将myql文件 放在:D:\develop\mysql 最终放的位...

Lucky_Me
今天
2
0
linux服务器修改mtu值优化cpu

一、jumbo frames 相关 1、什么是jumbo frames Jumbo frames 是指比标准Ethernet Frames长的frame,即比1518/1522 bit大的frames,Jumbo frame的大小是每个设备厂商规定的,不属于IEEE标准;...

问题终结者
今天
2
0
expect脚本同步文件expect脚本指定host和要同步的文件 构建文件分发系统批量远程执行命令

expect脚本同步文件 在一台机器上把文件同步到多台机器上 自动同步文件 vim 4.expect [root@yong-01 sbin]# vim 4.expect#!/usr/bin/expectset passwd "20655739"spawn rsync -av ro...

lyy549745
今天
1
0
36.rsync下 日志 screen

10.32/10.33 rsync通过服务同步 10.34 linux系统日志 10.35 screen工具 10.32/10.33 rsync通过服务同步: rsync还可以通过服务的方式同步。那需要开启一个服务,他的架构是cs架构,客户端服务...

王鑫linux
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部