7 способов определить шаблон компонента в Vue.js

Автор оригинала: Anthony Gore.

Есть много выбора, когда дело доходит до определения шаблонов компонентов в Vue. По моим графам есть как минимум семь разных способов:

Нить
Шаблон литерал
X-шаблоны
В соответствии
Рендер функции
Jsx.
Одноэтажные компоненты

И, может быть, больше!

В этой статье мы пройдемся через примеры каждого и решаем плюсы и минусы, чтобы вы знали, какой из них лучше всего использовать в любой конкретной ситуации.

Примечание: эта статья была первоначально опубликована здесь на блоге разработчиков Vue.js на 2017/03/27.

1. Строки

По умолчанию шаблон будет определен как строка в вашем файле JS. Я думаю, что мы все можем согласиться с тем, что шаблоны в строке довольно непостижимы. Этот метод не имеет большого места для него, кроме широкой поддержки браузера.

Vue.component('my-checkbox', {
  template: `
{{ title }}`,
  data() {
    return { checked: false, title: 'Check me' }
  },
  methods: {
    check() { this.checked = !this.checked; }
  }
});

2. Шаблонные литералы

Шаблонные литералы ES6 («Backticks») позволяют определить свой шаблон на нескольких строках, что вы не можете сделать в регулярной строке JavaScript. Они гораздо проще читают и поддерживаются сейчас во многих новых браузерах, хотя вы, вероятно, до сих пор по-прежнему транпили до ES5, чтобы быть в безопасности.

Этот метод не идеален, хотя; Я обнаруживаю, что большинство IDE по-прежнему дают вам горе с выделением синтаксиса, а также форматировав вкладки, нью-дюймы и т. Д. Еще могут быть болью.

Vue.component('my-checkbox', {
  template: `
              
              {{ title }}
            `,
  data() {
    return { checked: false, title: 'Check me' }
  },
  methods: {
    check() { this.checked = !this.checked; }
  }
});

3. X-шаблоны

С помощью этого метода ваш шаблон определяется внутри тега скрипта в index.html файл. Тег сценария отмечен Текст/X-шаблон и ссылается идентификатор в определении вашего компонента.

Мне нравится, что этот метод позволяет вам написать свой HTML в правильной HTML-разметке, но понижение – это то, что он разделяет шаблон от остальной части определения компонента.

Vue.component('my-checkbox', {
  template: '#checkbox-template',
  data() {
    return { checked: false, title: 'Check me' }
  },
  methods: {
    check() { this.checked = !this.checked; }
  }
});

4. Встроенные шаблоны

Добавляя Встроенный шаблон Атрибут компонент, вы указываете, что Vue, что внутренний контент – это его шаблон, а не обрабатывать его как распределенный контент (см. Слоты ).

Это страдает одинаковым недостатком, что и X-шаблоны, но одно преимущество заключается в том, что содержание находится в правильном месте в шаблоне HTML, и поэтому может быть отображена на странице нагрузки, а не ждет, пока JavaScript не будет выполнен.

Vue.component('my-checkbox', {
  data() {
    return { checked: false, title: 'Check me' }
  },
  methods: {
    check() { this.checked = !this.checked; }
  }
});


  
    
    {{ title }}

5. Визуализация функций

Функции Render требуют, чтобы вы определили свой шаблон как объект 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,
          			checked: this.checked
        			}
        		}
        	),
        	createElement(
        		'div',
        		{
          		attrs: {
            		'class': 'title'
          		}
        		},
        		[ this.title ]
        	)
      	]
    );
  }
});

6. JSX.

Самый противоречивый вариант шаблона в Vue – JSX. Некоторые разработчики видят JSX как уродливый, неразрушанный и как предательство в VUE этос.

JSX требует, чтобы вы сначала транпилируете, так как он не читается браузерами. Но, если вам нужно использовать функции рендеринга, JSX, безусловно, менее абстрактный способ определить шаблон.

Vue.component('my-checkbox', {
  data() {
    return { checked: false, title: 'Check me' }
  },
  methods: {
    check() { this.checked = !this.checked; }
  },
  render() {
    return 
             
             { this.title }
           
  }
});

7. Один файловые компоненты

До тех пор, пока вам удобно использовать инструмент сборки в вашей настройке, одновременные компоненты файлов – король шаблонов. Они приносят лучшее из обоих миров: позволяя вам написать разметку при сохранении всей вашей компонентной определительности в одном файле.

Они требуют транспортировки, а некоторые идентификаторы не поддерживают синтаксис подсветки для этого типа файла, но в противном случае трудно победить.

Вы можете поспорить, что есть еще больше возможностей определения шаблона, поскольку вы можете использовать предварительные процессоры шаблона, как PUG с SFCS!

Который лучший?

Конечно, нет никого идеального способа, и каждый должен быть оценен на Используйте корпус у тебя есть. Я думаю, что лучшие разработчики будут осведомлены обо всех возможностях и иметь каждый в качестве инструмента в своей панели инструментов Vue.js!

Стать старшим Vue Developer в 2020 году.

Учитесь и осваивайте, какие профессионалы знают о строительстве, тестировании и развертывании, полностью стековых Vue Apps в нашем последнем курсе.

Учить больше