Vue實例簡單方法介紹
更新時間:2017年01月20日 17:14:40 作者:github_26672553
這篇文章主要為大家詳細介紹了Vue實例的一些簡單方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
Vue實例的一些簡單方法
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
{{a}}
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
data:{
a:1,
},
});
//vm就是實例對象
console.log(vm.$el); //這里就是div元素
vm.$el.style.background = 'red';
console.log(vm.$data);
console.log(vm.$data.a); //'1'
</script>
</body>
</html>

手動掛載
var vm = new Vue({
data:{
a:1,
},
});
//手動掛載
vm.$mount('#box');
或者下面的寫法:
var vm = new Vue({
data:{
a:1,
},
}).$mount('#box');
var vm = new Vue({
aa:11, //自定義屬性
data:{
a:1,
},
}).$mount('#box');
console.log(vm.$options.aa); //11
上面代碼,自定義了屬性aa,可以通過vm.$options獲取。
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
vue的路由守衛(wèi)和keep-alive后生命周期詳解
這篇文章主要為大家詳細介紹了vue路由守衛(wèi)和keep-alive,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2022-03-03

