Vue屬性和方法
阿新 • • 發佈：2017-11-17
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>本文出自 “Note” 博客，轉載請與作者聯系！
Vue屬性和方法