经过一段时间的vue学习,一次文章做个汇总。
一,
1.v-text, v-html ,{{ }} 插值表达式,都可以将vue中data中的数据显示到指定的标签位置中, v-html会将含有html规范的字符串,以此规范解析, v-html ,{{ }}会将数据原样解析
2.v-bind 属性绑定,可简写为 : :class=“{red:true,thin:false}” (这里的red thin 是在style中定义好的样式)
3.v-on 事件绑定,可简写为 @ ,如 <option type="button" @click=“handClick” > ,在vue中与data平级的methods中定义 handClick方法
(1)事件的修饰符:.stop 阻止冒泡事件
.prevent 阻止默认事件
.once 事件只触发以此
.self 只有直接触发本元素时才会触发,不会被动触发
.capture 添加事件侦听器时 使用事件捕获模式
4.v-mode vue中唯一的数据双向绑定元素,只能用在表单元件中(input,radio text adress email 。select checkbox textarea)
5.v-for 可以遍历数组,对象中的属性, 迭代数字v-for=“item in 10” 当在组件中使用v-for时,必须绑定key ,key作为每个值得唯一标识
key值 必须是有number获取的String 在一些特殊情况下,如果v-for有问题,在必须使用v-for时 使用唯一的 数字或字符串绑定key值
6.v-if 和v-show 前者有更高的切换消耗,后者有更高的渲染消耗,如果频繁的 隐藏和显示就使用v-show 如果较少就使用v-if
二,过滤器可以写在差值表达式中 用 | 分割开 如{{ 数据 | 过滤器1 | 过滤器2}}
1. 全局过滤器 在script标签中 filter的第一个参数就是 过滤器的名字 后面方法中第一个参数是差值表达式中的数据,第二个是要替换的数据。
2.私有过滤器
在私有过滤器与全局过滤器名称一样时 优先使用私有过滤器
如图 times是过滤器名称
三,
1.自定义修饰符
例如 @keyup是绑定键盘
@keyup.enter是绑定键盘上的回车键 同时还有.esc /.tab/ .delete/.up /.down /,right /.left 也可以通过查询键盘码进行自定义 如f12的键盘码是113 @keyup.113 ="add()"
在script中
//这样定义完成之后, @keyup.f2="add()" 之后 点击f2就可以执行add方法了
Vue.config.keyCodes.f2=113;
2.自定义指令
定义 全局指令 Vue.directive
私有指令定义 以及简写 直接上图了
这里补充 el为绑定的元素对象 地问个是绑定时传回来的参数