文档章节

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

杜宝
 杜宝
发布于 2017/08/30 13:51
字数 1140
阅读 26
收藏 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
博文 41
码字总数 31704
作品 0
兰州
私信 提问
除了招聘网站外有其他途径可以找到理想的公司吗

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

zgw06629
2015/04/20
1K
16
element源码分析系列4--Radio巧夺天公的设计思想

前言 学习就好比是座大山,人们沿着不同的路登山,分享着自己看到的风景。你不一定能看到别人看到的风景,体会到别人的心情。只有自己去登山,才能看到不一样的风景,体会更加深刻。一千个读...

hello等风来
06/06
0
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
312
0
Python正则表达式:最短匹配

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

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

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

文艺小青年
2017/06/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Boot + Mybatis-Plus 集成与使用(二)

前言: 本章节介绍MyBatis-Puls的CRUD使用。在开始之前,先简单讲解下上章节关于Spring Boot是如何自动配置MyBatis-Plus。 一、自动配置 当Spring Boot应用从主方法main()启动后,首先加载S...

伴学编程
昨天
7
0
用最通俗的方法讲spring [一] ──── AOP

@[TOC](用最通俗的方法讲spring [一] ──── AOP) 写这个系列的目的(可以跳过不看) 自己写这个系列的目的,是因为自己是个比较笨的人,我曾一度怀疑自己的智商不适合干编程这个行业.因为在我...

小贼贼子
昨天
7
0
Flutter系列之在 macOS 上安装和配置 Flutter 开发环境

本文为Flutter开发环境在macOS下安装全过程: 一、系统配置要求 想要安装并运行 Flutter,你的开发环境需要最低满足以下要求: 操作系统:macOS(64位) 磁盘空间:700 MB(不包含 IDE 或其余...

過愙
昨天
6
0
OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
昨天
2.7K
16
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
昨天
42
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部