文档章节

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

杜宝
 杜宝
发布于 2017/08/30 13:51
字数 1140
阅读 15
收藏 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);
                        });
                    }

 

© 著作权归作者所有

共有 人打赏支持
杜宝
粉丝 3
博文 37
码字总数 30098
作品 0
兰州
私信 提问
除了招聘网站外有其他途径可以找到理想的公司吗

在目前所在公司干的不是很顺心,入职以来尽是开发一些鸡零狗碎、虎头蛇尾的项目,对同事也不是很满意,没有技术交流,也没有什么牛人。萌生离职年头, 但求职网上看了一下感觉基本上都是一些...

zgw06629
2015/04/20
1K
16
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
谈谈 sizeToFit 与 sizeThatFit

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

法斗斗
06/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Cloud Alibaba Sentinel 整合 Feign 的设计实现

作者 | Spring Cloud Alibaba 高级开发工程师洛夜 来自公众号阿里巴巴中间件投稿 前段时间 Hystrix 宣布不再维护之后(Hystrix 停止开发。。。Spring Cloud 何去何从?),Feign 作为一个跟 ...

Java技术栈
3分钟前
0
0
虚拟机加密

在超融合的基础设施和虚拟化成为常态的世界里,对加密的要求越来越高,越来越迫切,IT部门需考虑的重大安全问题和方法也浮现了出来。 物理数据中心时代,采取双保险式数据安全方法是相对简单...

linuxCool
6分钟前
0
0
MySQL 主从同步

MySQL主从介绍 MySQL主从又叫做Replication、AB复制。简单讲就是A和B两台机器做主从后,在A上写数据,另外一台B也会跟着写数据,两者数据实时同步的 MySQL主从是基于binlog的,主上须开启bin...

野雪球
18分钟前
0
0
OSChina 周一乱弹 —— 温柔的人应该这样

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @clouddyy :#每日一歌# 《フィクション-sumika》 《フィクション-sumika》 手机党少年们想听歌,请使劲儿戳(这里) 假期时间干嘛去, @for...

小小编辑
今天
118
7
[LintCode] Serialize and Deserialize Binary Tree(二叉树的序列化和反序列化)

描述 设计一个算法,并编写代码来序列化和反序列化二叉树。将树写入一个文件被称为“序列化”,读取文件后重建同样的二叉树被称为“反序列化”。 如何反序列化或序列化二叉树是没有限制的,你...

honeymose
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部