update custom directives example to avoid force scroll on smaller screens

Author: chrisvfritz

src/guide/custom-directive.md

@@ -6,21 +6,43 @@ order: 16
 
 ## Intro
 
-In addition to the default set of directives shipped in core (`v-model` and `v-show`), Vue also allows you to register your own custom directives. Directives provide a reusable way of binding behavior that requires low-level DOM access, such as focusing on an input element.
+In addition to the default set of directives shipped in core (`v-model` and `v-show`), Vue also allows you to register your own custom directives. Directives provide a reusable way of binding behavior that requires low-level DOM access, such as focusing on an input element, like this one:
 
-Here's a simple example:
+{% raw %}
+<div id="simplest-directive-example" class="demo">
+  <input v-focus>
+</div>
+<script>
+Vue.directive('focus', {
+  bind: function (el) {
+    Vue.nextTick(function () {
+      el.focus()
+    })
+  }
+})
+new Vue({
+  el: '#simplest-directive-example'
+})
+</script>
+{% endraw %}
+
+When the page loads, that element gains focus. In fact, if you haven't clicked on anything else since visiting this page, the input above should be focused now. Now let's build the directive that accomplishes this:
 
 ``` js
+// Register a global custom directive called v-focus
 Vue.directive('focus', {
+  // When the directive is first bound to the element...
   bind: function (el) {
+    // After the next render...
     Vue.nextTick(function () {
+      // Focus the element
       el.focus()
     })
   }
 })
 ```
 
-This registers a global custom directive `v-focus`. If you want to register a directive locally instead, components also accept a `directives` option:
+If you want to register a directive locally instead, components also accept a `directives` option:
 
 ``` js
 directives: {
@@ -30,32 +52,12 @@ directives: {
 }
 ```
 
-Now in your template, you can use the `v-focus` attribute on any element, like this:
+Then in a template, you can use the new `v-focus` attribute on any element, like this:
 
 ``` html
 <input v-focus>
 ```
 
-When the page loads, that element will gain focus. In fact, if you haven't clicked on anything else since visiting this page, the input below should be focused now:
-
-{% raw %}
-<div id="simplest-directive-example" class="demo">
-  <input v-focus>
-</div>
-<script>
-Vue.directive('focus', {
-  bind: function (el) {
-    Vue.nextTick(function () {
-      el.focus()
-    })
-  }
-})
-new Vue({
-  el: '#simplest-directive-example'
-})
-</script>
-{% endraw %}
-
 ## Hook Functions
 
 A directive definition object can provide several hook functions (all optional):