Vue Devtools to install the Chrome browser

1, download the plug-in can also be downloaded from elsewhere

2 ,. installation in chrome in
open chrome extensions (directly in the address bar: chrome: // extensions /), while the need to open the developer mode, will step on the resulting file can be dragged come in
Here Insert Picture Description
3, drag after the success of Vue top right corner of the browser will display an icon, while expanding the program appeared DevTools Vue.js
Here Insert Picture Description4, to test whether the installation is successful

  • After closing the Chrome browser, write a program Vue

program:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
  <div id="app">
    <coml :parentmsg="msg"></coml>
  </div>
  <script>

    var vm = new Vue({
      el: '#app',
      data: {
        msg: '123 啊-父组件中数据'
      },
      methods: {},
      components: {
        coml: {
          props: ['parentmsg'], 
          template: '<h1>这是子组件---{{parentmsg}}</h1>',
        }
      }
    })
  </script>
</body>

</html>
  • Then open development tools, at the top end of a column, there is a vue of the tab, you can click to open the debugging tools.
    Here Insert Picture Description
Published 43 original articles · won praise 1 · views 3114

Guess you like

Origin blog.csdn.net/u011523953/article/details/105361475