fix: fixed forms and prettier

Author: ntepluhina

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "semi": false,
+  "singleQuote": true
+}

src/guide/class-and-style.md

@@ -130,11 +130,11 @@ When you use the `class` attribute on a custom component, those classes will be
 For example, if you declare this component:
 
 ```js
-const app = Vue.createApp();
+const app = Vue.createApp()
 
-app.component("my-component", {
+app.component('my-component', {
   template: `<p class="foo bar">Hi!</p>`
-});
+})
 ```
 
 Then add some classes when using it:

src/guide/computed.md

@@ -29,20 +29,20 @@ That's why for complex logic that includes reactive data, you should use a **com
 const vm = Vue.createApp({
   data() {
     return {
-      message: "Hello"
-    };
+      message: 'Hello'
+    }
   },
   computed: {
     // a computed getter
     reversedMessage() {
       // `this` points to the vm instance
       return this.message
-        .split("")
+        .split('')
         .reverse()
-        .join("");
+        .join('')
     }
   }
-}).mount("#example");
+}).mount('#example')
 ```
 
 Result:
@@ -52,9 +52,9 @@ Result:
 Here we have declared a computed property `reversedMessage`. The function we provided will be used as the getter function for the property `vm.reversedMessage`:
 
 ```js
-console.log(vm.reversedMessage); // => 'olleH'
-vm.message = "Goodbye";
-console.log(vm.reversedMessage); // => 'eybdooG'
+console.log(vm.reversedMessage) // => 'olleH'
+vm.message = 'Goodbye'
+console.log(vm.reversedMessage) // => 'eybdooG'
 ```
 
 You can open the sandbox(TODO) and play with the example vm yourself. The value of `vm.reversedMessage` is always dependent on the value of `vm.message`.
@@ -106,20 +106,20 @@ Vue does provide a more generic way to observe and react to data changes on a Vu
 const vm = Vue.createApp({
   data() {
     return {
-      firstName: "Foo",
-      lastName: "Bar",
-      fullName: "Foo Bar"
-    };
+      firstName: 'Foo',
+      lastName: 'Bar',
+      fullName: 'Foo Bar'
+    }
   },
   watch: {
     firstName(val) {
-      this.fullName = val + " " + this.lastName;
+      this.fullName = val + ' ' + this.lastName
     },
     lastName(val) {
-      this.fullName = this.firstName + " " + val;
+      this.fullName = this.firstName + ' ' + val
     }
   }
-}).mount("#demo");
+}).mount('#demo')
 ```
 
 The above code is imperative and repetitive. Compare it with a computed property version:
@@ -128,16 +128,16 @@ The above code is imperative and repetitive. Compare it with a computed property
 const vm = Vue.createApp({
   data() {
     return {
-      firstName: "Foo",
-      lastName: "Bar"
-    };
+      firstName: 'Foo',
+      lastName: 'Bar'
+    }
   },
   computed: {
     fullName() {
-      return this.firstName + " " + this.lastName;
+      return this.firstName + ' ' + this.lastName
     }
   }
-}).mount("#demo");
+}).mount('#demo')
 ```
 
 Much better, isn't it?
@@ -193,32 +193,32 @@ For example:
   const watchExampleVM = Vue.createApp({
     data() {
       return {
-        question: "",
-        answer: "Questions usually contain a question mark. ;-)"
-      };
+        question: '',
+        answer: 'Questions usually contain a question mark. ;-)'
+      }
     },
     watch: {
       // whenever question changes, this function will run
       question(newQuestion, oldQuestion) {
-        if (newQuestion.indexOf("?") > -1) {
-          this.getAnswer();
+        if (newQuestion.indexOf('?') > -1) {
+          this.getAnswer()
         }
       }
     },
     methods: {
       getAnswer() {
-        this.answer = "Thinking...";
+        this.answer = 'Thinking...'
         axios
-          .get("https://yesno.wtf/api")
+          .get('https://yesno.wtf/api')
           .then(response => {
-            this.answer = _.capitalize(response.data.answer);
+            this.answer = _.capitalize(response.data.answer)
           })
           .catch(error => {
-            this.answer = "Error! Could not reach the API. " + error;
-          });
+            this.answer = 'Error! Could not reach the API. ' + error
+          })
       }
     }
-  }).mount("#watch-example");
+  }).mount('#watch-example')
 </script>
 ```
 

