1. JSX?
JSX là một phần mở rộng phổ biến cho JavaScript cho phép mã thông báo XML trong các tập lệnh của bạn.
VD:
1 2 | <span class="token keyword">const</span> element <span class="token operator">=</span> <span class="token operator"><</span>h1<span class="token operator">></span>Hello<span class="token punctuation">,</span> world<span class="token operator">!</span><span class="token operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span><span class="token punctuation">;</span> |
Cú pháp thẻ này không phải là một chuỗi hay là HTML, nó được gọi là JSX. Facebook sử dụng JSX để biểu thị UI components
JSX = Javascript + XML
Nếu bạn muốn tạo các mẫu trong các tệp tập lệnh của mình và bạn thấy render()chức năng của Vue khó hoạt động, thì JSX có thể là thứ bạn cần.
VD: đây là một hàm render() mà không có JSX:
1 2 3 4 5 6 7 8 | <span class="token function">render</span> <span class="token punctuation">(</span>h<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token function">h</span><span class="token punctuation">(</span> <span class="token string">'div'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> attrs<span class="token punctuation">:</span> <span class="token punctuation">{</span> id<span class="token punctuation">:</span> <span class="token string">'my-id'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span> <span class="token keyword">this</span><span class="token punctuation">.</span>msg <span class="token punctuation">]</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
và với JSX:
1 2 3 4 5 6 7 8 | <span class="token function">render</span> <span class="token punctuation">(</span>h<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span>div id<span class="token operator">=</span><span class="token string">'my-id'</span><span class="token operator">></span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>msg <span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Dễ hơn nhiều đúng không
Tất nhiên, trình duyệt không thể hiểu được JSX. Đầu tiên nó phải được dịch mã thành JavaScript tiêu chuẩn, tương tự như cách SASS trước tiên cần được dịch sang CSS
2. Tại sao nên sử dụng JSX với Vue?
Có nhiều cách để chỉ định một template trong Vue:
a. Sử dụng tệp HTML
b. Sử dụng một templatethuộc tính trong trình xây dựng cá thể / thành phần của bạn
c. Sử dụng <template> thẻ trong các thành phần tệp đơn
d. Sử dụng render.
Nếu bạn đi với tùy chọn cuối, bạn phải tạo các nút của mình theo một cách rất lạ, tức là sử dụng createElement cú pháp JavaScript.
JSX cho phép bạn sử dụng chức năng render và vẫn có giao diện của HTML. Một số người thấy điều này dễ dàng hơn nhiều. Những người khác thấy thật tệ khi dùng HTML với JS của họ.
Hãy xem ví dụ này và bạn có thể quyết định xem bạn có thích nó hay không:
Ví dụ về JSX
Bây giờ chúng ta sẽ tạo một ứng dụng đơn giản, hiển thị một thông báo với nội dung văn bản. Khi bạn click vào thẻ nó sẽ đưa ra một thông báo.
Đầu tiên, hãy sử dụng Vue theo cách thông thường với các tệp JS và HTML riêng biệt:
vue.js
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span> el<span class="token punctuation">:</span> <span class="token string">'#app'</span><span class="token punctuation">,</span> data<span class="token punctuation">:</span> <span class="token punctuation">{</span> msg<span class="token punctuation">:</span> <span class="token string">'Show the message'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> methods<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token function">hello</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Here is the message'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
index.html
1 2 3 4 5 6 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>app<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>my-class<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">v-on:</span>click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>hello<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> {{ msg }} <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> |
Kết hợp với render:
vue.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span> el<span class="token punctuation">:</span> <span class="token string">'#app'</span><span class="token punctuation">,</span> data<span class="token punctuation">:</span> <span class="token punctuation">{</span> msg<span class="token punctuation">:</span> <span class="token string">'Show the message'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> methods<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token function">hello</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Here is the message'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function">render</span> <span class="token punctuation">(</span>createElement<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token function">createElement</span><span class="token punctuation">(</span> <span class="token string">'span'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token keyword">class</span><span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token string">'my-class'</span><span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> on<span class="token punctuation">:</span> <span class="token punctuation">{</span> click<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>hello <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span> <span class="token keyword">this</span><span class="token punctuation">.</span>msg <span class="token punctuation">]</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
index.js
1 2 3 4 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>app<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token comment"><!--span will render here--></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> |
Kết hợp JSX
Chức năng render hơi khó đọc, phải không? Và đó chỉ là một thẻ <span> bình thường, hãy tưởng tượng sử dụng nó cho một thành phần phức tạp hơn!
Sử dụng JSX thôi:
vue.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span> el<span class="token punctuation">:</span> <span class="token string">'#app'</span><span class="token punctuation">,</span> data<span class="token punctuation">:</span> <span class="token punctuation">{</span> msg<span class="token punctuation">:</span> <span class="token string">'Show the message.'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> methods<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token function">hello</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'This is the message.'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function">render</span><span class="token punctuation">(</span>h<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token string">'my-class'</span><span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">}</span> on<span class="token operator">-</span>click<span class="token operator">=</span><span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>hello <span class="token punctuation">}</span> <span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>msg <span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
index.html
1 2 3 4 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>app<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token comment"><!--span will render here--></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> |
3. Transpiling JSX
JSX chỉ để phát triển và sẽ được transpiled từ lâu trước khi chạy. Vì vậy, chúng ta chỉ cần xem xét JSX về cách nó mang lại lợi ích cho chúng ta (hoặc không).
Để transpiled JSX của bạn, bạn có thể sử dụngbabel-plugin-transform-vue-jsx module là plugin cho Babel và Webpack. Chỉ cần thêm nó vào cấu hình Webpack của bạn:
1 2 3 4 5 6 7 8 9 | <span class="token punctuation">{</span> test<span class="token punctuation">:</span> <span class="token regex">/.js$/</span><span class="token punctuation">,</span> exclude<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token regex">/node_modules/</span><span class="token punctuation">]</span><span class="token punctuation">,</span> use<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> loader<span class="token punctuation">:</span> <span class="token string">'babel-loader'</span><span class="token punctuation">,</span> options<span class="token punctuation">:</span> <span class="token punctuation">{</span> presets<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'es2015'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'transform-vue-jsx'</span><span class="token punctuation">]</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">]</span> <span class="token punctuation">}</span> |
Bây giờ, khi bạn thực hiện xây dựng gói webpack, JSX của bạn sẽ được transpiled thành mã chuẩn.