# 更換vue分隔符，達到在laravel開發的方法

### 為什麼要更換分隔符？
其實主要是因為vue的分格符有時候會跟其他的框架衝突到，像這次要結合的Larevel，剛好也是用`{{}}`這個符號來渲染畫面的，為了不互相衝突到，所以就更換囉！

### 只有這個方法可以嗎？

其實之前有研究過利用@yeid模板的方式，結合webpack做編譯，達到在Larevel內開發vue的模式，但是那時候因為剛好是一個空的新專案，才剛在建立環境的時候所做的處理。

>如果有興趣的可以參考[這篇：試著在Laravel 內加入Vue吧
](https://yulingding.medium.com/%E8%A9%A6%E8%91%97%E5%9C%A8laravel-%E5%85%A7%E5%8A%A0%E5%85%A5vue%E5%90%A7-1861b294e6f1)

但因為現在要處理的這個專案，是一個已經開發成熟的產品，希望透過局部替換的方式，慢慢的把之前開發的方式都轉成vue.js，而現在就剛好有一個新的需求，所以就來試試看！

### 利用delimiters改變分隔符
vue很貼心的幫你想到了有可能會衝突的問題，所以只需要加`delimiters`，請看[官方文件](https://https://vuejs.bootcss.com/api/?#delimiters)就可以解決。

<div>
    <p>%[message]</p>
</div>

<script>
new Vue({
    delimiters: ["％[", "]"],
    el: "",
    data: {
        message:'Hello World'
    }
});
</script>

或者，想要用局部註冊在cpmponent也可以

<div id="app">            
    //插入component     
    <prompt-component></prompt-component>
</div>


<script>
 var Prompt = {
            template: '<div><p>%[message]</p><button @click="sayHi">Say Hi!</button></div>',,
            delimiters: ['%[', ']'],
            data: function () {
                return {
                message: 'Hello World!'
                }
            },
            methods: {
                sayHi: function() {
                    alert('Hi');
                }
            }
        };
        
 var vm = new Vue({
    el:'#app',
    data:{
    },
    components:{
        //註冊component  
        'product-component': Prompt
    },
});
</script>

這邊要切記如果要使用component的話，data必須要是一個funciton 並把data return。

參考資料：
- https://cythilya.github.io/2017/05/11/vue-component-intro/
- https://cn.vuejs.org/v2/api/#delimiters

###### tags: `Vue`、`Larevel`