src/guide/events.md

@@ -20,9 +20,9 @@ Vue.createApp({
   data() {
     return {
       counter: 1
-    };
+    }
   }
-}).mount("#example-1");
+}).mount('#example-1')
 ```
 
 Result:
@@ -46,20 +46,20 @@ For example:
 Vue.createApp({
   data() {
     return {
-      name: "Vue.js"
-    };
+      name: 'Vue.js'
+    }
   },
   methods: {
     greet(event) {
       // `this` inside methods points to the Vue instance
-      alert("Hello " + this.name + "!");
+      alert('Hello ' + this.name + '!')
       // `event` is the native DOM event
       if (event) {
-        alert(event.target.tagName);
+        alert(event.target.tagName)
       }
     }
   }
-}).mount("#example-2");
+}).mount('#example-2')
 ```
 
 Result:
@@ -81,10 +81,10 @@ Instead of binding directly to a method name, we can also use methods in an inli
 Vue.createApp({
   methods: {
     say(message) {
-      alert(message);
+      alert(message)
     }
   }
-}).mount("#example-3");
+}).mount('#example-3')
 ```
 
 Result:
@@ -220,7 +220,7 @@ You can also [define custom key modifier aliases](TODO:../api/#keyCodes) via the
 
 ```js
 // enable `v-on:keyup.f1`
-Vue.config.keyCodes.f1 = 112;
+Vue.config.keyCodes.f1 = 112
 ```
 
 ## System Modifier Keys

src/guide/forms.md

@@ -76,26 +76,39 @@ Multiple checkboxes, bound to the same Array:
 ```
 
 ```js
-new Vue({
-  el: '#example-3',
-  data: {
-    checkedNames: []
+Vue.createApp({
+  data() {
+    return {
+      checkedNames: []
+    }
   }
-})
+}).mount('#example-3')
 ```
 
 <forms-4/>
 
 ### Radio
 
 ```html
-<input type="radio" id="one" value="One" v-model="picked" />
-<label for="one">One</label>
-<br />
-<input type="radio" id="two" value="Two" v-model="picked" />
-<label for="two">Two</label>
-<br />
-<span>Picked: {{ picked }}</span>
+<div id="example-4">
+  <input type="radio" id="one" value="One" v-model="picked" />
+  <label for="one">One</label>
+  <br />
+  <input type="radio" id="two" value="Two" v-model="picked" />
+  <label for="two">Two</label>
+  <br />
+  <span>Picked: {{ picked }}</span>
+</div>
+```
+
+```js
+Vue.createApp({
+  data() {
+    return {
+      picked: ''
+    }
+  }
+}).mount('#example-4')
 ```
 
 <forms-5/>
@@ -117,16 +130,13 @@ Single select:
 ```
 
 ```js
-Vue.createApp().mount(
-  {
-    data() {
-      return {
-        selected: ''
-      }
+Vue.createApp({
+  data() {
+    return {
+      selected: ''
     }
-  },
-  '#example-select'
-)
+  }
+}).mount('#example-select')
 ```
 
 <forms-6/>
@@ -163,21 +173,18 @@ Dynamic options rendered with `v-for`:
 ```
 
 ```js
-Vue.createApp().mount(
-  {
-    data() {
-      return {
-        selected: 'A',
-        options: [
-          { text: 'One', value: 'A' },
-          { text: 'Two', value: 'B' },
-          { text: 'Three', value: 'C' }
-        ]
-      }
+Vue.createApp({
+  data() {
+    return {
+      selected: 'A',
+      options: [
+        { text: 'One', value: 'A' },
+        { text: 'Two', value: 'B' },
+        { text: 'Three', value: 'C' }
+      ]
     }
-  },
-  '#example-select-dynamic'
-)
+  }
+}).mount('#example-select-dynamic')
 ```
 
 <forms-8/>