快捷導(dǎo)航

在瀏覽器console中如何調(diào)用vue內(nèi)部方法

更新時間：2023年07月18日 09:57:18 作者：茶荼

這篇文章主要介紹了在瀏覽器console中如何調(diào)用vue內(nèi)部方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

在瀏覽器console調(diào)用vue內(nèi)部方法

new Vue({
  el: '#app',
  i18n,
  store,
  router,
  data () {
    return {
      address:''
    }
  },
  components: {App},
  template: '<App/>',
  mounted () {
    window.vue = this
  },
  methods:{
    updateAdress(address){
      console.log(address)
    }
  }
})

在main.js中設(shè)置

mounted(){window.vue = this}

即可在console.log中調(diào)用

vue.updateAdress(123) //123

vue調(diào)試--使用console輸出

用示例介紹使用瀏覽器的console調(diào)試vue的方法。

輸出對象數(shù)據(jù)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>this is title</title>
</head>
<body>
<div id="app">
    {{message}}
</div>
<script src="js/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>
</body>
</html>

結(jié)果

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

基于vue展開收起動畫的示例代碼
這篇文章主要介紹了基于vue展開收起動畫的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-07-07
vue中Form 表單的 resetFields() 失效原因及問題解決
在Vue項目中,使用formRef.value.resetFields()方法重置表單時可能遇到不起作用的問題,下面就來介紹一下如何解決,感興趣的可以了解一下
2024-09-09
Vue CLI 3.x 自動部署項目至服務(wù)器的方法
本教程講解的是 Vue-CLI 3.x 腳手架搭建的vue項目, 利用scp2自動化部署到靜態(tài)文件服務(wù)器 Nginx。非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧
2019-04-04
解決創(chuàng)建vue項目后沒有vue.config.js文件的問題
這篇文章給大家主要介紹如何解決創(chuàng)建vue項目后沒有webpack.config.js(vue.config.js)文件，文中有詳細的解決方法，感興趣的朋友可以參考閱讀下
2023-07-07
前端Vue如何獲取登錄的用戶名或用戶id代碼實例
在前端開發(fā)中,獲取登錄用戶的用戶名是一項常見的需求,這篇文章主要給大家介紹了關(guān)于前端Vue如何獲取登錄的用戶名或用戶id的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2024-07-07
vue data對象重新賦值無效(未更改)的解決方式
這篇文章主要介紹了vue data對象重新賦值無效(未更改)的解決方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
vue使用CSS變量詳解
文章講解了如何在Vue項目中使用CSS變量,包括動態(tài)計算值和根據(jù)條件計算屬性,通過示例展示了如何使用CSS變量來實現(xiàn)動畫效果和動態(tài)樣式
2025-12-12
vue實現(xiàn)列表無縫滾動效果
這篇文章主要為大家詳細介紹了vue實現(xiàn)列表無縫滾動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04
使用konva和vue-konva庫實現(xiàn)拖拽滑塊驗證功能
這篇文章主要介紹了使用konva和vue-konva完成前端拖拽滑塊驗證功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-04-04
VUE使用vue?create命令創(chuàng)建vue2.0項目的全過程
vue-cli是創(chuàng)建Vue項目的一個腳手架工具,vue-cli提供了vue create等命令,下面這篇文章主要給大家介紹了關(guān)于VUE使用vue?create命令創(chuàng)建vue2.0項目的相關(guān)資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下
2022-07-07