Skip to content
This repository was archived by the owner on May 24, 2019. It is now read-only.

Components

Jump to bottom
Pascal edited this page Aug 26, 2017 · 2 revisions

https://github.com/oanstein/VueJS-Complete-Guide-Code/blob/master/06_components/index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div id="app">
    <my-cmp></my-cmp>
    <hr>
    <my-cmp></my-cmp>
  </div>

  <div id="app2">
    <my-cmp></my-cmp>
    <hr>
    <my-cmp></my-cmp>
  </div>


  <script src="https://unpkg.com/vue"></script>
  <script>
    //var data =  { status: 'Critical' };
    // Gobal Vue.component({})
    
    //Locally
    var cmp = {

      data: function() {
        return { status: 'Critical' };
      },

      template: '<p>Server Status: {{ status }} (<button @click="changeStatus">Change</button>)</p>',
      
      methods: {
        changeStatus: function() {
          this.status = 'Normal';
        }
      }
    };

    // App 1
    new Vue({
      el: '#app',
      components: {
        'my-cmp': cmp
      }
    });
    
    // App 2
    new Vue({
      el: '#app2'
    });
  </script>
</body>

</html>

Index

Clone this wiki locally