vue实例的属性和方法

var vm = new Vue({

el: “#content”,

data: {

msg: “hello world!”

},

name: “yang”,

age: 23,

show: function () {

console.log(“show!”);

}

})

/**

• 属性

*/

//vm.属性名 获取data中的属性

console.log(vm.msg);

//vm.$el 获取Vue实例使用的根 DOM 元素。

console.log(vm.$el);

vm.$el.style.color = “red”;

//vm.$data 获取数据对象data

console.log(vm.$data);

console.log(vm.$data.msg);

//vm.$options 获取自定义属性和调用自定义方法

console.log(vm.$options.name);

console.log(vm.$options.age);

vm.$options.show();

//vm.$refs 获取所有添加过ref属性的元素（一个对象，持有注册过 ref 特性 的所有 DOM 元素和组件实例）。

console.log(vm.$refs.hello);

vm.$refs.hello.style.color = “blue”;

二、实例方法

2.1 vm.$nextTick( [callback] )

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。

new Vue({

// …

methods: {

// …

example: function () {

// 修改数据

this.message = ‘changed’

// DOM 还没有更新

this.$nextTick(function () {

// DOM 现在更新了

// this 绑定到当前实例

this.doSomethingElse()

})

}

}

})

示例

{{msg}}

他的名字是：{{name}}

2.2 其他方法

• vm.$mount() 手动挂载Vue实例

• vm.$destroy() 销毁实例

• vm.$set() 向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。

• vm.$delete() 删除对象的属性。

…

案例

<button @click=“updateName()”>改变属性值

<button @click=“addAge()”>增加一个属性

<button @click=“deleteAge()”>删除一个属性

姓名{{user.name}}

年龄：{{user.age}}

$set 总结 （对象，数组）

注意：当给响应式数据对象（或数组）添加新属性，视图不更新的处理方法。

let vm = new Vue({

el :‘#app’,

data:{

a:{school:2,room:‘’} , // 1,声明时写

arr:[50]

}