Нравится это или нет, JSX — это популярное расширение JavaScript, которое позволяет использовать XML-токены в ваших скриптах.
Если вы хотите создавать шаблоны в своих файлах сценариев и вам render()трудно работать с функцией Vue , JSX может быть именно тем, что вам нужно.
Чтобы продемонстрировать, вот функция рендеринга без JSX:
JavaScript
1
render (h) {
2
return h(
3
'div',
4
{ attrs: { id: 'my-id' },
5
[ this.msg ]
6
);
7
}
И с JSX:
JavaScript
xxxxxxxxxx
1
render (h) {
2
return (
3
<div id='my-id'>,
4
{ this.msg }
5
</div>
6
);
7
}
Если ничего другого, это намного легче читать!
Конечно, JSX не может быть интерпретирован браузером. Сначала он должен быть перенесен в стандартный JavaScript, подобно тому, как SASS сначала должен быть перенесен в CSS. Подробнее об этом позже.
Вам также может понравиться:
React.js против Vue.js: Сравнение популярных фреймворков .
Зачем использовать JSX с Vue?
Есть много способов указать шаблон в Vue:
- Использование файла HTML.
- Использование
templateсвойства в вашем конструкторе экземпляра / компонента. - Использование
<template>тегов в отдельных файловых компонентах. - Использование функции рендеринга.
Если вы выберете вариант 4, вам придется создавать свои узлы очень незнакомым способом, то есть с использованием createElementсинтаксиса JavaScript.
JSX позволяет вам использовать функцию рендеринга и при этом иметь внешний вид HTML. Некоторые люди находят это намного проще. Другие считают грязным смешивать HTML со своими JS.
Посмотрите на этот пример, и вы можете решить, нравится вам это или нет.
Пример JSX
Сейчас мы собираемся создать очень простое приложение, которое отображает диапазон с текстовым содержимым «Показать сообщение». Когда вы щелкнете по промежутку, появится предупреждение
Во-первых, давайте использовать Vue обычным способом с отдельными файлами JS и HTML:
script.js
JavaScript
xxxxxxxxxx
1
new Vue({
2
el: '#app',
3
data: {
4
msg: 'Show the message'
5
},
6
methods: {
7
hello () {
8
alert('Here is the message')
9
}
10
}
11
});
index.html
HTML
xxxxxxxxxx
1
<div id="app">
2
<span class="my-class" v-on:click="hello">
3
{{ msg }}
4
</span>
5
</div>
Включение функции рендеринга
Следующий код делает то же самое, что и код выше, с той лишь разницей, что вместо использования шаблона мы будем использовать функцию рендера для создания нашего шаблона:
script.js
JavaScript
xxxxxxxxxx
1
new Vue({
2
el: '#app',
3
data: {
4
msg: 'Show the message'
5
},
6
methods: {
7
hello () {
8
alert('Here is the message')
9
}
10
},
11
render (createElement) {
12
return createElement(
13
'span',
14
{
15
class: { 'my-class': true },
16
on: {
17
click: this.hello
18
}
19
},
20
[ this.msg ]
21
);
22
},
23
});
index.html
HTML
xxxxxxxxxx
1
<div id="app">
2
<!--span will render here-->
3
</div>
Включая JSX
Функция рендера немного сложна для чтения, верно? И это только для одного периода, представьте, что вы используете его для более сложного компонента!
Давайте использовать JSX сейчас:
script.js
JavaScript
xxxxxxxxxx
1
new Vue({
2
el: '#app',
3
data: {
4
msg: 'Show the message.'
5
},
6
methods: {
7
hello () {
8
alert('This is the message.')
9
}
10
},
11
render(h) {
12
return (
13
<span class={{ 'my-class': true }} on-click={ this.hello } >
14
{ this.msg }
15
</span>
16
)
17
}
18
});
(index.html такой же как выше)
Прозрачный JSX
JSX только для разработки и будет перенесен задолго до выполнения. Таким образом, нам нужно только рассмотреть JSX с точки зрения того, насколько он полезен для нашего процесса разработки (или нет).
Для переноса вашего JSX вы можете использовать babel-plugin-transform-vue-jsxмодуль, который является плагином для Babel и Webpack. Просто добавьте его в конфигурацию вашего Webpack:
JavaScript
xxxxxxxxxx
1
{
2
test: /\.js$/,
3
exclude: [/node_modules/],
4
use: [{
5
loader: 'babel-loader',
6
options: { presets: ['es2015'], plugins: ['transform-vue-jsx'] }
7
}]
8
}
Теперь, когда вы делаете сборку из веб-пакета , ваш JSX будет преобразован в стандартный JS.