前言
总结是基于vue2.x
,vue-cli3.x
,主要记录些,vue
常用的指令、事件,监听、数据绑定、过滤器、组件、动画、vuex
,vue-router
等日常工作中时常用到的东西,也有些常用的插件
和开发工具
的介绍与使用,以及部分性能优化
的建议与实践,如有不对,或不足的地方,也请各位大神,指出来,学习学习。
一、基础
1、理解mvvm
- m是vue实例中的data,自定义的数据或后端返回的数组,不是后端mvc里的model概念不同。
- vm是vue实例m和v之间的调度者 是mvvm的核心思想
- v是html要渲染的
2、常用指令
-
v-cloak 解决{{}}插值闪烁的问题
-
v-text 会先执行覆盖元素中原本的内容,但是插值表达式只会覆盖自己的占位符,默认不会闪烁
-
v-html 渲染html标签,覆盖元素中原有的元素内容
-
v-bind 简写为:用来绑定数据,可以写合法的js表达式
-
v-on 简写为@用来点击事件
3、常用事件修饰符
-
stop 阻止冒泡:外层和里层都有方法,点击会产生冒泡,也会触发外层事件。顺序从里到外产生事件
-
prevent 组织浏览器默认行为:a标签有浏览器默认行为
-
capture 捕获事件:点击里层先触发外层再触发里层,顺序从外到里产生事件
-
self 只触发自己本身的时间,不会产生冒泡和捕获事件,类似于阻止冒泡,但只针对自己那一层,最外还是会被里层冒泡冒到,stop是阻止所有层次
-
once 事件只执行一次
4、数据的绑定
-
v-bind:数据的单向绑定
-
v-model:数据的双向绑定,只能用于表单元素中
tips:表单元素:radio、text、address、email、select、checkbox、textarea
5、class绑定
-
1.数组带对象
data(){
return{
flag:true
}
}
tips:可以在勒种更多数组中写三元表达式,但是推荐使用对象来代替它控制是否渲染
-
2.单纯的对象
data(){
return{
falg1:true,
falg2:true
}
} -
3.数组带带三元
data(){
return{
falg:true,
}
} -
4.对象升级
data(){
return{
classObj:{classA:falg1,classB:flag2}
}
}
tips:直接使用一个对象数组来控制样式
-
5.使用style的对象来实现样式的修改
<div :class="styleObj" /> data(){ return{ styleObj:{color:red} } }
-
6.使用style的数组带对象来实现样式修改
data(){
return{
styleObj1:{color:red},
styleObj2:{color:red}
}
}
6、v-for的使用
可以遍历:普通数组、对象数组、对象、还可以是数字
<div v-for='(item,key,index) in object' :key='index'> {{item}}--{{key}}--{{index}} </div> <div v-for='(count in 10)'> </div>
**tips:**在遍历对象的时候有多个index索引,遍历数字时是从1开始的。绑定key时属性值必须是number或者string
7、v-if、v-show
-
v-if有较高的切换性能,适合元素可能永远不会被用户看到
-
v-show有较高的初始渲染消耗,适合元素的频繁切换
8、调试插件
- 在谷歌商店找vue-devtools插件,使用这个插件,并设置插件,允许访问文件地址。会在调试中出现vue相关的东西
- debugger直接可以调试
9、过滤器
全局和私有过滤器
<div v-for='(item,key) in object' :key='index'> {{item | dateFormat}} </div> <div v-for='(count in 10)'> </div>
-
全局
vue.filter(‘过滤器名称’,function(){
})
-
私有(局部)
filters:{
dateFormat:function(data,param){
do some
}
}
tips:
-
data就是 | 第一个参数,已经被定死了,永远是管道左边要被转换的数据,param是过滤方法传进来的其他参数,过滤器采用就近优先原则,如果私有和全局的名称一样就优先采用私有的。
-
padstart和padend es6的补0方法
-
第二个参数时字符串,第三个参数时表达式,如果自定义参数值是动态的会报错。目前就是的简单的过滤用过滤器,复杂点的用方法,能用计算属性的用计算属性 有缓存,能提高性能。
10、按键修饰符
-
监听pc键盘上的值
<input @keyup.enter=’方法名’>
**tips:**enter可以换成键盘上的任何一个值,只要去找相关的键盘码,就都可以使用,推荐设置个别名。放在没有按钮操作的模板。