陈悦玲2020.0.16
-
事件修饰符
- .stop : 阻止默认事件(冒泡事件)
- .prevent : 阻止默认跳转(a标签)
- .capture :实现捕获阶段机制
- .self : 只有点击自身的时候,才会触发事件(只会阻止自己身上冒泡行为的触发,并不会阻止其他的东西发生冒泡)
- .once : 只触发一次事件处理函数
-
v-model指令的学习
-
v-bind只能实现数据的单向绑定
-
只能运用在表单元素中:
radio / text / address / email / select checbox textarea
-
-
vue中样式 -class
-
第一种:直接传递数组,这里的class需要使用v-bind做数据绑定
例如:在style中写了样式.red{},.fontSize{}在html标签中直接写 :class=["red","fontSize"],记得一定要加引号
-
第二种:三元表达式 提高代码的可读性
就是在html标签中 :class=[flag?"red":"fontSize"];然后再data中flag:false
在数组中不加" " 就是在data中去找数据
:class=[{"red":flag}] data:{flag:true}
-
对象形式:三种方式
绑定对象的时候,对象的属性是类名。对象的属性可带引号,也可不带引号
-
:class="{red:true,fontSize:true}"
-
:class="{"red":true,"fontSize":true}"
-
:class="obj" data:{obj:{red:true,fontSize:true}}
-
-
当class名和变量名一样的时候,可以只写一个。
-
如果多个元素都需要使用一个样式类,但是启用禁用状态各不相同,就会出现命名冲突。解决:使用有名称的对象绑定
:class=""
data:{
变量:{
class1:true || false,
class2:true || false
}
}
好处就是即使多个元素共用同一个class,同时启用状态各不相同,也不会发生命名冲突的现象
-
-
内联样式(style)
-
直接在元素上通过:style的形式,书写样式对象
:style="{color:"red",font-size:"15px"}"
-
定义到data中,并引用
data:{style:{color:"red",font-size:"15px"}} -
通过数组,引用多个样式
:style = "[style1,style2]" data:{
style1:{},style2{}
}
-
-
v-for指令的四种使用方式
-
循环普通数组
v-for = "item in list"
data:{
list:[1,2,3,4]
}
-
循环对象数组
v-for = “user in list ”
data:{
list:[{},{},{}]
-
循环对象
在遍历对象身上的键值对的时候,除了有val,key,在第三个位置还有一个索引index
:v-for = "(val,key,index) in user"
data: {
user:{
id:1,
name:"tony",
gender:"男"
}
}
-
v-for迭代数字
-
in 后面我们放 普通数组、对象数组、对象,还可以放数字
-
v-for="count in 10"
(count值是从1开始)
-
-
-
v-for循环中key属性的使用
- v-for="item in list" :key = "item.id"(key里面写数组属性有唯一性的东西,并且只能使用number或者string类型,key在使用的时候必须使用v-bind属性绑定的形式,指定key的值)
- 在组件中使用v-for循环的时候,或者一些特殊情况中,如果v-for有问题,必须在时候v-for的同时。指定唯一的字符串/数字类型 :key="值"
- 例子:当我们循环了一个数组对象,想要点击一个按钮,就能在这个数组当中添加一个对象时,并且我们想要添加到数组的头部的时候,就会发生原来索引为1的对象,变成了索引为2。如果我们添加了key,就不会发生这种情况,旧对象的索引值还是不会变动,新添加的对象的索引值才会改变
-
v-if(直接注释掉) 每次都会重新删除或创建元素,有较高的切换性能消耗。如果元素设计到频繁的切换,最好不要使用v-if。
-
v-show(display:none)每次不会重新进行DOM的删除和创建操作,有较高的初始渲染消耗。如果元素可能永远也不会被显示出来被用户看到,则推荐使用v-if
-
过滤器:可被用作一些常见的文本格式化,过滤器可以用在两个地方:mustache插值和v-bind表达式。
-
<p>{{ msg | msgFormat('l','c') | test}} //定义一个Vue全局的过滤器,名字叫做msgFormat
Vue.filter("msgFormat",function(msg,arg,arg2){
return msg.replace("l","c")
//把l都改成c
//字符串的 replace方法,第一个参数,除了可写一个 字符串之外,还可以定义一个正则,第二个位置就可以开始传参了
return msg.replace(/^[l]$/ig,arg+arg2)
})
Vue.filter("test",function(msg){
return msg+ "======"
})
//最终p会是:
//helclco word=====
new Vue({
data:{
msg:"hello word"
}
})
//过滤器的定义语法
//Vue.filter('过滤器的名称',function(){})
//过滤器中的function,第一个参数已经被规定死了,永远都是 过滤器 管道符的前面 传递过来的数据
//
//Vue.filter("过滤器名称",function(data){
// return data + '123'
//})
//过滤器调用时候的格式 {{ name | 过滤器的名称(使用的参数名)}}
js
//全局过滤器:
Vue.filter("过滤器名称",function("使用的参数","传参")
//私有过滤器:
filters:{
"过滤器名称":function("使用的参数","传参"){}
}
-
ES6新方法 字符串的padStart方法,(用来填充的)
eg: (new data()).toString.padStart(2,"0") //意思就是让他填充后的字符为2位的,填充1个0在前面
-
-
自定义按键修饰符
js
//全部的按键别名
.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right
//其他键盘就去搜js的键盘事件对应的键盘码(keycode)
js
//自定义全局按键修饰符
Vue.config.keyCodes.f2 = 113
-
自定义全局指令让文本框获取焦点
近期评论