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 页