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

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