[add] vuetify

This commit is contained in:
Andy Bunce 2022-01-07 20:48:31 +00:00
parent f73523c327
commit d6b4e97c4f
2 changed files with 19 additions and 7 deletions

View File

@ -1,13 +1,21 @@
<html>
<head>
<meta charset="utf-8" />
<title>Caddy test</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="caddy test" />
<meta name="author" content="andy bunce." />
<title>Caddy test</title>
<link rel="shortcut icon" href="icon.png"/>
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"/>
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons"/>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" >
<link rel="stylesheet" href="//unpkg.com/vuetify@2.6.2/dist/vuetify.min.css" type="text/css"/>
</head>
<body>
This is a test
<span>Page loaded at: {{now | date "Mon Jan 2 15:04:05 MST 2006"}}</span>
<div id="app">
This is a test
<span>Page loaded at: {{ loaded }}</span>
<ul>
<li v-for="item in json"><a :href="item.href">{{ item.text }}</a></li>
</ul>
@ -15,7 +23,9 @@
<button v-on:click="load">hits {{ hits }}</button>
<div> {{ message }}</div>
<pre>{{ json }}</pre>
</div>
<script src="index.js"></script>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" crossorigin="anonymous"></script>
<script src="//unpkg.com/vuetify@2.6.2/dist/vuetify.min.js" crossorigin="anonymous"></script>
<script src="index.js"></script>
</body>
</html>

View File

@ -4,7 +4,8 @@ var app = new Vue({
data: {
message: 'Hello Vue!',
json: null,
hits:0
hits:0,
loaded: null
},
filters: {
pretty: function(value) {
@ -13,6 +14,7 @@ var app = new Vue({
},
methods:{
load() {
this.loaded = new Date()
this.hits += 1
fetch("links.json")
.then(response => response.json())