Использование JSX с Vue.js

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

Люблю его или ненавидим, JSX – это популярное расширение для JavaScript, которое позволяет XML-токенам в ваших сценариях.

Если вы хотите создать шаблоны в файлах сценария, и вы найдете Vue Render () Функция быть трудной для работы, JSX может быть только то, что вам нужно.

Чтобы продемонстрировать, вот функция рендеринга без JSX:

render (h) {
  return h(
    'div',
    { attrs: { id: 'my-id' },
    [ this.msg ]
  );
}

А с jsx:

render (h) {
  return (
    
,
      { this.msg } 
    
  );
}

Если ничего другого, гораздо проще читать!

Конечно, JSX не может быть интерпретирован браузером. Он должен быть впервые транспортирован на стандартный JavaScript, аналогичный, как SASS сначала необходимо транспортировать на CSS. Больше на это позже.

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

Зачем использовать JSX с Vue?

Есть много способов указать шаблон в Vue:

1. Использование файла HTML
2. Используя Шаблон Недвижимость в вашем экземпляре/компонент конструктор
3. Использование <Шаблон> Теги в одном файловых компонентах
4. Используя функцию рендера.

Если вы идете с вариантом 4, вы должны создать свои узлы очень незнакомым образом, то есть, используя творчество Синтаксис JavaScript.

JSX позволяет использовать функцию рендеринга и еще иметь внешний вид HTML. Некоторые люди находят это намного проще. Другие находят это грязным, чтобы смешивать HTML в своих js.

Посмотрите на этот пример, и вы можете решить, хотите ли вам это или нет.

Jsx Пример

Теперь мы собираемся создать мертвое простое приложение, которое отображает диапазон с помощью текстового контента «Показать сообщение». Когда вы нажимаете на промежуток, он будет вызвать предупреждение.

Во-первых, давайте будем использовать Vue в обычном способе с отдельными файлами JS и HTML:

Script.js.

new Vue({
  el: '#app',
  data: {
    msg: 'Show the message'
  },
  methods: {
    hello () {
      alert('Here is the message')
    }
  }
});

index.html.

  
    {{ msg }}
  

Включение функции рендеринга

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

Script.js.

new Vue({
  el: '#app',
  data: {
    msg: 'Show the message'
  },
  methods: {
    hello () {
      alert('Here is the message')
    }
  },
  render (createElement) {
    return createElement(
      'span',
      {
        class: { 'my-class': true },
        on: {
          click: this.hello
        }
      },
      [ this.msg ]
    );
  },
});

index.html.

Включение JSX.

Функция рендеринга немного трудно прочитать, верно? И это просто для одного пролета, представьте, используя его для более сложного компонента!

Давайте будем использовать JSX сейчас:

Script.js.

new Vue({
  el: '#app',
  data: {
    msg: 'Show the message.'
  },
  methods: {
    hello () {
      alert('This is the message.')
    }
  },
  render(h) {
    return (
      
        { this.msg }
      
    )
  }
});

(index.html такой же, как указано выше)

Транспиловая JSX.

JSX только для разработки и будет транспортирован задолго до времени выполнения. Поэтому нам нужно только рассмотреть JSX с точки зрения того, как это приносит пользу нашему потоку развития (или нет).

Пересматривать ваш JSX, вы можете использовать Babel-Plugin-Transform-Vue-JSX Модуль, который является плагином для Babel и WebPack. Просто добавьте его на свой конфигурацию WebPack:

{
  test: /\.js$/,
  exclude: [/node_modules/],
  use: [{
    loader: 'babel-loader',
    options: { presets: ['es2015'], plugins: ['transform-vue-jsx'] }
  }]
}

Теперь, когда вы делаете сборку WebPack, ваш JSX будет транспортирован в стандартные JS.

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

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

Учить больше