vue 使用心得---工作中一些关键点
1、自定义组件 使用 v-for 循环，最好另外多加上 v-bind:key="items_name",这是特殊用的:key,而不是普通的 :属性
例：<Uiroom> 循环 v-bind="items" 是普通传入一个对象，v-bind:key 循环特殊键值
<Uiroom
v-for="items in Roomsmsg"
v-bind:key="items"
v-bind="items"
@click.native="OnUiRoomClick(items.name)"
></Uiroom>
data () {
return {
pagetitle: '总览信息',
Roomsmsg: [
{
name: '1001'
},
{
name: '1002'
},
{
name: '1003'
}
]
}
},
2、为了简单通用的点击事件，可以将组件绑定到根元素原生DOM事件，加 .native。 例如 @click.native
3、vue 组件对象属性的监听须要用到深度监听 handler(), deep : true
watch: {
name: function (newvalue, oldvalue) {
this.Roomdata.Roomname = newvalue
console.log(this.Roomdata.Roomname + '发生变化')
},
outs: function (newvalue, oldvalue) {
this.Roomdata.outs = newvalue
},
keys: function (newvalue, oldvalue) {
this.Roomdata.keys = newvalue
},
airs: { // 对象要深度监听
handler (newvalue) {
// console.log(newvalue.toString() + 'airs发生变化')
// this.Roomdata.Roomairs = newvalue
// 我们可以根据 Obj.x !== undefined 的返回值 来判断Obj是否有x属性。
if (newvalue.POWER !== undefined) this.Roomdata.Roomairs.POWER = newvalue.POWER
if (newvalue.ATO !== undefined) this.Roomdata.Roomairs.ATO = newvalue.ATO
if (newvalue.SPEED !== undefined) this.Roomdata.Roomairs.SPEED = newvalue.SPEED
if (newvalue.MODE !== undefined) this.Roomdata.Roomairs.MODE = newvalue.MODE
if (newvalue.TMP !== undefined) this.Roomdata.Roomairs.TMP = newvalue.TMP
if (newvalue.STMP !== undefined) this.Roomdata.Roomairs.STMP = newvalue.STMP
},
deep: true // 对象要深度监听
}
}
4、vue 新增属性需要动态添加响应
Vue.set(object, propertyName, value) ,,在实例(事件回调函数)中使用 thst.$set(object, propertyName, value) 6、vue 删除或清属性 Vue.delet(object, propertyName/index) ,,在实例(事件回调函数)中使用
thst.$set(object, propertyName, value) 5、vue 动态绑定 img 需要加 require 例如 <img v-bind:src="require('../assets/door.svg')" />
7、变量表示路径的方式
var path = require('path'); // 引入 path 模块，并指向局部变量 path
path.join(__dirname, 'views'); // join 方法设置 path 相对路径为 views
8、Vue 强制跳转到指定页---以登录页为例
window.location.href = '/login' // 跳转到login 页
