DavidThornley
/
Vue.js_Project


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
							<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>Using Vue To A Dissapointing Degree Of Success</title>
    <link rel="stylesheet" type="text/css" href="index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<h1>Using Vue To Make A Webpage Interesting</h1>
<p>Each box contains an example of <em>Vue.js</em> being used in a unique way.</p>

<div class="grid-container">

    <div id="item4">
        <p>{{ displayDate() }}</p>
    </div>

    <div id="item1">
        <p>{{ name }}</p>
        <p> Open the dev console and set item1.name = "Your Name"</p>
    </div>

    <div id="item2">
        <p>{{ greet() }}</p>
        <p> Open the dev console and set item2.name = "Your Name"</p>
    </div>

    <div id="item3">
        <p>{{ message }}</p>
        <a v-bind:href= "website">Surprise Website</a>
        <p> You can change the link by setting item3.website = "Any SFW URL You Like!"</p>
    </div>

    <div id="item6">
        <p> Set item6.seen = true</p>
        <p v-if="seen">Now You Can See This</p>
    </div>

    <div id="item7">
        <p> You Have Clicked The Button {{ count }} Times</p>
        <a class="button is-danger" @click.prevent="incrementCounter">Click Me</a>
    </div>

    <div id="item8">
        <p>{{ message }}</p>
        <a v-bind:href= "website">Click Me</a>
    </div>

    <div id="item5">
        <p> This Page Loaded At: </p>
        <p>{{ displayTime() }}</p>
    </div>
</div>

<script src="index.js"></script>
    </body>
</html>