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