vue setup

3 years ago · b7eb211300
commit b7eb211300
3 changed files with 84 additions and 0 deletions
--- a/app.js
+++ b/app.js
--- a/components/CookbookForm.js
+++ b/components/CookbookForm.js
@ -0,0 +1,43 @@
+export default {
+  name : "CookbookForm",
+  setup(){
+    const {ref}=Vue 
+
+    const title = ref('')
+    const description = ref('')
+    const nature = ref('')
+    const log = ref('')
+    const who = ref('')
+
+    return{title,description,nature,log,who}
+  },
+    template: `
+    <form action="">
+    <label for="title">Title</label>
+    <input type="text" v-model='title'/>
+
+    <label for="description">Description</label>
+    <textarea v-model="description"></textarea>
+
+    <label for="nature">Nature of the input</label>
+    <input type="text" v-model="nature" />
+
+    <label for="log">Process Log</label>
+    <textarea v-model="log"></textarea>
+
+    <label for="who">Who</label>
+    <input type="text" v-model="who" />
+  </form>
+  
+
+  <pre>
+  title:{{title}}
+  description:{{description}}
+  nature:{{nature}}
+  log:{{log}}
+  who:{{who}}
+  </pre>
+
+
+  `
+}
--- a/index.html
+++ b/index.html
@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>diffractive reading</title>
+</head>
+<body>
+
+
+
+
+
+
+
+
+
+
+    <script src="https://unpkg.com/vue@3"></script>
+
+<div id="app"><cookbook-form></cookbook-form></div>
+
+
+<script type="module">
+    import CookbookForm from "./components/CookbookForm.js"  
+    const { createApp } = Vue
+  createApp({
+    components : {CookbookForm},
+    data() {
+      return {
+        message: 'Hello Vue!'
+      }
+    }
+  }).mount('#app')
+</script>
+
+
+    
+</body>
+</html>