快捷導(dǎo)航

Vue實(shí)例簡(jiǎn)單方法介紹

更新時(shí)間：2017年01月20日 17:14:40 作者：github_26672553

這篇文章主要為大家詳細(xì)介紹了Vue實(shí)例的一些簡(jiǎn)單方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

Vue實(shí)例的一些簡(jiǎn)單方法

<!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就是實(shí)例對(duì)象
  console.log(vm.$el); //這里就是div元素
  vm.$el.style.background = 'red';
  console.log(vm.$data); 
  console.log(vm.$data.a); //'1' 
 </script>
</body>
</html>

手動(dòng)掛載

  var vm = new Vue({
   data:{
    a:1,
   },
  });

  //手動(dòng)掛載
  vm.$mount('#box');

或者下面的寫(xiě)法：

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，可以通過(guò)vm.$options獲取。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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