数据API 产品矩阵 案例 关于
掌握聚合最新动态了解行业最新趋势
API接口,开发服务,免费咨询服务

Vue.js 中,7种定义组件模板的方法

本文由Mcbai在众成翻译平台上翻译。

有多种方式可以在vue中定义模板组件。我算了一下,至少有7种不同的方法:

  • 字符串(String)

  • 模板字符串(Template literal)

  • X-Templates

  • 内联(Inline)

  • Render函数(Render functions)

  • JSX

  • 单文件组件(Single page components)

当然,可能还有更多方法!

在这篇文章里,我们将会展示每一个方法的示例,分析其优缺点,以便你能明白在特定的情形下,哪种方式是合适的。

1. 字符串

默认情况下,在JS文件里模板会被定义为一个字符串。但是我觉得大家都会同意这种写法很难看懂,它除了有广泛的浏览器支持之外,并没有什么优势。

Vue.component('my-checkbox', {

  template: '<div class="checkbox-wrapper" @click="check"><div :class="{ checkbox: true, checked: checked }"></div><div class="title">{{ title }}</div></div>',

  data() {

    return { checked: false, title: 'Check me' }

  },

  methods: {

    check() { this.checked = !this.checked; }

  }

});

2. 模板字符串(Template literals)

通过ES6的模板字符串(反引号)语法,你在定义模板时可以直接换行,这是通过常规的JavaScript字符串没法做到的。这种写法更容易阅读,并且这种模板字符串语法得到了许多新版本浏览器的支持。当然,为了安全起见,你仍然应该把它转译为ES5的语法形式。

然而,这种方式并不完美,我发现大多数的IDE在语法高亮上做的差强人意,并且在缩进和换行等的格式方面,仍然很痛苦。

Vue.component('my-checkbox', {

  template: `<div class="checkbox-wrapper" @click="check">

              <div :class="{ checkbox: true, checked: checked }"></div>

              <div class="title">{{ title }}</div>

            </div>`,

  data() {

    return { checked: false, title: 'Check me' }

  },

  methods: {

    check() { this.checked = !this.checked; }

  }

});

3. X-Templates

使用这种方法,你需要在index.html文件里的script标签中定义你的模板。script标签需要添加text/x-template类型作为标记,并且在定义组件时,通过id来引用。

我喜欢这种方式,它允许你使用真正的HTML标记来书写你的HTML文件,但是不足之处在于,这种方式会把模板和组件其它部分的定义分开。

Vue.component('my-checkbox', {

  template: '#checkbox-template',

  data() {

    return { checked: false, title: 'Check me' }

  },

  methods: {

    check() { this.checked = !this.checked; }

  }

});

<script type="text/x-template" id="checkbox-template">

  <div class="checkbox-wrapper" @click="check">

    <div :class="{ checkbox: true, checked: checked }"></div>

    <div class="title">{{ title }}</div>

  </div>

</script>

4. 内联模板(Inline Templates)

通过给组件添加inline-template属性来告诉Vue,里面的内容就是模板,而不是把它当作是分发内容(见 slots)。

它的缺点和x-templates一样,但是有一个优点就是,它的内容就在HTML模板对应的位置,所以页面一加载就会渲染,而不用等到JavaScript执行。

Vue.component('my-checkbox', {

  data() {

    return { checked: false, title: 'Check me' }

  },

  methods: {

    check() { this.checked = !this.checked; }

  }

});

<my-checkbox inline-template>

  <div class="checkbox-wrapper" @click="check">

    <div :class="{ checkbox: true, checked: checked }"></div>

    <div class="title">{{ title }}</div>

  </div>

</my-checkbox>

5. Render functions(渲染函数)

渲染函数需要你把模板当作一个JavaScript对象来进行定义,它们是一些复杂并且抽象的模板选项。

然而,它的优点是你定义的模板更接近编译器,你可以使用所有JavaScript方法,而不仅是指令提供的那些功能。

