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>