Vue.js 改變分隔符的符號 Change Custom Delimiters

在使用 vue.js 重構舊有的專案時，發現 {{ variable }} 這樣的 expression 竟然怎麼樣都不顯示在畫面上，原來是因為我的 view 是 hbs (handlebarsjs) (因為是 express 的專案...)，所以這 {{ }} 這個分隔符號會先被 handlebarsjs 吃掉，以至於我的變數反而沒被 vue 辨識。


所以，其實只要是專案裡面有這種需要用 Delimiters 相關前端 library，像是同時使用 angular 以及 vue，若都是 {{ }} ，或是其他 template engine 影響你 vue 的顯示，可以利用 vue 的 config.delimiters 來修改成另外的 delimiters 來使用，好讓 vue 不會跟原本的正宮們打架...

// delimiters 傳入一個 array，第一個 index 是左側的表達式，第二個 index 是右側的表達式。

Vue.config.delimiters = ['${', '}']

要注意這一改，就是原本有用到 vue 的 {{ }} expression 的地方都要換成 ${ }，不能某地方還是維持 {{ }}。

參考: https://vuejs.org/api/#delimiters

範例如下:

JS:

Vue.config.delimiters = ['%%%', '%%%'];

new Vue({
    el: '#app',
    data: {
      name: 'WINWU'
    }
});

HTML:

<div id="app">
    my name is %%%name%%%
</div>