Vuejs Directives Example

    By: Manu
    4 years ago
    Category: VuejsViews: 21
    <!DOCTYPE html>
<html>
<head>
	<title>Vue Project</title>
	<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
	<meta content="utf-8" http-equiv="encoding">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
	<div id="app" class="container">
		<div class="col-md-6 col-md-offset-3" style="margin-bottom:100px;	">
			
			{name}
			<h2 v-text="name"></h2>


			<hr>


			<h2 v-html="codeLine"></h2>


			<hr>


			<h2 v-show="check">Check is True</h2>


			<hr>


			<h2 v-if="check">Check If Statement</h2>


			<h2 v-else>Check If Statement True</h2>




			<hr>


			<img v-bind:src="image" width="300" height="300">


			<hr>


			<form>
				<input class="form-control" name="title" v-model="form.title"></input>


				{form.title}
			</form>


			<hr>
			{players}
			<ol>
				<li v-for="(player,index) in players" :key="index">{player}</li>
			</ol>


			<hr>


			<button class="btn btn-primary" @click="doSomething">Button</button>
			<button class="btn btn-primary" @mouseover="doSomething">Button</button>






		</div>	
	</div>
</body>
<script type="text/javascript">
	
	new Vue({
		el:'#app',
		data:{
			form:{
				title:''
			},
			name:'Roger',
			codeLine:'<div><h2>From HTML</h2></div>',
			check:true,
			image:'https://cdn.vox-cdn.com/thumbor/LjOG9-WQDquskHMvYG32ADEaDm4=/0x0:2040x1360/920x613/filters:focal(857x517:1183x843):format(webp)/cdn.vox-cdn.com/uploads/chorus_image/image/57358643/jbareham_170504_1691_0020.0.0.jpg',
			players:['roger','steve','albert','andrew','methew'],
		},
		methods:{
			doSomething(){
				alert('yeh');
			}
		}
	});


</script>
</html>