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] 返回新数组
('1').padStart(2, '0')
=> '01'
watch: {
'formData.id'() {
......
}
}
在js文件中,@/views/user
@符代表的是src目录
如果要在css
或html
中使用@
符,需要在@
前面加上~
el-input
中有个@change
事件,是可以当失去焦点和键盘回车时触发,但是如果输入框里的值并没有发生改变,则blur
事件并不会被触发@keyup
则需要使用.native
修饰符去触发到原生事件tips: 这个
.native
是绑定的组件渲染的根元素上,如果组件封装时,外面嵌套了其他元素,则需要判断根元素是否包含这个原生事件
style
加上了scoped
属性时,会给对应的样式类名添加一个唯一的data-xxx
属性以做唯一区分,但想控制对应组件的样式时,就控制不到了/deep/
这时的data-xxx
属性就会添加到样式类名前面,不会造成影响/deep/ .el-button {
color: red;
}
mutation
来修改state
里的数据,所以如果想要使用v-model
绑定state
里的数据,肯定不能直接v-model="$store.state.xxx"
computed
计算属性包含了setter
和getter
,就可以借此特性对state
进行双向绑定computed: {
fullName: {
// getter
get() {
return this.$store.state.fullname
},
// setter
set(newValue) {
this.$store.commit('setName', newValue)
}
}
}
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;
样式,让其独立滚动v-if
控制要更新的DOM节点// 参数1:匹配字符串 参数2:匹配模式
highLight(text) {
const str = `${
this.searchText}`
const reg = new RegExp(this.searchText, 'gi')
return text.replace(reg, str)
}
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
}
}