Vue.component('my-checkbox', {

  data() {

    return { checked: false, title: 'Check me' }

  },

  methods: {

    check() { this.checked = !this.checked; }

  },

  render(createElement) {

    return createElement(

      'div',

        {

          attrs: {

            'class': 'checkbox-wrapper'

          },

          on: {

            click: this.check

          }

        },

        [

          createElement(

            'div',

            {

              'class': {

                checkbox: true,

声明:所有来源为“聚合数据”的内容信息,未经本网许可,不得转载!如对内容有异议或投诉,请与我们联系。邮箱:marketing@think-land.com

掌握聚合最新动态了解行业最新趋势
API接口,开发服务,免费咨询服务
Vue.js 中,7种定义组件模板的方法
发布:2017-07-24 10:53:23

本文由Mcbai在众成翻译平台上翻译。

有多种方式可以在vue中定义模板组件。我算了一下,至少有7种不同的方法:

  • 字符串(String)

  • 模板字符串(Template literal)

  • X-Templates

  • 内联(Inline)

  • Render函数(Render functions)

  • JSX

  • 单文件组件(Single page components)

当然,可能还有更多方法!

在这篇文章里,我们将会展示每一个方法的示例,分析其优缺点,以便你能明白在特定的情形下,哪种方式是合适的。

1. 字符串

默认情况下,在JS文件里模板会被定义为一个字符串。但是我觉得大家都会同意这种写法很难看懂,它除了有广泛的浏览器支持之外,并没有什么优势。

Vue.component('my-checkbox', {

  template: '<div class="checkbox-wrapper" @click="check"><div :class="{ checkbox: true, checked: checked }"></div><div class="title">{{ title }}</div></div>',

  data() {

    return { checked: false, title: 'Check me' }

  },

  methods: {

    check() { this.checked = !this.checked; }

  }

});

2. 模板字符串(Template literals)

通过ES6的模板字符串(反引号)语法,你在定义模板时可以直接换行,这是通过常规的JavaScript字符串没法做到的。这种写法更容易阅读,并且这种模板字符串语法得到了许多新版本浏览器的支持。当然,为了安全起见,你仍然应该把它转译为ES5的语法形式。

然而,这种方式并不完美,我发现大多数的IDE在语法高亮上做的差强人意,并且在缩进和换行等的格式方面,仍然很痛苦。

Vue.component('my-checkbox', {

  template: `<div class="checkbox-wrapper" @click="check">

              <div :class="{ checkbox: true, checked: checked }"></div>

              <div class="title">{{ title }}</div>

            </div>`,

  data() {

    return { checked: false, title: 'Check me' }

  },

  methods: {

    check() { this.checked = !this.checked; }

  }

});

3. X-Templates

使用这种方法,你需要在index.html文件里的script标签中定义你的模板。script标签需要添加text/x-template类型作为标记,并且在定义组件时,通过id来引用。

我喜欢这种方式,它允许你使用真正的HTML标记来书写你的HTML文件,但是不足之处在于,这种方式会把模板和组件其它部分的定义分开。

Vue.component('my-checkbox', {

  template: '#checkbox-template',

  data() {

    return { checked: false, title: 'Check me' }

  },

  methods: {

    check() { this.checked = !this.checked; }

  }

});

<script type="text/x-template" id="checkbox-template">

  <div class="checkbox-wrapper" @click="check">

    <div :class="{ checkbox: true, checked: checked }"></div>

    <div class="title">{{ title }}</div>

  </div>

</script>

4. 内联模板(Inline Templates)

通过给组件添加inline-template属性来告诉Vue,里面的内容就是模板,而不是把它当作是分发内容(见 slots)。

它的缺点和x-templates一样,但是有一个优点就是,它的内容就在HTML模板对应的位置,所以页面一加载就会渲染,而不用等到JavaScript执行。

Vue.component('my-checkbox', {

  data() {

    return { checked: false, title: 'Check me' }

  },

  methods: {

    check() { this.checked = !this.checked; }

  }

});

<my-checkbox inline-template>

  <div class="checkbox-wrapper" @click="check">

    <div :class="{ checkbox: true, checked: checked }"></div>

    <div class="title">{{ title }}</div>

  </div>

</my-checkbox>

5. Render functions(渲染函数)

渲染函数需要你把模板当作一个JavaScript对象来进行定义,它们是一些复杂并且抽象的模板选项。

然而,它的优点是你定义的模板更接近编译器,你可以使用所有JavaScript方法,而不仅是指令提供的那些功能。

Vue.component('my-checkbox', {

  data() {

    return { checked: false, title: 'Check me' }

  },

  methods: {

    check() { this.checked = !this.checked; }

  },

  render(createElement) {

    return createElement(

      'div',

        {

          attrs: {

            'class': 'checkbox-wrapper'

          },

          on: {

            click: this.check

          }

        },

        [

          createElement(

            'div',

            {

              'class': {

                checkbox: true,

声明:所有来源为“聚合数据”的内容信息,未经本网许可,不得转载!如对内容有异议或投诉,请与我们联系。邮箱:marketing@think-land.com

选择想要的接口, 看看能免费获取多少次调用 选择(单选)或填写想要的接口
  • 短信API服务
  • 银行卡四元素检测[简]
  • 身份证实名认证
  • 手机状态查询
  • 三网手机实名制认证[简]
  • 身份证OCR识别
  • 证件识别
  • 企业工商信息
短信API服务
  • 短信API服务
  • 银行卡四元素检测[简]
  • 身份证实名认证
  • 手机状态查询
  • 三网手机实名制认证[简]
  • 身份证OCR识别
  • 证件识别
  • 企业工商信息
  • 确定
选择您的身份
请选择寻找接口的目的
预计每月调用量
请选择预计每月调用量
产品研发的阶段
请选择产品研发的阶段
电话 0512-88869195
×
企业用户认证,
可获得1000次免费调用
注册登录 > 企业账户认证 > 领取接口包
企业用户认证领取接口包 立即领取
× 企业用户认证,
可获得1000次免费调用,立即领取>
数 据 驱 动 未 来
Data Drives The Future