Docs: update docs of require-direct-export.md and v-on-function-call.md (#844)

Author: ota-meshi

docs/rules/require-direct-export.md

@@ -7,37 +7,51 @@ description: require the component to be directly exported
 # vue/require-direct-export
 > require the component to be directly exported
 
-## Rule Details
+## :book: Rule Details
 
 This rule aims to require that the component object be directly exported.
 
-:-1: Examples of **incorrect** code:
+<eslint-code-block :rules="{'vue/require-direct-export': ['error']}">
 
-```js
+```vue
+<script>
+/* ✓ GOOD */
+export default {
+  name: 'ComponentA',
+  data() {
+    return {
+      state: 1
+    }
+  }
+}
+</script>
+```
+
+</eslint-code-block>
+
+<eslint-code-block :rules="{'vue/require-direct-export': ['error']}">
+
+```vue
+<script>
 const ComponentA = {
-	name: 'ComponentA',
-	data() {
-		return {
-			state: 1
-		}
-	}
+  name: 'ComponentA',
+  data() {
+    return {
+      state: 1
+    }
+  }
 }
 
+/* ✗ BAD */
 export default ComponentA
+</script>
 ```
 
-:+1: Examples of **correct** code:
+</eslint-code-block>
 
-```js
-export default {
-	name: 'ComponentA',
-	data() {
-		return {
-			state: 1
-		}
-	}
-}
-```
+## :wrench: Options
+
+Nothing.
 
 ## :mag: Implementation
 

docs/rules/v-on-function-call.md

@@ -11,66 +11,80 @@ description: enforce or forbid parentheses after method calls without arguments
 
 ## :book: Rule Details
 
-:-1: Example of **incorrect** code for this rule:
-
-```html
-<button v-on:click="closeModal()">
-  Close
-</button>
+This rule aims to enforce to bind methods to `v-on` or call methods on `v-on` when without arguments.
+
+<eslint-code-block fix :rules="{'vue/v-on-function-call': ['error']}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <button v-on:click="closeModal">
+    Close
+  </button>
+
+  <!-- ✗ BAD -->
+  <button v-on:click="closeModal()">
+    Close
+  </button>
+</template>
 ```
 
-:+1: Example of **correct** code for this rule:
-
-```html
-<button v-on:click="closeModal">
-  Close
-</button>
-```
+</eslint-code-block>
 
 ## :wrench: Options
 
 Default is set to `never`.
 
-```
-'vue/v-on-function-call': [2, 'always'|'never']
+```json
+{
+  "vue/v-on-function-call": ["error", "always"|"never"]
+}
 ```
 
 ### `"always"` - Always use parentheses in `v-on` directives
 
-:-1: Example of **incorrect** code:
+<eslint-code-block fix :rules="{'vue/v-on-function-call': ['error', 'always']}">
 
-```html
-<button v-on:click="closeModal">
-  Close
-</button>
-```
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <button v-on:click="closeModal()">
+    Close
+  </button>
 
-:+1: Example of **correct** code:
-
-```html
-<button v-on:click="closeModal()">
-  Close
-</button>
+  <!-- ✗ BAD -->
+  <button v-on:click="closeModal">
+    Close
+  </button>
+</template>
 ```
 
+</eslint-code-block>
+
 ### `"never"` - Never use parentheses in `v-on` directives for method calls without arguments
 
-:-1: Example of **incorrect** code:
 
-```html
-<button v-on:click="closeModal()">
-  Close
-</button>
-```
+<eslint-code-block fix :rules="{'vue/v-on-function-call': ['error', 'never']}">
 
-:+1: Example of **correct** code:
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <button v-on:click="closeModal">
+    Close
+  </button>
+  <button v-on:click="closeModal(arg)">
+    Close
+  </button>
 
-```html
-<button v-on:click="closeModal">
-  Close
-</button>
+  <!-- ✗ BAD -->
+  <button v-on:click="closeModal()">
+    Close
+  </button>
+</template>
 ```
 
+</eslint-code-block>
+
 ## :mag: Implementation
 
 - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/v-on-function-call.js)