Vue属性和方法
时间 2020-09-22
标签
vue
属性
方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>属性和方法</title>
</head>
<script type="text/javascript" src="js/vue.js" ></script>
<body>
<div id="div1">
`msg`
<h1 ref="hello">你好</h1>
<h2 ref="world">世界</h2>
<h3 ref="content">`content`</h3>
</div>
</body>
<script>
// let vm = new Vue({
// el: "#div1",
// data:{
// msg:'hello world'
// },
// name:'恒大足球',
// show:function(){
// alert('hello');
// }
// });
// 属性
// 获取data属性
// console.log(vm.$el);//获取DOM对象
// vm.$el.style.color = 'blue'; //修改DOM样式
// console.log(vm.$data.msg); //获取数据对象data
// console.log(vm.$options); //获取自定义属性
// console.log(vm.$options.name); //获取自定义值
// vm.$options.show(); //调用自定义方法
// console.log(vm.$refs.hello);
// vm.$destroy(); //销毁实例
// vm.name = '国足';
// console.log(vm.$options.name);
let vm_obj = new Vue({
data:{
msg:'程序猿',
content:'这是内容'
}
}).$mount('#div1'); //挂载实例
vm_obj.content = '这是改变后的内容';
//DOM尚未及时更新完，Vue实现响应式并非数据发生以后DOM当即变化
vm_obj.$nextTick(function(){
//DOM更新完成后再执行此代码
console.log(vm_obj.$refs.content.textContent);
})
</script>
</html>