Merge pull request #40 from vuejs/fix-create-app

Fix createApp and mount usage

Author: bencodezen

.prettierrc

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

src/guide/class-and-style.md

@@ -28,9 +28,11 @@ You can have multiple classes toggled by having more fields in the object. In ad
 And the following data:
 
 ```js
-data: {
-  isActive: true,
-  hasError: false
+data() {
+  return {
+    isActive: true,
+    hasError: false
+  }
 }
 ```
 
@@ -49,10 +51,12 @@ The bound object doesn't have to be inline:
 ```
 
 ```js
-data: {
-  classObject: {
-    active: true,
-    'text-danger': false
+data() {
+  return {
+    classObject: {
+      active: true,
+      'text-danger': false
+    }
   }
 }
 ```
@@ -64,9 +68,11 @@ This will render the same result. We can also bind to a [computed property](comp
 ```
 
 ```js
-data: {
-  isActive: true,
-  error: null
+data() {
+  return {
+    isActive: true,
+    error: null
+  }
 },
 computed: {
   classObject() {
@@ -87,9 +93,11 @@ We can pass an array to `v-bind:class` to apply a list of classes:
 ```
 
 ```js
-data: {
-  activeClass: 'active',
-  errorClass: 'text-danger'
+data() {
+  return {
+    activeClass: 'active',
+    errorClass: 'text-danger'
+  }
 }
 ```
 
@@ -122,9 +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 MyComponent = {
-  template: '<p class="foo bar">Hi!</p>'
-}
+const app = Vue.createApp()
+
+app.component('my-component', {
+  template: `<p class="foo bar">Hi!</p>`
+})
 ```
 
 Then add some classes when using it:
@@ -135,17 +145,6 @@ Then add some classes when using it:
 </div>
 ```
 
-```js
-Vue.createApp().mount(
-  {
-    components: {
-      'my-component': MyComponent
-    }
-  },
-  '#app'
-)
-```
-
 The rendered HTML will be:
 
 ```html
@@ -177,9 +176,11 @@ The object syntax for `v-bind:style` is pretty straightforward - it looks almost
 ```
 
 ```js
-data: {
-  activeColor: 'red',
-  fontSize: 30
+data() {
+  return {
+    activeColor: 'red',
+    fontSize: 30
+  }
 }
 ```
 
@@ -190,10 +191,12 @@ It is often a good idea to bind to a style object directly so that the template
 ```
 
 ```js
-data: {
-  styleObject: {
-    color: 'red',
-    fontSize: '13px'
+data() {
+  return {
+    styleObject: {
+      color: 'red',
+      fontSize: '13px'
+    }
   }
 }
 ```

src/guide/computed.md

@@ -14,7 +14,7 @@ In-template expressions are very convenient, but they are meant for simple opera
 
 At this point, the template is no longer simple and declarative. You have to look at it for a second before realizing that it displays `message` in reverse. The problem is made worse when you want to include the reversed message in your template more than once.
 
-That's why for any complex logic, you should use a **computed property**.
+That's why for complex logic that includes reactive data, you should use a **computed property**.
 
 ### Basic Example
 
@@ -26,26 +26,23 @@ That's why for any complex logic, you should use a **computed property**.
 ```
 
 ```js
-const vm = Vue.createApp().mount(
-  {
-    data() {
-      return {
-        message: 'Hello'
-      }
-    },
-    computed: {
-      // a computed getter
-      reversedMessage() {
-        // `this` points to the vm instance
-        return this.message
-          .split('')
-          .reverse()
-          .join('')
-      }
+const vm = Vue.createApp({
+  data() {
+    return {
+      message: 'Hello'
     }
   },
-  '#example'
-)
+  computed: {
+    // a computed getter
+    reversedMessage() {
+      // `this` points to the vm instance
+      return this.message
+        .split('')
+        .reverse()
+        .join('')
+    }
+  }
+}).mount('#example')
 ```
 
 Result:
@@ -106,47 +103,41 @@ Vue does provide a more generic way to observe and react to data changes on a Vu
 ```
 
 ```js
-const vm = Vue.createApp().mount(
-  {
-    data() {
-      return {
-        firstName: 'Foo',
-        lastName: 'Bar',
-        fullName: 'Foo Bar'
-      }
-    },
-    watch: {
-      firstName(val) {
-        this.fullName = val + ' ' + this.lastName
-      },
-      lastName(val) {
-        this.fullName = this.firstName + ' ' + val
-      }
+const vm = Vue.createApp({
+  data() {
+    return {
+      firstName: 'Foo',
+      lastName: 'Bar',
+      fullName: 'Foo Bar'
     }
   },
-  '#demo'
-)
+  watch: {
+    firstName(val) {
+      this.fullName = val + ' ' + this.lastName
+    },
+    lastName(val) {
+      this.fullName = this.firstName + ' ' + val
+    }
+  }
+}).mount('#demo')
 ```
 
 The above code is imperative and repetitive. Compare it with a computed property version:
 
 ```js
-const vm = Vue.createApp().mount(
-  {
-    data() {
-      return {
-        firstName: 'Foo',
-        lastName: 'Bar'
-      }
-    },
-    computed: {
-      fullName() {
-        return this.firstName + ' ' + this.lastName
-      }
+const vm = Vue.createApp({
+  data() {
+    return {
+      firstName: 'Foo',
+      lastName: 'Bar'
     }
   },
-  '#demo'
-)
+  computed: {
+    fullName() {
+      return this.firstName + ' ' + this.lastName
+    }
+  }
+}).mount('#demo')
 ```
 
 Much better, isn't it?
@@ -199,38 +190,35 @@ For example:
 <!-- gives you the freedom to use what you're familiar with.      -->
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
 <script>
-  const watchExampleVM = Vue.createApp().mount(
-    {
-      data() {
-        return {
-          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()
-          }
-        }
-      },
-      methods: {
-        getAnswer() {
-          this.answer = 'Thinking...'
-          axios
-            .get('https://yesno.wtf/api')
-            .then(response => {
-              this.answer = _.capitalize(response.data.answer)
-            })
-            .catch(error => {
-              this.answer = 'Error! Could not reach the API. ' + error
-            })
+  const watchExampleVM = Vue.createApp({
+    data() {
+      return {
+        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()
         }
       }
     },
-    '#watch-example'
-  )
+    methods: {
+      getAnswer() {
+        this.answer = 'Thinking...'
+        axios
+          .get('https://yesno.wtf/api')
+          .then(response => {
+            this.answer = _.capitalize(response.data.answer)
+          })
+          .catch(error => {
+            this.answer = 'Error! Could not reach the API. ' + error
+          })
+      }
+    }
+  }).mount('#watch-example')
 </script>
 ```