<!-- production version, optimized for size and speed -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

  <div id="app">
	  {{ message }}
  </div>

  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })
  

	
    Hello Vue!

<div id="app-5">
  <p>{{ message }}</p>
  <button @click="reverseMessage">Reverse Message</button>
</div>

//script
  
new Vue({
  el: '#app-5',
  data(){
    return {
    	message: 'Hello Vue.js!'
    }
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

 <form id="signup-form" method="post" action="#" 
       	@submit.prevent="submit">
   
      <input
        type="email"
        v-model="email"
      />
      <input type="submit" value="Sign Up" />
   
</form>

new Vue({ 
        el:"#signup-form", 
        data(){ 
          return {
            email: ''
        } } 
        ,methods:{
          submit:function(){ 
            fetch("https://httpbin.org/post",{
              method:"POST",
              body:{email:this.email}
            })
        } 
 });

//Vue.js instance on the html page
new Vue({
  //element to mount into html page
    el:"", 
  // JSON object containing page data
    data:{}, 
  //page clicks on the page
    methods:{}, 
  //autoupdatable properties ( filters )
    computed:{},
  //watcher on page properties
    watch:{}, 
  // page hooks/events
    created:function(){},
    mounted:function(){},
    destroyed:function(){}
})