v-on绑定事件,简写@,
要拿到事件对象,可以直接在methods里写函数传形参,如:
事件对象如果有自定义参数,一定要用$event显示出来,否则第一个参数默认为事件对象。
如果单传一个event,那是一个实参,并没有赋值,所以不行,加上$符就会去寻找Vue内置的event对象。
如果有自定义参数,一定要用$event显示出来,若没有,函数第一个形参就是事件对象e,
上面形参如果不用$enent时,则在vue中找不到event对象,是undefined。
(通常规范下:$event会放在最后一个形参,对应的methods里的函数方法也会在最后一个形参放e)
事件修饰符
v-on:click.stop='click(1)'----------------就可以完成阻止事件冒泡
v-on:click.prevent='iptClick'------------阻止默认事件
v-on:click.capture='catchClick'---------阻止事件捕获
.self表示你触发的这个事件必须是我自己
.once只绑定一次事件
系统键:
.ctrl
.alt
.shift
.meta
(在Mac系统键盘上,meta对应command键,在windows系统键盘meta对应windows徽标键),在Sun操作系统键盘上,meta对应实心宝石键。在其他特定键盘上,尤其在MIT 和Lisp机器的键盘,以及其后续产品,如knight键盘、space-cadet键盘,meta被标记为'META'.在symbolics键盘上,meta被标记为'META'或者'Meta'。
事件修饰符是可以链式调用的
即为input框绑定了一个按下enter触发的事件
v-model能实时拿到表单中的值,如:
.trim()能清除前后的空格
文本表单:
复选框:
---//这里的checked放布尔值
多选框:
请选择你的爱好:
--------这样就选一个就会全部选中,如何让他们关联呢?
给每个checkbox里加上value值
请选择你的爱好:
data里命名一个 favArr 里面放一个空数组。
favArr=[1]-------表示选中value为1的值,一定要和value匹配
favArr.push(2)------1 2一起选中
一般value值写数字,因为从接口中调出来的经常有数组,
favList:[
{id:1 , label:'读书'},
{id:2 , label:'编程'},
{id:3 , label:'跑步'},
{id:4 , label:'打游戏'}
]-----------用v-for循环渲染到页面中
请选择你的爱好
下拉选框:
Selected: {{ selected }}
下拉选框的多选:
多选就是要给select加上一个multiple属性(按住ctrl键)
单选框:
Picked: {{ picked }}
复选框:
Checked names: {{ checkedNames }}
表单修饰符:
都可以链式调用
v-model.number='aaa'--------把一个数字的字符串转成number类型。
v-model.trim='bbb'----------去掉开头和结尾的空格
v-model.lazy='ccc'------------等你输完之后再去改变(失去焦点),不会输一次内容触发一次
只有表单和事件有修饰符
在Vue视图里,用data变量不需要加this,this仅在methods方法里写函数时调用声明值需要用到。
变异方法---------改变原数组的数组方法splice,push,pop等等
非变异方法-------不改变原数组组的方法concat,split等等
vue实例,也叫vue组件,
生命周期
钩子函数:
errorCaptured组件有bug触发
$destroyed-----手动销毁
在created和before create之间做了很多处理
(注入和响应式处理),声明式变量遍历,进行响应式处理,挂载当前组件实例对象上。
beforemount mounted之间先找el挂载的组件,然后触发beforemount,发生了替换,创建了虚拟dom(json文件),从而替换被挂载页面中的那些vue指令 (mounted意为挂载)
beforeUpdate updated中间进行了Diff运算,找出虚拟dom中变化的最小节点,把真实的DOM操作更新在页面中,(在值更新完成触发beforeUpdate,在视图更新响应完成后触发updated)
也是比较特殊的两个可以触发多次的钩子函数
bedestoryed destoryed把响应式里的监听器移除,并把各个组件的事件绑定,响应式的变量(通常在这两者之间去销毁定时器)
调接口放在created 或者mounted里调,mounted里调接口更多