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