目录
vue中渲染数据
- 如果从接口中获取到的数据层级较深,或者需要嵌套渲染,不推荐使用
v-for="item in data[0].xxx"
的形式 - 可以通过
computed
将次级的数据解析出来,再拿去进行渲染(而且自带缓存,不必频繁获取数据)
数组方法
去重
this.arr = [ ... new Set(this.arr) ]
合并
let arr = [1, 2, 3]
arr.push([4, 5]) // [1, 2, 3, [4, 5]]
let newArr = arr.concat([4, 5]) // [1, 2, 3, 4, 5] 返回新数组
String方法
padStart
- 用另一个字符串填充当前字符串(重复,如果需要的话),以便产生的字符串达到给定的长度
('1').padStart(2, '0')
=>'01'
watch监听器
- 要是想要监听对象数据类型下的某一个属性,可以:
watch: {
'formData.id'() {
......
}
}
vue数据响应式
@路径处理符
在js文件中,@/views/user
@符代表的是src目录
如果要在css
或html
中使用@
符,需要在@
前面加上~
element-ui
input
el-input
中有个@change
事件,是可以当失去焦点和键盘回车时触发,但是如果输入框里的值并没有发生改变,则blur
事件并不会被触发- 如果组件没有封装的原生事件,例如
@keyup
则需要使用.native
修饰符去触发到原生事件
tips: 这个
.native
是绑定的组件渲染的根元素上,如果组件封装时,外面嵌套了其他元素,则需要判断根元素是否包含这个原生事件
样式穿透
- 在vue组件中,当
style
加上了scoped
属性时,会给对应的样式类名添加一个唯一的data-xxx
属性以做唯一区分,但想控制对应组件的样式时,就控制不到了 - 这时候可以在样式类前加上
/deep/
这时的data-xxx
属性就会添加到样式类名前面,不会造成影响
/deep/ .el-button {
color: red;
}
vuex使用双向数据绑定
- 因为vuex规定必须使用
mutation
来修改state
里的数据,所以如果想要使用v-model
绑定state
里的数据,肯定不能直接v-model="$store.state.xxx"
- vue的官方文档里,
computed
计算属性包含了setter
和getter
,就可以借此特性对state
进行双向绑定
computed: {
fullName: {
// getter
get() {
return this.$store.state.fullname
},
// setter
set(newValue) {
this.$store.commit('setName', newValue)
}
}
}
vant
flex-shrink
flex-shrink
的默认值为1,如果没有显示定义该属性,将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩- 我这里是不想将汉堡按钮压在标签栏上,
van-tabs
默认的是flex
布局,并且子标签就将宽度平分占满了,所以这里想添加一个空div将最后的位置留出来
.placeholder {
width: 66px;
height: 82px;
flex-shrink: 0;
}
记住列表滚动位置
van-tabs
下的列表组件滚动位置会相互影响,原因是它们并不是独立滚动,都是body
在滚动- 这有一段检测页面滚动元素的代码
function findScroller(element) {
element.onscroll = function() { console.log(element) }
Array.from(element.chilren).forEach(findScroller)
}
findScroller(document.body)
- 然后给列表组件添加
overflow-y: auto;
样式,让其独立滚动
Popup 弹出层
- vant 的弹出层时懒渲染的,既只有在第一次展示的时候会渲染里面的内容,而之后都是控制的显示与隐藏
- 如果想要每次打开弹出层拿到更新的数据,可以用
v-if
控制要更新的DOM节点
视口单位vw,vh
- 根据你浏览器的窗口大小指定,不受父元素的影响
- 1vw = 可视窗口的百分之一,以750为例,1vw = 7.5px
动态正则
// 参数1:匹配字符串 参数2:匹配模式
highLight(text) {
const str = `<span style="color: #3296fa">${this.searchText}</span>`
const reg = new RegExp(this.searchText, 'gi')
return text.replace(reg, str)
}
自定义组件的v-model
- 有时我们既想传递给自定义组件数据又得修改,就得先传递一个
prop
,还得手动监听一个事件
<!-- 关注组件 -->
<follow-user-btn
class="follow-btn"
v-model="article.is_followed"
:article-id="article.aut_id"
/>
- 一个组件上的
v-model
默认会利用名为value
的prop
和名为input
的事件,可以通过model
属性来修改这些默认配置
// 组件
model: {
prop: 'isFollowed',
event: 'update-is-followed'
}
// 更新数据时,只需要触发event事件传递参数即可
this.$emit('update-is-followed', !this.isFollowed)
- 如果是多个参数想要同样的效果,可以使用
.sync
修饰符,如果传入一个对象,会把对象中的每一个属性都作为一个独立的prop
,并且为其绑定独立的v-on
监听器,不能用于字面量的对象上,例,{ title: 'title' }
v-bind.sync="obj"
如果要传对象,就直接调用.sync
不需要在v-bind
后面接名称
<follow-user-btn
:article-id="article.aut_id"
@update:title="doc.title = $event"
/>
<!-- 相当于以上代码的缩写 -->
<follow-user-btn :article-id.sync="article.aut_id" />
tips: 带有
.sync
修饰符的v-bind
不能和表达式一起使用 (例如v-bind:article-id.sync="article.aut_id + 'a'"
是无效的)。
依赖注入
- 如果在一个页面中需要给许多子组件传递相同的数据,例如
id
,vue 给我们提供了一个好用的,可以直接给所有后代组件传递数据的方法 - 在根页面中定义
provide
属性来传递数据,在后代组件中用inject
属性接收
祖先组件不需要知道哪些后代组件使用它提供的 property
后代组件不需要知道被注入的 property 来自哪里
tips: 不要滥用,不利于解耦,重构起来比较困难,并且不支持响应式
// 根页面
provide () {
return {
articleId: this.articleId
}
}
// 后代组件
inject: {
articleId : {
type: [Number, String, Object],
default: null
}
}