Devtools的簡單使用

一.Devtools作用

 方便我們實時地觀察自己寫的數據和組件的狀况等。

二.安裝

極簡插件_Chrome擴展插件商店_優質crx應用

 

 

 

<template>
  <div class=""></div>
</template>

<script>
export default {
  data() {
    return {
      name:'蕪湖',  //單項數據
      arr:[
        {
          a:1,
          b:2
        }
      ],
    }
  },
  name: '',
  methods: {
  }
}
</script>

<style scoped>

</style>

 找到插件 下載玩後

  打開穀歌瀏覽器-------->更多程序---------->擴展程序------------>將下載好的拖入進去即可。

三.使用

代碼1:

<template>
  <div class=""></div>
</template>

<script>
export default {
  data() {
    return {
      name:'蕪湖',  //單項數據
      arr:[
        {
          a:1,
          b:2
        }
      ],
    }
  },
  name: '',
  methods: {
  }
}
</script>

<style scoped>

</style>

代碼:

<template>
  <div class=""></div>
</template>

<script>
export default {
  data() {
    return {
      one:'one',
      arr:[1,2,3]
    }
  },
  name:'One組件',
  methods: {
    fn(){
      console.log(123213);
    }
  }
}
</script>

<style scoped>

</style>

 

name可以給組件取任意的名字,不取的話就是默認的名字。