[[357690]]

vue-cli使用過vue的我想大家都知道，那么xxx.vue組件是怎么運行的呢?怎么把template,script,style渲染到頁面上的呢?今天我們手動寫了個簡易的Vue組件在線編輯器玩一玩。

話不多說先看一下效果

準備工作

1. 安裝vuejs
2. 新建xxx.html
3. 新建xxx.css

編寫頁面

<div id="app"> 
       <textarea name="" id="" cols="30" rows="30" v-model="content" autofocus placeholder="請輸入vue模板"></textarea> 
       <div class="btn-center"> 
           <button @click="run">運行代碼</button> 
           <button @click="reset">清除</button> 
       </div> 
   </div> 
   <div id="result"></div> 
   <script src="./node_modules/vue/dist/vue.js"></script> 

textarea { 
            display: block; 
            width: 100%; 
            min-height: 100px; 
            max-height: 500px; 
            padding: 8px; 
            resize: auto; 
 } 
 
 button { 
            margin-top: 8px; 
            display: inline-block; 
            padding: 5px 16px; 
            font-size: 14px; 
            font-weight: 500; 
            line-height: 20px; 
            white-space: nowrap; 
            vertical-align: middle; 
            cursor: pointer; 
            -webkit-user-select: none; 
            -moz-user-select: none; 
            -ms-user-select: none; 
            user-select: none; 
            border: 1px solid; 
            border-radius: 6px; 
            -webkit-appearance: none; 
            -moz-appearance: none; 
            appearance: none; 
} 
 .btn-center{ 
           text-align: center; 
 } 

思路分解

在xxx.vue中，我們寫組件通常遵循一下模板

<template> 
     
</template> 
<script> 
export default { 
     
} 
</script> 
<style> 
 
</style> 

我們想到的是在拿到輸入的內容之后，我們希望獲取都tempalte,script,style中的內容，然后通過Vue.extend( options )方法掛載到頁面的元素上即可。

解析標簽

我們需要拿到內容包括下圖紅圈外的部分

可以利用字符串的match方法獲取到每一段的開始標簽的下標，開始標簽的長度以及結束標簽的下標，然后通過slice方法截取獲取到想要的內容。

getSource(type){ 
    const reg = new RegExp(`<${type}[^>]*>`); 
    let content = this.content; 
    let matches = content.match(reg); 
    if(matches){ 
      let start = content.indexOf(matches[0])+matches[0].length; 
      let end = content.lastIndexOf(`</${type}`); 
      return content.slice(start,end) 
    } 
  }, 

截取之后獲取到的結果

轉化函數

在vue官網中,data必須是一個函數,我們拿到的是一個字符串

export default { 
    data(){ 
        return { 
            msg:'hello world' 
        } 
    }, 
    methods:{ 
        run(){ 
            console.log("你好") 
        } 
    } 
} 

如何把一個字符串轉化為可執行函數，可以參考如何讓一個字符串執行?

我們可以用new Function方法將字符串轉化為可執行函數，我們需要的是

data(){ 
        return { 
            msg:'hello world' 
        } 
    }, 
    methods:{ 
        run(){ 
            console.log("你好") 
        } 
    } 

利用字符串的replace方法將export default 替換成return得到

完成代碼

run:function(){ 
 let template = this.getSource("template"); 
 if(!template) return 
 let script = this.getSource("script"); 
 if(script){ 
   script = script.replace(/export default/,"return"); 
 } 
 let obj = new Function(script)(); 
 obj.template = template; 
 let Profile = Vue.extend(obj); 
 new Profile().$mount("#result") 
}, 

處理樣式

通過正則解析拿到style樣式之后，添加到head中即可

let styleCss = this.getSource("style"); 
let style = document.createElement("style"); 
style.innerHTML = styleCss; 
document.head.appendChild(style); 

總結

以上就是本文的全部內容了，只是簡單地借助Vue.extend()方法實現的一個簡單的Vue組件在線編輯器

<div id="app"> 
    <textarea name="" id="" cols="30" rows="30" v-model="content" autofocus placeholder="請輸入vue模板"></textarea> 
    <div class="btn-center"> 
        <button @click="run">運行代碼</button> 
        <button @click="reset">清除</button> 
    </div> 
</div> 
<div id="result"></div> 
<script src="./node_modules/vue/dist/vue.js"></script> 
<script> 
    new Vue({ 
        el: "#app", 
        data() { 
            return { 
                content: "" 
            } 
        }, 
        methods: { 
            getSource(type) { 
                const reg = new RegExp(`<${type}[^>]*>`); 
                let content = this.content; 
                let matches = content.match(reg); 
                if (matches) { 
                    let start = content.indexOf(matches[0]) + matches[0].length; 
                    let end = content.lastIndexOf(`</${type}`); 
                    console.log(content.slice(start, end)); 
                    return content.slice(start, end) 
                } 
            }, 
            run: function () { 
                let template = this.getSource("template"); 
                if (!template) return 
                let script = this.getSource("script"); 
                if (script) { 
                    script = script.replace(/export default/, "return"); 
                } 
                let styleCss = this.getSource("style"); 
                let style = document.createElement("style"); 
                style.innerHTML = styleCss; 
                document.head.appendChild(style); 
                let obj = new Function(script)(); 
                obj.template = template; 
                let Profile = Vue.extend(obj); 
                new Profile().$mount("#result") 
            }, 
            reset() { 
                this.content = '' 
            } 
        } 
    }) 
</script>