improve examples

Author: yyx990803

src/examples/src/conditionals-and-loops/App/template.html

@@ -3,6 +3,8 @@
 <button @click="list.pop()">Pop Number</button>
 <button @click="list.reverse()">Reverse List</button>
 
-<ul v-if="show">
+<ul v-if="show && list.length">
   <li v-for="item of list">{{ item }}</li>
 </ul>
+<p v-else-if="list.length">List is not empty, but hidden.</p>
+<p v-else>List is empty.</p>

src/examples/src/form-bindings/App/composition.js

@@ -7,13 +7,15 @@ export default {
     const checkedNames = ref(['Jack'])
     const picked = ref('One')
     const selected = ref('A')
+    const multiSelected = ref(['A'])
 
     return {
       text,
       checked,
       checkedNames,
       picked,
-      selected
+      selected,
+      multiSelected
     }
   }
 }

src/examples/src/form-bindings/App/options.js

@@ -5,7 +5,8 @@ export default {
       checked: true,
       checkedNames: ['Jack'],
       picked: 'One',
-      selected: 'A'
+      selected: 'A',
+      multiSelected: ['A']
     }
   }
 }

src/examples/src/form-bindings/App/template.html

@@ -5,6 +5,10 @@ <h2>Checkbox</h2>
 <input type="checkbox" id="checkbox" v-model="checked" />
 <label for="checkbox">Checked: {{ checked }}</label>
 
+<!--
+  multiple checkboxes can bind to the same
+  array v-model value
+-->
 <h2>Multi Checkbox</h2>
 <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
 <label for="jack">Jack</label>
@@ -31,3 +35,11 @@ <h2>Select</h2>
   <option>C</option>
 </select>
 <span>Selected: {{ selected }}</span>
+
+<h2>Multi Select</h2>
+<select v-model="multiSelected" multiple style="width:100px">
+  <option>A</option>
+  <option>B</option>
+  <option>C</option>
+</select>
+<span>Selected: {{ multiSelected }}</span>

src/examples/src/handling-input/App/composition.js

@@ -5,16 +5,19 @@ export default {
     const message = ref('Hello World!')
 
     function reverseMessage() {
-      // in JavaScript, we must access/mutate the value of a ref
-      // via its .value property.
-      // Note we don't need to do so inside templates because
-      // refs are automatically "unwrapped" in templates.
+      // Access/mutate the value of a ref via
+      // its .value property.
       message.value = message.value.split('').reverse().join('')
     }
 
+    function notify() {
+      alert('navigation was prevented.')
+    }
+
     return {
       message,
-      reverseMessage
+      reverseMessage,
+      notify
     }
   }
 }

src/examples/src/handling-input/App/options.js

@@ -7,6 +7,9 @@ export default {
   methods: {
     reverseMessage() {
       this.message = this.message.split('').reverse().join('')
+    },
+    notify() {
+      alert('navigation was prevented.')
     }
   }
-}
+}

src/examples/src/handling-input/App/style.css

@@ -0,0 +1,4 @@
+button, a {
+  display: block;
+  margin-bottom: 1em;
+}

src/examples/src/handling-input/App/template.html

@@ -1,7 +1,22 @@
+<!--
+  Note we don't need .value inside templates because
+  refs are automatically "unwrapped" in templates.
+-->
 <h1>{{ message }}</h1>
 
-<!-- bind to a method/function -->
+<!--
+  Bind to a method/function.
+  The @click syntax is short for v-on:click.
+-->
 <button @click="reverseMessage">Reverse Message</button>
 
-<!-- can also be an inline expression statement -->
+<!-- Can also be an inline expression statement -->
 <button @click="message += '!'">Append "!"</button>
+
+<!--
+  Vue also provides modifiers for common tasks
+  such as e.preventDefault() and e.stopPropagation()
+-->
+<a href="https://vuejs.org" @click.prevent="notify">
+  A link with e.preventDefault()
+</a>

src/examples/src/handling-input/description.txt

@@ -1 +1 @@
-This example demonstrates handling user input with the v-on directive. The @click syntax is short for v-on:click.
+This example demonstrates handling user input with the v-on directive.

src/examples/src/tree/TreeItem/template.html

@@ -7,6 +7,10 @@
     <span v-if="isFolder">[{{ isOpen ? '-' : '+' }}]</span>
   </div>
   <ul v-show="isOpen" v-if="isFolder">
+    <!--
+      A component can recursively render itself using its
+      "name" option (inferred from filename if using SFC)
+    -->
     <TreeItem
       class="item"
       v-for="model in model.children"