文档章节

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);
                        });
                    }

 

© 著作权归作者所有

共有 人打赏支持
杜宝
粉丝 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
谈谈 sizeToFit 与 sizeThatFit

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

法斗斗
06/29
0
0
Block_概要和回调上的应用

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

LouDev
2014/10/09
1K
2

没有更多内容

加载失败,请刷新页面

加载更多

20180920 rzsz传输文件、用户和用户组相关配置文件与管理

利用rz、sz实现Linux与Windows互传文件 [root@centos01 ~]# yum install -y lrzsz # 安装工具sz test.txt # 弹出对话框,传递到选择的路径下rz # 回车后,会从对话框中选择对应的文件传递...

野雪球
今天
1
0
OSChina 周四乱弹 —— 毒蛇当辣条

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @ 达尔文:分享花澤香菜/前野智昭/小野大輔/井上喜久子的单曲《ミッション! 健?康?第?イチ》 《ミッション! 健?康?第?イチ》- 花澤香菜/前野智...

小小编辑
今天
6
2
java -jar运行内存设置

java -Xms64m #JVM启动时的初始堆大小 -Xmx128m #最大堆大小 -Xmn64m #年轻代的大小,其余的空间是老年代 -XX:MaxMetaspaceSize=128m # -XX:CompressedClassSpaceSize=6...

李玉长
今天
1
0
Spring | 手把手教你SSM最优雅的整合方式

HEY 本节主要内容为:基于Spring从0到1搭建一个web工程,适合初学者,Java初级开发者。欢迎与我交流。 MODULE 新建一个Maven工程。 不论你是什么工具,选这个就可以了,然后next,直至finis...

冯文议
今天
1
0
RxJS的另外四种实现方式(四)——性能最高的库(续)

接上一篇RxJS的另外四种实现方式(三)——性能最高的库 上一篇文章我展示了这个最高性能库的实现方法。下面我介绍一下这个性能提升的秘密。 首先,为了弄清楚Most库究竟为何如此快,我必须借...

一个灰
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部