超全面的vue.js使用总结

2020-06-14 06:13:34易采站长站整理

不过,有办法在实例创建之后添加属性并且让它是响应的。对于Vue实例,可以使用

$set(key,value)
实例方法:


vm.$set('b', 2)
// `vm.b` 和 `data.b` 现在是响应的

对于普通数据对象,可以使用全局方法

Vue.set(object, key, value)
:


Vue.set(data, 'c', 3)
// `vm.c` 和 `data.c` 现在是响应的

有时你想向已有对象上添加一些属性,例如使用

Object.assign() 
 _.extend() 
添加属性。但是,添加到对象上的新属性不会触发更新。这时可以创建一个新的对象,包含原对象的属性和新的属性:


// 不使用 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

十、关于vuejs页面闪烁{{message}}

在vuejs指令中有v-cloak,这个指令保持在元素上直到关联实例结束编译。和CSS规则如

[v-cloak]{display:none}
一起用时,这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。

用法如下:


[v-cloak]{
display:none;
}
<div v-cloak>{{message}}</div>

这样<div>不会显示,直到编译结束

十一、关于在v-for循环时候v-model的使用

有时候需要循环生成input,用v-model绑定后,利用vuejs操作它,此时我们可以在v-model中写一个数组

selected[$index] 
,这样就可以给不同的input绑定不同的v-model,从而分别操作他们。这个我在demo中的
dataBind.vue
中用到。

十二、vuejs中过渡动画

在vuejs中,css定义动画:


.zoom-transition{
width:60%;
height:auto;
position: absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
.zoom-enter, .zoom-leave{
width:150px;
height:auto;
position: absolute;
left:20px;
top:20px;
transform: translate(0,0);
}

其中动画在定的时候要注意上下对应,上面有什么,下面有什么,都要变化的,如果有不变化的,应该抽离出去,作为公共css样式,在上面的css中,如果我只写

 transform: translate(-50%,-50%);
而不写下面的
transform: translate(0,0);