m8-framework-mcp 1.0.0

package/docs/m8mpdoc-develop/002-/350/247/204/350/214/203/344/270/216/346/250/241/345/274/217/003.2-style-guide-b.md

@@ -0,0 +1,1041 @@
+# 优先级 B 的规则：强烈推荐 (增强可读性)
+
+<div class="style-guide">
+
+<!-- 开始 -->
+
+## 避免使用浏览器的 DOM API <span class="priority-a">强烈推荐</span>
+
+在使用 M8 移动前端框架跨平台开发时，应避免直接使用浏览器的 DOM API，如 `document` 或 `window`。这些 API 在非浏览器环境中可能不可用或表现不一致，例如在微信小程序或其他类似平台中。
+
+<details>
+<summary>
+  <h4>详解</h4>
+</summary>
+
+直接操作 DOM 不仅违反了 Vue 的数据驱动视图的原则，而且会导致代码在跨平台时兼容性问题。使用 Vue 的响应式系统和模板语法可以更好地保证应用的可维护性和跨平台功能的正常工作。
+- 避免使用：直接使用 document.querySelector 或 document.getElementById 等来操作 DOM。
+- 推荐做法：使用 Vue 的模板绑定、计算属性和方法来处理数据和视图的更新。
+
+</details>
+
+<div class="style-example example-bad">
+
+### 反例：
+
+```js
+mounted() {
+    const element = document.getElementById('my-element');
+    element.style.display = 'none';
+}
+```
+
+</div>
+<div class="style-example example-good">
+
+### 好例子：
+
+```html
+<template>
+    <div v-if="isVisible">
+        <!-- 内容 -->
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            isVisible: true
+        };
+    },
+    methods: {
+        hideElement() {
+            this.isVisible = false;
+        }
+    }
+}
+</script>
+
+```
+
+</div>
+<!-- 结束 -->
+
+<!-- 开始 -->
+
+## 使用 uniapp 内置组件 <span class="priority-a">强烈推荐</span>
+
+不推荐使用HTML标签，但实际上如果开发者写了`div`等标签，在编译到非H5平台时也会被编译器转换为`view`标签，类似的还有`span`转`text`、`a`转`navigator`等，包括css里的元素选择器也会转。
+
+但为了管理方便、策略统一，新写代码时仍然建议使用`view`等组件。
+
+[uniapp 基础组件列表](https://uniapp.dcloud.net.cn/component/#%E5%9F%BA%E7%A1%80%E7%BB%84%E4%BB%B6%E5%88%97%E8%A1%A8)
+
+<div class="style-example example-bad">
+
+### 反例：
+
+```html
+<div></div>
+<span></span>
+<a href=""></a>
+```
+
+</div>
+<div class="style-example example-good">
+
+### 好例子：
+
+```html
+<view></view>
+<text></text>
+<navigator></navigator>
+```
+
+</div>
+<!-- 结束 -->
+
+<!-- 开始 -->
+
+## 使用 EJS 扩展 API <span class="priority-a">强烈推荐</span>
+
+拓展 ejs api 在不支持的 APP 环境下使用。
+
+<div class="style-example example-bad">
+
+### 反例：
+
+```js
+const huaWei = navigator.userAgent.match(/huawei/i)
+
+if (ejs.os.ejs) {
+    ejs.page.open(xxx)
+} else if (huaWei){
+    hw.openPage(xxx)
+}
+```
+
+</div>
+<div class="style-example example-good">
+
+### 好例子：
+
+```js
+// extends.huawei.js
+
+// 扩展 ejs.os.huaWei
+ejs.extendOS('huaWei', function (os) {
+    const huaWei = navigator.userAgent.match(/huawei/i)
+
+    if (huaWei) {
+        // 注意，这里的字段名必须与拓展的环境名os值相同
+        os.huaWei = true;
+    }
+});
+
+// 扩展 ejs.page.open 支持 huaWei API
+ejs.extendModule('page', [
+    {
+        namespace: 'open',
+        os: ['huaWei'], // 该API支持的环境
+        defaultParams: {},
+        runCode(options, resolve, reject) {
+            hw.openPage(options, xxx)
+        },
+    },
+]);
+
+```
+ 使用扩展 API 后，业务ejs代码在huawei环境下不用修改
+
+
+```js
+ejs.page.open(xxx)
+```
+</div>
+<!-- 结束 -->
+
+<!-- 开始 -->
+
+## static 目录 <span class="priority-a">强烈推荐</span>
+
+`src/static` 为静态资源目录，目录资源构建后会被原样复制到输出目录。目录下的文件不会被编译，如果里面有 `es6` 的代码，不经过转换直接运行，在手机设备上会报错。
+
+`css`、`scss` 等资源不要放在 `static` 目录下，建议这些公用的资源放在 `common` 目录下。
+
+<details>
+<summary>
+  <h4>详解</h4>
+</summary>
+
+- 为什么需要static这样的目录？
+
+uni-app编译器根据pages.json扫描需要编译的页面，并根据页面引入的js、css合并打包文件。\
+对于本地的图片、字体、视频、文件等资源，如果可以直接识别，那么也会把这些资源文件打包进去，但如果这些资源以变量的方式引用，
+比如：```<image :src="url"></image>```，甚至可能有更复杂的函数计算，此时编译器无法分析。
+
+那么有了static目录，编译器就会把这个目录整体复制到最终编译包内。这样只要运行时确实能获取到这个图片，就可以显示。
+
+当然这也带来一个注意事项，如果static里有一些没有使用的废文件，也会被打包到编译包里，造成体积变大。
+
+另外注意，static目录支持特殊的平台子目录，比如web、app、mp-weixin等，这些目录存放专有平台的文件，这些平台的文件在打包其他平台时不会被包含。详见[条件编译](https://uniapp.dcloud.net.cn/tutorial/platform.html#static-%E7%9B%AE%E5%BD%95%E7%9A%84%E6%9D%A1%E4%BB%B6%E7%BC%96%E8%AF%91)
+
+非 `static` 目录下的文件（vue组件、js、css 等）只有被引用时，才会被打包编译。
+
+`css`、`less/scss` 等资源不要放在 `static` 目录下，建议这些公用的资源放在自建的 `common` 目录下。
+
+</details>
+
+<div class="style-example example-bad">
+
+### 反例：
+
+```bash
+static/
+|- xxx.css
+|- xxx.scss
+|- es6xx.js
+```
+
+</div>
+<div class="style-example example-good">
+
+### 好例子：
+
+```bash
+static/
+|- h5
+|  |- performance.js
+|- mp-weixin
+|  |- index.js
+|- logo.jpg
+```
+</div>
+<!-- 结束 -->
+
+<!-- 开始 -->
+
+## 组件销毁时及时销毁复杂对象的引用或移除事件监听 <span class="priority-a">强烈推荐</span>
+
+在组件创建过程中添加的复杂对象引用或全局的事件监听，若未在组件销毁时及时移除，可能引起内存泄漏，造成严重的性能问题。
+
+<div class="style-example example-bad">
+
+### 反例：
+
+```js
+export default {
+    created() {
+        // 该事件不移除会一直存在，相关内存也不会被释放
+        document.addEventListener('visibilitychange', this.handleVisable);
+    },
+    methods: {
+        handleVisable() {
+            let self = this;
+
+            if (document.visibilityState == 'visible') {
+                self.type = Util.getExtraDataByKey('type') || '0';
+                self.submitAliPayCheck();
+            }
+        }
+    }
+}
+```
+
+</div>
+<div class="style-example example-good">
+
+### 好例子：
+
+```js
+export default {
+    created() {
+        document.addEventListener('visibilitychange', this.handleVisable);
+    },
+    methods: {
+        handleVisable() {
+            let self = this;
+
+            if (document.visibilityState == 'visible') {
+                self.type = Util.getExtraDataByKey('type') || '0';
+                self.submitAliPayCheck();
+            }
+        }
+    },
+    beforeDestroy() {
+        document.removeEventListener('visibilitychange', this.handleVisable);
+    }
+}
+```
+</div>
+<!-- 结束 -->
+
+## 组件文件 <span class="priority-a">强烈推荐</span>
+
+**只要有能够拼接文件的构建系统，就把每个组件单独分成文件。**
+
+当你需要编辑一个组件或查阅一个组件的用法时，可以更快速的找到它。
+
+<div class="style-example example-bad">
+
+### 反例：
+
+```js
+Vue.component('TodoList', {
+    // ...
+});
+
+Vue.component('TodoItem', {
+    // ...
+});
+```
+
+</div>
+<div class="style-example example-good">
+
+### 好例子：
+
+```
+components/
+|- TodoList.js
+|- TodoItem.js
+```
+
+```
+components/
+|- TodoList.vue
+|- TodoItem.vue
+```
+
+</div>
+
+<!-- 开始 -->
+
+## 单文件组件文件名使用 kebab-case <span class="priority-a">必要</span>
+
+**所有 `.vue` 文件及其目录统一使用 kebab-case，禁止 PascalCase 或大小写混用。**
+
+跨平台仓库对大小写敏感度不同，统一短横线小写能避免路径冲突，也符合 A 级“目录和文件命名”要求。
+
+<div class="style-example example-bad">
+
+### 反例：
+
+```
+components/
+|- MyComponent.vue
+|- userProfile/index.vue
+```
+
+</div>
+<div class="style-example example-good">
+
+### 好例子：
+
+```
+components/
+|- user-card.vue
+|- user-profile/index.vue
+```
+
+</div>
+<!-- 结束 -->
+
+<!-- 开始 -->
+
+## 基础组件名 <span class="priority-a">强烈推荐</span>
+
+**应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 `Base`、`App` 或 `V`。**
+
+<details>
+<summary>
+  <h4>详解</h4>
+</summary>
+
+这些组件为你的应用奠定了一致的基础样式和行为。它们可能**只**包括：
+
+-   HTML 元素
+-   其它基础组件
+-   第三方 UI 组件库
+
+但是它们**绝不会**包括全局状态 (比如来自 Vuex store)。
+
+它们的名字通常包含所包裹元素的名字 (比如 `BaseButton`、`BaseTable`)，除非没有现成的对应功能的元素 (比如 `BaseIcon`)。如果你为特定的上下文构建类似的组件，那它们几乎总会消费这些组件 (比如 `BaseButton` 可能会用在 `ButtonSubmit` 上)。
+
+这样做的几个好处：
+
+-   当你在编辑器中以字母顺序排序时，你的应用的基础组件会全部列在一起，这样更容易识别。
+
+-   因为组件名应该始终是多个单词，所以这样做可以避免你在包裹简单组件时随意选择前缀 (比如 `MyButton`、`VueButton`)。
+
+</details>
+
+<div class="style-example example-bad">
+
+### 反例：
+
+```
+components/
+|- MyButton.vue
+|- VueTable.vue
+|- Icon.vue
+```
+
+</div>
+<div class="style-example example-good">
+
+### 好例子：
+
+```
+components/
+|- BaseButton.vue
+|- BaseTable.vue
+|- BaseIcon.vue
+```
+
+```
+components/
+|- AppButton.vue
+|- AppTable.vue
+|- AppIcon.vue
+```
+
+```
+components/
+|- VButton.vue
+|- VTable.vue
+|- VIcon.vue
+```
+
+</div>
+<!-- 结束 -->
+
+<!-- 开始 -->
+
+## 紧密耦合的组件名 <span class="priority-a">强烈推荐</span>
+
+**和父组件紧密耦合的子组件应该以父组件名作为前缀命名。**
+
+如果一个组件只在某个父组件的场景下有意义，这层关系应该体现在其名字上。因为编辑器通常会按字母顺序组织文件，所以这样做可以把相关联的文件排在一起。
+
+<details>
+<summary>
+  <h4>详解</h4>
+</summary>
+
+你可以试着通过在其父组件命名的目录中嵌套子组件以解决这个问题。比如：
+
+```
+components/
+|- TodoList/
+   |- Item/
+      |- index.vue
+      |- Button.vue
+   |- index.vue
+```
+
+或：
+
+```
+components/
+|- TodoList/
+   |- Item/
+      |- Button.vue
+   |- Item.vue
+|- TodoList.vue
+```
+
+但是这种方式并不推荐，因为这会导致：
+
+-   许多文件的名字相同，使得在编辑器中快速切换文件变得困难。
+-   过多嵌套的子目录增加了在编辑器侧边栏中浏览组件所花的时间。
+
+</details>
+
+<div class="style-example example-bad">
+
+### 反例：
+
+```
+components/
+|- TodoList.vue
+|- TodoItem.vue
+|- TodoButton.vue
+```
+
+```
+components/
+|- SearchSidebar.vue
+|- NavigationForSearchSidebar.vue
+```
+
+</div>
+<div class="style-example example-good">
+
+### 好例子：
+
+```
+components/
+|- TodoList.vue
+|- TodoListItem.vue
+|- TodoListItemButton.vue
+```
+
+```
+components/
+|- SearchSidebar.vue
+|- SearchSidebarNavigation.vue
+```
+
+</div>
+<!-- 结束 -->
+
+<!-- 开始 -->
+
+## 组件名中的单词顺序 <span class="priority-a">强烈推荐</span>
+
+**组件名应该以高级别的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾。**
+
+<details>
+<summary>
+  <h4>详解</h4>
+</summary>
+
+你可能会疑惑：
+
+> “为什么我们给组件命名时不多遵从自然语言呢？”
+
+在自然的英文里，形容词和其它描述语通常都出现在名词之前，否则需要使用连接词。比如：
+
+-   Coffee _with_ milk
+-   Soup _of the_ day
+-   Visitor _to the_ museum
+
+如果你愿意，你完全可以在组件名里包含这些连接词，但是单词的顺序很重要。
+
+同样要注意**在你的应用中所谓的“高级别”是跟语境有关的**。比如对于一个带搜索表单的应用来说，它可能包含这样的组件：
+
+```
+components/
+|- ClearSearchButton.vue
+|- ExcludeFromSearchInput.vue
+|- LaunchOnStartupCheckbox.vue
+|- RunSearchButton.vue
+|- SearchInput.vue
+|- TermsCheckbox.vue
+```
+
+你可能注意到了，我们很难看出来哪些组件是针对搜索的。现在我们来根据规则给组件重新命名：
+
+```
+components/
+|- SearchButtonClear.vue
+|- SearchButtonRun.vue
+|- SearchInputExcludeGlob.vue
+|- SearchInputQuery.vue
+|- SettingsCheckboxLaunchOnStartup.vue
+|- SettingsCheckboxTerms.vue
+```
+
+因为编辑器通常会按字母顺序组织文件，所以现在组件之间的重要关系一目了然。
+
+你可能想换成多级目录的方式，把所有的搜索组件放到“search”目录，把所有的设置组件放到“settings”目录。我们只推荐在非常大型 (如有 100+ 个组件) 的应用下才考虑这么做，因为：
+
+-   在多级目录间找来找去，要比在单个 `components` 目录下滚动查找要花费更多的精力。
+-   存在组件重名 (比如存在多个 `ButtonDelete` 组件) 的时候在编辑器里更难快速定位。
+-   让重构变得更难，因为为一个移动了的组件更新相关引用时，查找/替换通常并不高效。
+
+</details>
+
+<div class="style-example example-bad">
+
+### 反例：
+
+```
+components/
+|- ClearSearchButton.vue
+|- ExcludeFromSearchInput.vue
+|- LaunchOnStartupCheckbox.vue
+|- RunSearchButton.vue
+|- SearchInput.vue
+|- TermsCheckbox.vue
+```
+
+</div>
+<div class="style-example example-good">
+
+### 好例子：
+
+```
+components/
+|- SearchButtonClear.vue
+|- SearchButtonRun.vue
+|- SearchInputQuery.vue
+|- SearchInputExcludeGlob.vue
+|- SettingsCheckboxTerms.vue
+|- SettingsCheckboxLaunchOnStartup.vue
+```
+
+</div>
+<!-- 结束 -->
+
+<!-- 开始 -->
+
+## 自闭合组件 <span class="priority-a">强烈推荐</span>
+
+**在[单文件组件](../guide/single-file-components.html)、字符串模板和 [JSX](../guide/render-function.html#JSX) 中没有内容的组件应该是自闭合的——但在 DOM 模板里永远不要这样做。**
+
+自闭合组件表示它们不仅没有内容，而且**刻意**没有内容。其不同之处就好像书上的一页白纸对比贴有“本页有意留白”标签的白纸。而且没有了额外的闭合标签，你的代码也更简洁。
+
+<div class="style-example example-bad">
+
+### 反例：
+
+```html
+<!-- 在.vue单文件组件中 -->
+<my-component></my-component>
+```
+
+</div>
+<div class="style-example example-good">
+
+### 好例子：
+
+```html
+<!-- 在.vue单文件组件中 -->
+<my-component />
+```
+
+</div>
+<!-- 结束 -->
+
+<!-- 开始 -->
+
+## 模板中的组件名大小写 <span class="priority-a">必要</span>
+
+**模板里的组件标签统一使用 kebab-case，与 A 级规则保持一致，避免大小写混用导致跨端渲染差异。**
+
+<div class="style-example example-bad">
+
+### 反例：
+
+```html
+<!-- 在 .vue 单文件组件中 -->
+<MyComponent />
+<UserProfileCard />
+```
+
+</div>
+<div class="style-example example-good">
+
+### 好例子：
+
+```html
+<!-- 在 .vue 单文件组件中 -->
+<my-component />
+<user-profile-card />
+```
+
+</div>
+<!-- 结束 -->
+
+<!-- 开始 -->
+
+## JS 中的组件名大小写 <span class="priority-a">必要</span>
+
+**脚本中的组件名始终使用 PascalCase，导出 `name` 也保持 PascalCase，多单词命名与模板的 kebab-case 一一对应。**
+
+<div class="style-example example-bad">
+
+### 反例：
+
+```js
+Vue.component('myComponent', {
+    // ...
+});
+```
+
+```js
+import myComponent from './my-component.vue';
+```
+
+```js
+export default {
+    name: 'myComponent',
+    // ...
+};
+```
+
+```js
+export default {
+    name: 'my-component',
+    // ...
+};
+```
+
+</div>
+<div class="style-example example-good">
+
+### 好例子：
+
+```js
+Vue.component('MyComponent', {
+    // ...
+});
+```
+
+```js
+import MyComponent from './my-component.vue';
+```
+
+```js
+export default {
+    name: 'MyComponent',
+    // ...
+};
+```
+
+</div>
+<!-- 结束 -->
+
+<!-- 开始 -->
+
+## 完整单词的组件名 <span class="priority-a">强烈推荐</span>
+
+**组件名应该倾向于完整单词而不是缩写。**
+
+编辑器中的自动补全已经让书写长命名的代价非常之低了，而其带来的明确性却是非常宝贵的。不常用的缩写尤其应该避免。
+
+<div class="style-example example-bad">
+
+### 反例：
+
+```
+components/
+|- SdSettings.vue
+|- UProfOpts.vue
+```
+
+</div>
+<div class="style-example example-good">
+
+### 好例子：
+
+```
+components/
+|- StudentDashboardSettings.vue
+|- UserProfileOptions.vue
+```
+
+</div>
+<!-- 结束 -->
+
+<!-- 开始 -->
+
+## Prop 名大小写 <span class="priority-a">必要</span>
+
+**在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板中应该始终使用 kebab-case。**
+
+我们单纯的遵循每个语言的约定。在 JavaScript 中更自然的是 camelCase。而在 HTML 中则是 kebab-case。
+
+<div class="style-example example-bad">
+
+### 反例：
+
+```js
+props: {
+  'greeting-text': String
+}
+```
+
+```html
+<welcome-message greetingText="hi" />
+```
+
+</div>
+<div class="style-example example-good">
+
+### 好例子：
+
+```js
+props: {
+    greetingText: String;
+}
+```
+
+```html
+<welcome-message greeting-text="hi" />
+```
+
+</div>
+<!-- 结束 -->
+
+<!-- 开始 -->
+
+## 多个 attribute 的元素 <span class="priority-a">强烈推荐</span>
+
+**多个 attribute 的元素应该分多行撰写，每个 attribute 一行。**
+
+在 JavaScript 中，用多行分隔对象的多个 property 是很常见的最佳实践，因为这样更易读。
+
+<div class="style-example example-bad">
+
+### 反例：
+
+```html
+<img src="https://vuejs.org/images/logo.png" alt="Vue Logo">
+```
+
+```html
+<my-component foo="a" bar="b" baz="c"/>
+```
+
+</div>
+<div class="style-example example-good">
+
+### 好例子：
+
+```html
+<img
+    src="https://vuejs.org/images/logo.png"
+    alt="Vue Logo"
+>
+```
+
+```html
+<my-component
+    foo="a"
+    bar="b"
+    baz="c"
+/>
+```
+
+</div>
+<!-- 结束 -->
+
+<!-- 开始 -->
+
+## 简单的计算属性 <span class="priority-a">强烈推荐</span>
+
+**应该把复杂计算属性分割为尽可能多的更简单的 property。**
+
+<details>
+<summary>
+  <h4>详解</h4>
+</summary>
+
+更简单、命名得当的计算属性是这样的：
+
+- **易于测试**
+
+  当每个计算属性都包含一个非常简单且很少依赖的表达式时，撰写测试以确保其正确工作就会更加容易。
+
+- **易于阅读**
+
+  简化计算属性要求你为每一个值都起一个描述性的名称，即便它不可复用。这使得其他开发者 (以及未来的你) 更容易专注在他们关心的代码上并搞清楚发生了什么。
+
+- **更好的“拥抱变化”**
+
+  任何能够命名的值都可能用在视图上。举个例子，我们可能打算展示一个信息，告诉用户他们存了多少钱；也可能打算计算税费，但是可能会分开展现，而不是作为总价的一部分。
+
+  小的、专注的计算属性减少了信息使用时的假设性限制，所以需求变更时也用不着那么多重构了。
+
+</details>
+
+<div class="style-example example-bad">
+
+### 反例：
+
+``` js
+computed: {
+    price: function () {
+        var basePrice = this.manufactureCost / (1 - this.profitMargin)
+        return (
+            basePrice -
+            basePrice * (this.discountPercent || 0)
+        )
+    }
+}
+```
+
+</div>
+<div class="style-example example-good">
+
+### 好例子：
+
+``` js
+computed: {
+    basePrice: function () {
+        return this.manufactureCost / (1 - this.profitMargin)
+    },
+    discount: function () {
+        return this.basePrice * (this.discountPercent || 0)
+    },
+    finalPrice: function () {
+        return this.basePrice - this.discount
+    }
+}
+```
+
+</div>
+<!-- 结束 -->
+
+<!-- 开始 -->
+
+##  带引号的 attribute 值 <span class="priority-a">强烈推荐</span>
+
+**非空 HTML attribute 值应该始终带引号 (单引号或双引号，以 JS 中未使用的为准)。**
+
+在 HTML 中不带空格的 attribute 值是可以没有引号的，但这鼓励了大家在特征值里*不写*空格，导致可读性变差。
+
+<div class="style-example example-bad">
+
+### 反例：
+
+``` html
+<input type=text>
+```
+
+``` html
+<app-sidebar :style={width:sidebarWidth+'px'}>
+```
+
+</div>
+<div class="style-example example-good">
+
+### 好例子：
+
+``` html
+<input type="text">
+```
+
+``` html
+<app-sidebar :style="{ width: sidebarWidth + 'px' }">
+```
+
+</div>
+<!-- 结束 -->
+
+<!-- 开始 -->
+
+##  指令缩写 <span class="priority-a">强烈推荐</span>
+
+**指令缩写 (用 `:` 表示 `v-bind:`、用 `@` 表示 `v-on:` 和用 `#` 表示 `v-slot:`) 应该要么都用要么都不用。**
+
+<div class="style-example example-bad">
+
+### 反例：
+
+``` html
+<input
+  v-bind:value="newTodoText"
+  :placeholder="newTodoInstructions"
+>
+```
+
+``` html
+<input
+  v-on:input="onInput"
+  @focus="onFocus"
+>
+```
+
+``` html
+<template v-slot:header>
+    <h1>Here might be a page title</h1>
+</template>
+
+<template #footer>
+    <p>Here's some contact info</p>
+</template>
+```
+</div>
+<div class="style-example example-good">
+
+### 好例子：
+
+``` html
+<input
+    :value="newTodoText"
+    :placeholder="newTodoInstructions"
+>
+```
+
+``` html
+<input
+    v-bind:value="newTodoText"
+    v-bind:placeholder="newTodoInstructions"
+>
+```
+
+``` html
+<input
+    @input="onInput"
+    @focus="onFocus"
+>
+```
+
+``` html
+<input
+    v-on:input="onInput"
+    v-on:focus="onFocus"
+>
+```
+
+``` html
+<template v-slot:header>
+    <h1>Here might be a page title</h1>
+</template>
+
+<template v-slot:footer>
+    <p>Here's some contact info</p>
+</template>
+```
+
+``` html
+<template #header>
+    <h1>Here might be a page title</h1>
+</template>
+
+<template #footer>
+    <p>Here's some contact info</p>
+</template>
+```
+
+</div>
+<!-- 结束 -->
+
+</div>
+
+</div>
+<style>
+.priority-a {
+    color: #f44336;
+    font-size: 12px
+}
+.style-guide summary {
+    display: list-item;
+    cursor: pointer;
+    padding: 1.6em;
+    margin: -1.6em;
+    outline: none;
+}
+.style-guide details, .style-guide .style-enforcement {
+    background-color: #eee;
+}
+.style-guide details h4 {
+    display: inline-block;
+}
+.style-example, .style-guide details, .style-guide .style-enforcement {
+    border-radius: 2px;
+    margin: 1.6em 0;
+    padding: 12px;
+}
+.style-example.example-bad {
+        background: #f7e8e8;
+}
+.style-guide .style-example.example-good {
+    background: #eaedec;
+}
+</style>