example 1

<!DOCTYPE html>
<html>
  <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>VUE.js test</title>
    </head>


	<body>
		<div id="app">
			<p>{{ message }}</p>
			<p v-bind:title="message2">
				Hover your mouse over me for a few seconds
				to see my dynamically bound title!
			</p>
			<p v-if="seen">Now you see me</p>
			<ol>
				<li v-for="todo in todos">{{ todo.text }}</li>
			</ol>
			<button v-on:click="reverseMessage">Reverse Message</button><br>
  			<input v-model="message">
			<div>
				<p>{{ fullName }}</p>
				<input v-model="firstName">
				<input v-model="lastName">
			</div>
			<ol>
				<user-item
				  	v-for="user in users"
				  	v-bind:user="user"
				  	v-bind:key="user.id"
				></user-item>
			</ol>
		</div>
	</body>
	
</html>



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

<script>
let DATA = {
	users : [
		{
			avatar		: '<img src="">',
			avataqrUrl 	: '',
			email 		: '[email protected]',
			id			: 1,
			last_log	: '2020-09-03 00:53:52',
			name		: 'Stelios Ignatiadis',
			role		: 'manager',
			status		: '1',
			username	: 'sic',
		},
		{
			avatar		: '<img src="">',
			avataqrUrl 	: '',
			email 		: '[email protected]',
			id			: 2,
			last_log	: '2020-09-03 00:53:52',
			name		: 'Test User',
			role		: 'member',
			status		: '1',
			username	: 'sic5',
		},
		{
			avatar		: '<img src="">',
			avataqrUrl 	: '',
			email 		: '[email protected]',
			id			: 3,
			last_log	: '2020-09-03 00:53:52',
			name		: 'Test User 6',
			role		: 'member',
			status		: '1',
			username	: 'sic6',
		},
	],
}


Vue.component('user-item', {
  props: ['user'],
  template: '<li>{{ user.name }} - {{ user.email }}</li>'
})
	
	
	
var app = new Vue({
	el: '#app',
	data: {
		message: 'Hello Vue!',
		message2: 'You loaded this page on ' + new Date().toLocaleString(),
    	seen: true,
		users: DATA.users,
		todos: [
			{ text: 'Learn JavaScript' },
			{ text: 'Learn Vue' },
			{ text: 'Build something awesome' }
		],
		firstName: 'Foo',
		lastName: 'Bar',
	},
	computed: {
		fullName: function () {
			return this.firstName + ' ' + this.lastName
		}
	},
	methods: {
		reverseMessage: function () {
			this.message = this.message.split('').reverse().join('')
		}
	},
	created: function () {
		console.log('message is: ' + this.message)
	}
})
app.$watch('message', function (newValue, oldValue) {
	console.log('message changed: ' + newValue)
})


</script>