ZierleTraining/frontend-web
1
0
Fork 0
mirror of https://github.com/MarcZierle/photo-log-frontend.git synced 2025-04-12 15:04:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
MarcZierle 2022-01-05 15:34:16 +01:00
commit b4099363fe
4 changed files with 116 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
docs/components/testcomponent.md Normal file
View File

@ -0,0 +1,14 @@
# testcomponent
just some sample code...
## Methods
<!-- @vuese:testcomponent:methods:start -->
|Method|Description|Parameters|
|---|---|---|
|clear|clears something|-|
<!-- @vuese:testcomponent:methods:end -->

19
docs/index.html Normal file
View File

@ -0,0 +1,19 @@
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Sample Components in Vue</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docute@4/dist/docute.css">
</head>
<body>
<div id="docute"></div>
<script src="https://cdn.jsdelivr.net/npm/docute@4/dist/docute.js"></script>
<script>
new Docute({
target: '#docute',
sidebar: JSON.parse('[{&#34;title&#34;:&#34;Sample Components&#34;,&#34;links&#34;:[{&#34;title&#34;:&#34;testcomponent&#34;,&#34;link&#34;:&#34;/components/testcomponent&#34;}]}]'.replace(/\&\#34\;/g, '"'))
})
</script>
</body>
</html>

52
index.html Normal file
View File

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<h2>{{ title }}</h2>
<input :value="title" @input="title = $event.target.value" >
<input v-model="count" type="number" >
<button @click="increment">Up</button>
<button @click="decrement">Down</button>
</div>
<script>
const app = Vue.createApp({
data() {
return {
title: "Hi there",
count: 4,
headingColor: 'some'
}
},
watch: {
count() {
console.log(this.count)
}
},
methods: {
increment() {
this.count++
},
decrement() {
this.count--
},
isEven() {
return this.count % 2 === 0
}
}
})
const vm = app.mount('#app')
</script>
<style>
.even {
color: pink;
}
</style>
</body>
</html>

31
testcomponent.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<div>
<h1>{{ title }}</h1>
</div>
</template>
<script>
// @group Sample Components
// just some sample code...
export default {
data() {
return {
// the title of the pages
title: "Hello"
}
},
methods: {
// @vuese
// clears something
clear() {
return true
}
}
}
</script>
<style lang="scss" scoped>
h1 {
color: red;
}
</style>