examples/syntax.js

module.exports = {
  type: 'syntax',
  name: { zh: '语法', en: 'Syntax' },
  group: [{
    type: 'text-binding',
    name: { zh: '文本绑定', en: 'Text Binding' },
    title: { zh: '文本绑定', en: 'Text Binding' },
    desc: {
      zh: '数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值。',
      en: 'The most basic form of data binding is text interpolation using the “Mustache” syntax (double curly braces).'
    },
    docLink: {
      zh: 'https://cn.vuejs.org/v2/guide/syntax.html#插值',
      en: 'https://vuejs.org/v2/guide/syntax.html#Interpolations'
    },
    examples: [{
      hash: {
        zh: '34e42c91e1f86591563ec8897e6a095c',
        en: '207411d00e8af32213443b4d0c5db689'
      },
      title: { zh: '文本插值', en: 'Inline TextNode' },
      screenshot: {
        zh: 'https://gw.alicdn.com/tfs/TB1V5IXcMMPMeJjy1XdXXasrXXa-540-844.png',
        en: 'https://gw.alicdn.com/tfs/TB19gKsb8fH8KJjy1XbXXbLdXXa-540-844.png'
      }
    }, {
      hash: '68b02a5371eb7da5cb9dde1946ce2b68',
      title: { zh: '使用表达式', en: 'Using Expression' },
      screenshot: 'https://gw.alicdn.com/tfs/TB1veLGbS_I8KJjy0FoXXaFnVXa-540-844.png'
    }]
  }, {
    type: 'v-bind',
    name: 'v-bind',
    title: { zh: '绑定属性值（v-bind）', en: 'v-bind' },
    desc: {
      zh: 'v-bind 可以动态地绑定一个或多个特性，或一个组件 prop 到表达式。可以简写成 `:` (半角冒号)。',
      en: 'Dynamically bind one or more attributes, or a component prop to an expression.'
    },
    docLink: {
      zh: 'https://cn.vuejs.org/v2/api/#v-bind',
      en: 'https://vuejs.org/v2/api/#v-bind'
    },
    examples: [{
      hash: 'b62f1a5f4973f43fae9adca02864eb8b',
      title: { zh: '绑定属性值', en: 'Binding Props' },
      screenshot: 'https://gw.alicdn.com/tfs/TB150aYcMoQMeJjy0FpXXcTxpXa-540-844.png'
    }, {
      hash: 'b142f24d2f0ab27f5f65448d2aa16970',
      title: { zh: '绑定表达式', en: 'Using Expression' },
      screenshot: 'https://gw.alicdn.com/tfs/TB1veLGbS_I8KJjy0FoXXaFnVXa-540-844.png'
    }, {
      hash: '3a2cc3c7a465f6a07c4bd3a868c7e393',
      title: { zh: '样式值绑定', en: 'Style Binding' },
      screenshot: 'https://gw.alicdn.com/tfs/TB1o.62bH_I8KJjy1XaXXbsxpXa-540-844.png'
    }, {
      hash: '2bc0de9ec2448a1f852f354349f66600',
      // hash: 'b4b1f5e4679efbe3c94864a1404bfeaf',
      title: { zh: '类名绑定', en: 'Class Binding' },
      screenshot: 'https://gw.alicdn.com/tfs/TB1o.62bH_I8KJjy1XaXXbsxpXa-540-844.png'
    }]
  }, {
    type: 'v-for',
    name: 'v-for',
    title: { zh: '循环指令（v-for）', en: 'v-for' },
    desc: {
      zh: 'v-for 基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 `alias in expression` 为当前遍历的元素提供别名。',
      en: 'We can use the v-for directive to render a `alias in expression` based on an array. The v-for directive requires a special syntax in the form of item in items.'
    },
    docLink: {
      zh: 'https://cn.vuejs.org/v2/guide/list.html',
      en: 'https://vuejs.org/v2/guide/list.html'
    },
    examples: [{
      hash: '38904c807f66b1a11de5ddf0d40b3d30',
      title: { zh: '最简例子', en: 'Sample' },
      screenshot: 'https://gw.alicdn.com/tfs/TB1R_7.bjihSKJjy0FlXXadEXXa-540-844.png'
    }, {
      hash: '2cd124954175721d9145571bf722ce7a',
      title: { zh: '下标索引', en: 'Array Index' },
      screenshot: 'https://gw.alicdn.com/tfs/TB1dAivaLBNTKJjy0FdXXcPpVXa-540-844.png'
    }, {
      hash: '2b4222b828fac65257d9ed9f8932f2a1',
      title: { zh: '遍历 JS 对象', en: 'v-for With an Object' },
      screenshot: 'https://gw.alicdn.com/tfs/TB10r25bH_I8KJjy1XaXXbsxpXa-540-844.png'
    }, {
      hash: '7364e9c3c25ab2cbc945903cea7b0878',
      title: { zh: '多层循环', en: 'Multiple v-for' },
      screenshot: 'https://gw.alicdn.com/tfs/TB1giSLfwoQMeJjy0FoXXcShVXa-540-844.png'
    }]
  }, {
    type: 'v-if',
    name: 'v-if',
    title: { zh: '条件指令（v-if)', en: 'v-if' },
    desc: {
      zh: 'v-if 根据表达式的值的真假条件渲染元素，在切换时元素及它的数据绑定/组件被销毁并重建。同类指令还有 v-else 和 v-else-if。',
      en: 'Conditionally render the element based on the truthy-ness of the expression value.'
    },
    docLink: {
      zh: 'https://cn.vuejs.org/v2/guide/conditional.html',
      en: 'https://vuejs.org/v2/guide/conditional.html'
    },
    examples: [{
      hash: '736a5dd112a1a114a559218ed20cae08',
      title: 'v-if',
      screenshot: 'https://gw.alicdn.com/tfs/TB1BAuGb2DH8KJjy1XcXXcpdXXa-540-844.png'
    }, {
      hash: 'b6b244c4d8623565e77d9de324ca8de1',
      title: 'v-else',
      screenshot: 'https://gw.alicdn.com/tfs/TB1P.TpdxrI8KJjy0FpXXb5hVXa-540-844.png'
    }, {
      hash: '22faff4ee6f235c0e8fb98b21c1ea662',
      title: 'v-else-if',
      screenshot: 'https://gw.alicdn.com/tfs/TB1P.TpdxrI8KJjy0FpXXb5hVXa-540-844.png'
    }]
  }, {
    type: 'v-on',
    name: 'v-on',
    title: { zh: '事件绑定（v-on）', en: 'v-on' },
    desc: {
      zh: '可以用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码，可以简写成 `@`。用在普通元素上时，只能监听 原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。',
      en: 'We can use the v-on directive to listen to DOM events and run some JavaScript when they’re triggered.'
    },
    docLink: {
      zh: 'https://cn.vuejs.org/v2/guide/events.html#监听事件',
      en: 'https://vuejs.org/v2/guide/events.html'
    },
    examples: [{
      hash: 'a3607094a4bf73a069a5c51efb47fe98',
      title: { zh: '最简例子', en: 'Sample' },
      screenshot: 'https://gw.alicdn.com/tfs/TB1dcTaewMPMeJjy1XdXXasrXXa-540-844.png'
    }, {
      hash: '8e3a1cbcf1ba9af94fe6f77e9668e354',
      title: { zh: '内联语句', en: 'Inline Statement' },
      screenshot: 'https://gw.alicdn.com/tfs/TB1dcTaewMPMeJjy1XdXXasrXXa-540-844.png'
    }, {
      hash: '3a019f2eca4a6966ee0c3b91e5b2fc5b',
      title: { zh: '传递参数', en: 'Inline Handler' },
      screenshot: 'https://gw.alicdn.com/tfs/TB1dcTaewMPMeJjy1XdXXasrXXa-540-844.png'
    }, {
      hash: '8581f4d2ff8fb48bdc547d2465c0cf24',
      title: { zh: 'once 修饰符', en: '.once Modifier' },
      screenshot: 'https://gw.alicdn.com/tfs/TB1dcTaewMPMeJjy1XdXXasrXXa-540-844.png'
    }]
  }, {
    type: 'v-model',
    name: 'v-model',
    title: { zh: '表单双向绑定（v-model）', en: 'v-model' },
    desc: {
      zh: '可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子。',
      en: 'You can use the v-model directive to create two-way data bindings on form input and textarea elements. It automatically picks the correct way to update the element based on the input type.'
    },
    docLink: {
      zh: 'https://cn.vuejs.org/v2/guide/forms.html',
      en: 'https://vuejs.org/v2/guide/forms.html'
    },
    examples: [{
      hash: 'e1e4413c5252dc763b01f26ce60d5ee4',
      title: { zh: '最简例子', en: 'Sample' },
      screenshot: 'https://gw.alicdn.com/tfs/TB1IQ9cdgMPMeJjy1XcXXXpppXa-540-844.png'
    }, {
      hash: '39684e82ad9a8e0b175f49e058cf7af6',
      title: { zh: '绑定 <textarea>', en: 'Using <textarea>' },
      screenshot: 'https://gw.alicdn.com/tfs/TB1y738XiqAXuNjy1XdXXaYcVXa-540-844.png'
    }, {
      hash: '4624d605004fc7eb9f14ca9c5a226fe3',
      title: { zh: '各种表单组件', en: '' },
      screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png'
    // }, {
    //   hash: '4624d605004fc7eb9f14ca9c5a226fe3',
    //   title: { zh: 'lazy 修饰符', en: '' },
    //   screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png'
    // }, {
    //   hash: '4624d605004fc7eb9f14ca9c5a226fe3',
    //   title: { zh: 'trim 修饰符', en: '' },
    //   screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png'
    // }, {
    //   hash: '4624d605004fc7eb9f14ca9c5a226fe3',
    //   title: { zh: 'number 修饰符', en: '' },
    //   screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png'
    }]
  }, {
    type: 'v-once',
    name: 'v-once',
    title: { zh: '一次性渲染（v-once）', en: 'v-once' },
    desc: {
      zh: '只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。',
      en: 'Render the element and component once only. On subsequent re-renders, the element/component and all its children will be treated as static content and skipped. This can be used to optimize update performance.'
    },
    docLink: {
      zh: 'https://cn.vuejs.org/v2/api/#v-once',
      en: 'https://vuejs.org/v2/api/#v-once'
    },
    examples: [{
      hash: 'db5a71d3f621f32261a4208943358092',
      title: { zh: '使用 v-once', en: 'Using v-once' },
      screenshot: 'https://gw.alicdn.com/tfs/TB1dcTaewMPMeJjy1XdXXasrXXa-540-844.png'
    }, {
      hash: 'f66f49ad00f58ab8bd1fa580d27900f8',
      title: {
        zh: '不使用 v-once',
        en: 'Without v-once'
      },
      screenshot: 'https://gw.alicdn.com/tfs/TB1cITaewMPMeJjy1XdXXasrXXa-540-844.png'
    }]
  }, {
    type: 'filters',
    name: 'Filters',
    title: { zh: '过滤器（Filters）', en: 'Filters' },
    desc: {
      zh: 'Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示。',
      en: 'Vue.js allows you to define filters that can be used to apply common text formatting.'
    },
    docLink: {
      zh: 'https://cn.vuejs.org/v2/guide/filters.html',
      en: 'https://vuejs.org/v2/guide/filters.html'
    },
    examples: [{
      hash: '28df0a4424a9e9fe1411020de20d52c0',
      title: { zh: '最简例子', en: 'Sample' },
      screenshot: 'https://gw.alicdn.com/tfs/TB1U8nAdr_I8KJjy1XaXXbsxpXa-540-844.png'
    }, {
      hash: 'b4eac5ccef8ef954858e9ef0c6aca9d7',
      title: { zh: '传递额外参数', en: 'Pass Arguments' },
      screenshot: 'https://gw.alicdn.com/tfs/TB1SV_adBfH8KJjy1XbXXbLdXXa-540-844.png'
    }, {
      hash: '7b4a2ee438abe343b0a2f38556e730f1',
      title: { zh: '过滤器串联', en: 'Chained Filters' },
      screenshot: 'https://gw.alicdn.com/tfs/TB1lETpdxrI8KJjy0FpXXb5hVXa-540-844.png'
    }]
  }, {
    type: 'mixins',
    name: 'Mixins',
    title: { zh: '混合（Mixins）', en: 'Mixins' },
    desc: {
      zh: '混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混合对象可以包含任意组件选项。以组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。',
      en: 'Mixins are a flexible way to distribute reusable functionalities for Vue components. A mixin object can contain any component options. When a component uses a mixin, all options in the mixin will be “mixed” into the component’s own options.'
    },
    docLink: {
      zh: 'https://cn.vuejs.org/v2/guide/mixins.html',
      en: 'https://vuejs.org/v2/guide/mixins.html'
    },
    examples: [{
      hash: 'c69cb31319ffe8e0b25543cfabcf06d6',
      title: { zh: '最简例子', en: 'Sample' },
      screenshot: 'https://gw.alicdn.com/tfs/TB1HJHcdtfJ8KJjy0FeXXXKEXXa-540-844.png'
    }, {
      hash: '804d427a56528c3dc2706e77b93df516',
      title: { zh: '全局混合', en: 'Global Mixin' },
      screenshot: 'https://gw.alicdn.com/tfs/TB1HJHcdtfJ8KJjy0FeXXXKEXXa-540-844.png'
    }, {
      hash: '92ab52525cb0d7d55d1ef007df90cf77',
      title: { zh: '生命周期混合', en: 'Lifecycle Mixin' },
      screenshot: 'https://gw.alicdn.com/tfs/TB1bRLCdwDD8KJjy0FdXXcjvXXa-540-844.png'
    }, {
      hash: 'ee84c44bb3f4b23f83d52aecad30f8ea',
      title: { zh: '选项合并', en: 'Mixin Options' },
      screenshot: 'https://gw.alicdn.com/tfs/TB1FUTpdxrI8KJjy0FpXXb5hVXa-540-844.png'
    }]
  }, {
    type: 'component',
    name: { zh: '组件', en: 'Component' },
    title: { zh: '组件', en: 'Component' },
    desc: {
      zh: '组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树。',
      en: 'The component system is another important concept in Vue, because it’s an abstraction that allows us to build large-scale applications composed of small, self-contained, and often reusable components. If we think about it, almost any type of application interface can be abstracted into a tree of components'
    },
    docLink: {
      zh: 'https://cn.vuejs.org/v2/guide/index.html#组件化应用构建',
      en: 'https://vuejs.org/v2/guide/#Composing-with-Components'
    },
    examples: [{
      hash: '59aeb1600ee976ea61faf354a9fee299',
      title: { zh: '使用子组件', en: 'Composing Components' },
      screenshot: 'https://gw.alicdn.com/tfs/TB12KPGbS_I8KJjy0FoXXaFnVXa-540-844.png'
    }, {
      hash: '3373a87306d0e0ccf463ac492aeb070c',
      title: { zh: '传递属性', en: 'Passing Data with Props' },
      screenshot: 'https://gw.alicdn.com/tfs/TB12KPGbS_I8KJjy0FoXXaFnVXa-540-844.png'
    }, {
      hash: 'b2ac35b0cc13c4c64c5adbfbeed5b3f7',
      title: { zh: '子组件的引用', en: 'Child Component Refs' },
      screenshot: 'https://gw.alicdn.com/tfs/TB12KPGbS_I8KJjy0FoXXaFnVXa-540-844.png'
    }, {
      hash: 'ccefdea9e9ef695acca7fb1b439277e2',
      title: { zh: '多层子组件', en: 'Deep Composed Components' },
      screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png'
    }, {
      hash: 'ccefdea9e9ef695acca7fb1b439277e2',
      title: { zh: '生命周期', en: 'Lifecycles' },
      screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png'
    }, {
      hash: 'ccefdea9e9ef695acca7fb1b439277e2',
      title: { zh: '注册全局组件', en: 'Global Registration' },
      screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png'
    }, {
      hash: '4c2eadc3fe105d643cd0ade59b3bde54',
      title: { zh: '递归组件', en: 'Recursive Components' },
      screenshot: 'https://gw.alicdn.com/tfs/TB1U868icrI8KJjy0FhXXbfnpXa-540-844.png'
    }, {
      hash: 'ccefdea9e9ef695acca7fb1b439277e2',
      title: { zh: '异步组件', en: '' },
      screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png'
    }, {
      hash: 'ccefdea9e9ef695acca7fb1b439277e2',
      title: { zh: '内联模板', en: '' },
      screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png'
    }]
  }, {
    type: 'built-in',
    name: { zh: '内置组件', en: 'Built-in' },
    title: { zh: '内置组件', en: 'Built-in Components' },
    examples: [{
      hash: 'ccefdea9e9ef695acca7fb1b439277e2',
      title: { zh: '动态组件 <component>', en: 'Dynamic Components' },
      screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png'
    }, {
      hash: 'ccefdea9e9ef695acca7fb1b439277e2',
      title: { zh: '用 <slot> 分发内容', en: 'Content Distribution with Slots' },
      screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png'
    }, {
      hash: '4624d605004fc7eb9f14ca9c5a226fe3',
      title: { zh: '单个 solt', en: 'Single Slot' },
      screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png'
    }, {
      hash: 'ccefdea9e9ef695acca7fb1b439277e2',
      title: { zh: '具名 slot', en: 'Named Slot' },
      screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png'
    }, {
      hash: 'ccefdea9e9ef695acca7fb1b439277e2',
      title: { zh: '<transition>', en: '<transition>' },
      screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png'
    }, {
      hash: 'ccefdea9e9ef695acca7fb1b439277e2',
      title: { zh: '<transition-group>', en: '<transition-group>' },
      screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png'
    // }, {
    //   hash: 'ccefdea9e9ef695acca7fb1b439277e2',
    //   title: { zh: '<keep-alive>', en: ' <keep-alive>' },
    //   screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png'
    }]
  }, {
    type: 'communication',
    name: { zh: '组件通信', en: 'Communication' },
    title: { zh: '组件通信', en: 'Component Communication' },
    examples: [{
      hash: 'ccefdea9e9ef695acca7fb1b439277e2',
      title: { zh: '自定义事件', en: 'Custom Events' },
      screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png'
    }, {
      hash: 'ccefdea9e9ef695acca7fb1b439277e2',
      title: { zh: '父子组件通信', en: 'Parent-Child Communication' },
      screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png'
    }, {
      hash: 'ccefdea9e9ef695acca7fb1b439277e2',
      title: { zh: '表单组件传值', en: 'Form Components' },
      screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png'
    }, {
      hash: 'ccefdea9e9ef695acca7fb1b439277e2',
      title: { zh: '非父子组件通信', en: 'Non Parent-Child Communication' },
      screenshot: 'https://gw.alicdn.com/tfs/TB1sF_CcMMPMeJjy1XcXXXpppXa-540-844.png'
    }]
  }]
}