docs #2821: fix writing mistakes in letter case (#2828)

* docs: fix writing mistakes in letter case

* docs: revert removing 'is' from 'count is'

src/api/built-in-directives.md

@@ -451,7 +451,7 @@ Render the element and component once only, and skip future updates.
   <span v-once>This will never change: {{msg}}</span>
   <!-- the element have children -->
   <div v-once>
-    <h1>comment</h1>
+    <h1>Comment</h1>
     <p>{{msg}}</p>
   </div>
   <!-- component -->

src/examples/src/list-transition/App/template.html

@@ -1,6 +1,6 @@
-<button @click="insert">insert at random index</button>
-<button @click="reset">reset</button>
-<button @click="shuffle">shuffle</button>
+<button @click="insert">Insert at random index</button>
+<button @click="reset">Reset</button>
+<button @click="shuffle">Shuffle</button>
 
 <TransitionGroup tag="ul" name="fade" class="container">
   <li v-for="item in items" class="item" :key="item">

src/examples/src/modal/App/template.html

@@ -4,7 +4,7 @@
   <!-- use the modal component, pass in the prop -->
   <modal :show="showModal" @close="showModal = false">
     <template #header>
-      <h3>custom header</h3>
+      <h3>Custom Header</h3>
     </template>
   </modal>
 </Teleport>

src/examples/src/todomvc/App/template.html

@@ -1,6 +1,6 @@
 <section class="todoapp">
   <header class="header">
-    <h1>todos</h1>
+    <h1>Todos</h1>
     <input
       class="new-todo"
       autofocus

src/guide/built-ins/keep-alive-demos/CompA.vue

@@ -5,6 +5,6 @@ const count = ref(0)
 
 <template>
   <p>Current component: A</p>
-  <span style="margin-right: 20px">count: {{ count }}</span>
+  <span style="margin-right: 20px">Count: {{ count }}</span>
   <button @click="count++">+</button>
 </template>

src/guide/components/attrs.md

@@ -14,7 +14,7 @@ When a component renders a single root element, fallthrough attributes will be a
 
 ```vue-html
 <!-- template of <MyButton> -->
-<button>click me</button>
+<button>Click Me</button>
 ```
 
 And a parent using this component with:
@@ -26,7 +26,7 @@ And a parent using this component with:
 The final rendered DOM would be:
 
 ```html
-<button class="large">click me</button>
+<button class="large">Click Me</button>
 ```
 
 Here, `<MyButton>` did not declare `class` as an accepted prop. Therefore, `class` is treated as a fallthrough attribute and automatically added to `<MyButton>`'s root element.
@@ -37,13 +37,13 @@ If the child component's root element already has existing `class` or `style` at
 
 ```vue-html
 <!-- template of <MyButton> -->
-<button class="btn">click me</button>
+<button class="btn">Click Me</button>
 ```
 
 Then the final rendered DOM would now become:
 
 ```html
-<button class="btn large">click me</button>
+<button class="btn large">Click Me</button>
 ```
 
 ### `v-on` Listener Inheritance {#v-on-listener-inheritance}
@@ -112,15 +112,15 @@ Using our `<MyButton>` component example from the [previous section](#attribute-
 
 ```vue-html
 <div class="btn-wrapper">
-  <button class="btn">click me</button>
+  <button class="btn">Click Me</button>
 </div>
 ```
 
 We want all fallthrough attributes like `class` and `v-on` listeners to be applied to the inner `<button>`, not the outer `<div>`. We can achieve this with `inheritAttrs: false` and `v-bind="$attrs"`:
 
 ```vue-html{2}
 <div class="btn-wrapper">
-  <button class="btn" v-bind="$attrs">click me</button>
+  <button class="btn" v-bind="$attrs">Click Me</button>
 </div>
 ```
 

src/guide/components/events.md

@@ -32,7 +32,7 @@ A component can emit custom events directly in template expressions (e.g. in a `
 
 ```vue-html
 <!-- MyComponent -->
-<button @click="$emit('someEvent')">click me</button>
+<button @click="$emit('someEvent')">Click Me</button>
 ```
 
 <div class="options-api">

src/guide/components/v-model.md

@@ -19,7 +19,7 @@ function update() {
 </script>
 
 <template>
-  <div>parent bound v-model is: {{ model }}</div>
+  <div>Parent bound v-model is: {{ model }}</div>
 </template>
 ```
 

src/guide/essentials/watchers.md

@@ -141,7 +141,7 @@ const obj = reactive({ count: 0 })
 
 // this won't work because we are passing a number to watch()
 watch(obj.count, (count) => {
-  console.log(`count is: ${count}`)
+  console.log(`Count is: ${count}`)
 })
 ```
 
@@ -152,7 +152,7 @@ Instead, use a getter:
 watch(
   () => obj.count,
   (count) => {
-    console.log(`count is: ${count}`)
+    console.log(`Count is: ${count}`)
   }
 )
 ```

src/guide/extras/reactivity-in-depth.md

@@ -191,7 +191,7 @@ import { ref, watchEffect } from 'vue'
 const count = ref(0)
 
 watchEffect(() => {
-  document.body.innerHTML = `count is: ${count.value}`
+  document.body.innerHTML = `Count is: ${count.value}`
 })
 
 // updates the DOM

src/guide/extras/render-function.md

@@ -367,7 +367,7 @@ h(
       /* ... */
     }
   },
-  'click me'
+  'Click Me'
 )
 ```
 
@@ -377,7 +377,7 @@ h(
     /* ... */
   }}
 >
-  click me
+  Click Me
 </button>
 ```
 

src/guide/quick-start.md

@@ -394,7 +394,7 @@ export default {
   data() {
     return { count: 0 }
   },
-  template: `<div>count is {{ count }}</div>`
+  template: `<div>Count is: {{ count }}</div>`
 }
 ```
 
@@ -409,7 +409,7 @@ export default {
     const count = ref(0)
     return { count }
   },
-  template: `<div>count is {{ count }}</div>`
+  template: `<div>Count is: {{ count }}</div>`
 }
 ```
 

src/tutorial/src/step-2/description.md

@@ -63,7 +63,7 @@ Properties in the returned object will be made available in the template. This i
 
 ```vue-html
 <h1>{{ message }}</h1>
-<p>count is: {{ counter.count }}</p>
+<p>Count is: {{ counter.count }}</p>
 ```
 
 Notice how we did not need to use `.value` when accessing the `message` ref in templates: it is automatically unwrapped for more succinct usage.

src/tutorial/src/step-4/App/template.html

@@ -1,2 +1,2 @@
 <!-- make this button work -->
-<button>count is: {{ count }}</button>
+<button>Count is: {{ count }}</button>

src/tutorial/src/step-4/_hint/App/template.html

@@ -1 +1 @@
-<button @click="increment">count is: {{ count }}</button>
+<button @click="increment">Count is: {{ count }}</button>

src/tutorial/src/step-6/App/template.html

@@ -1,3 +1,3 @@
-<button @click="toggle">toggle</button>
+<button @click="toggle">Toggle</button>
 <h1>Vue is awesome!</h1>
 <h1>Oh no 😢</h1>

src/tutorial/src/step-6/_hint/App/template.html

@@ -1,3 +1,3 @@
-<button @click="toggle">toggle</button>
+<button @click="toggle">Toggle</button>
 <h1 v-if="awesome">Vue is awesome!</h1>
 <h1 v-else>Oh no 😢</h1>

src/tutorial/src/step-9/App/template.html

@@ -1 +1 @@
-<p ref="pElementRef">hello</p>
+<p ref="pElementRef">Hello</p>