[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> <html>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Caddy test</title> <meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <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> </head>
<body> <body>
This is a test
<span>Page loaded at: {{now | date "Mon Jan 2 15:04:05 MST 2006"}}</span>
<div id="app"> <div id="app">
This is a test
<span>Page loaded at: {{ loaded }}</span>
<ul> <ul>
<li v-for="item in json"><a :href="item.href">{{ item.text }}</a></li> <li v-for="item in json"><a :href="item.href">{{ item.text }}</a></li>
</ul> </ul>
@ -16,6 +24,8 @@
<div> {{ message }}</div> <div> {{ message }}</div>
<pre>{{ json }}</pre> <pre>{{ json }}</pre>
</div> </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> <script src="index.js"></script>
</body> </body>
</html> </html>

View File

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