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獲取。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
這篇文章主要介紹了vue 實現剪裁圖片并上傳服務器功能，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-03-03
Vue 在插入、更新或者移除 DOM 時，提供多種不同方式的應用過渡效果，Vue 提供了內置的過渡封裝組件transition，該組件用于包裹要實現過渡效果的組件2021-10-10
這篇文章主要介紹了詳解vue-cli官方腳手架配置,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要為大家詳細介紹了vue3封裝類似京東商品詳情頁放大鏡效果組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了vue后臺系統(tǒng)登錄管理，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要為大家介紹了Vue nextTick延遲回調獲取更新后DOM機制詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
在Vue中，父子組件之間通過Prop和Event實現了數據的雙向綁定，但是，Vue設計者為什么不允許子組件修改父組件傳遞的Prop呢，本文就來帶大家探究為什么子組件不能修改Prop,需要的朋友可以參考下2023-06-06
近期學習vue3的父子組件之間的傳值,發(fā)現跟vue2的并沒有太大的區(qū)別,這篇文章主要給大家介紹了關于Vue3子組件向父組件傳值的兩種實現方式,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-04-04
淺談vue-props的default寫不寫有什么區(qū)別
這篇文章主要介紹了淺談vue-props的default寫不寫有什么區(qū)別，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue3中update:modelValue的使用與不生效問題解決
現在vue3的使用越來越普遍了,vue3這方面的學習我們要趕上,下面這篇文章主要給大家介紹了關于vue3中update:modelValue的使用與不生效問題的解決方法,需要的朋友可以參考下2022-03-03