手把手教你實(shí)現(xiàn)一個(gè)簡(jiǎn)易的Vue組件在線編輯器
vue-cli使用過(guò)vue的我想大家都知道，那么xxx.vue組件是怎么運(yùn)行的呢?怎么把template,script,style渲染到頁(yè)面上的呢?今天我們手動(dòng)寫(xiě)了個(gè)簡(jiǎn)易的Vue組件在線編輯器玩一玩。
靈武網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)公司！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、APP開(kāi)發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)公司等網(wǎng)站項(xiàng)目制作，到程序開(kāi)發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)公司從2013年創(chuàng)立到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專(zhuān)注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)公司。
話不多說(shuō)先看一下效果
準(zhǔn)備工作
- 安裝vuejs
- 新建xxx.html
- 新建xxx.css
編寫(xiě)頁(yè)面
-
-
-
- 運(yùn)行代碼
- 清除
-
textarea 元素為vue組件代碼的編寫(xiě)部分,button為按鈕區(qū)域
- 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中，我們寫(xiě)組件通常遵循一下模板
-
-
-
-
-
我們想到的是在拿到輸入的內(nèi)容之后，我們希望獲取都tempalte,script,style中的內(nèi)容，然后通過(guò)Vue.extend( options )方法掛載到頁(yè)面的元素上即可。
解析標(biāo)簽
我們需要拿到內(nèi)容包括下圖紅圈外的部分
可以利用字符串的match方法獲取到每一段的開(kāi)始標(biāo)簽的下標(biāo)，開(kāi)始標(biāo)簽的長(zhǎng)度以及結(jié)束標(biāo)簽的下標(biāo)，然后通過(guò)slice方法截取獲取到想要的內(nèi)容。
- 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(`
- return content.slice(start,end)
- }
- },
截取之后獲取到的結(jié)果
轉(zhuǎn)化函數(shù)
在vue官網(wǎng)中,data必須是一個(gè)函數(shù),我們拿到的是一個(gè)字符串
- export default {
- data(){
- return {
- msg:'hello world'
- }
- },
- methods:{
- run(){
- console.log("你好")
- }
- }
- }
如何把一個(gè)字符串轉(zhuǎn)化為可執(zhí)行函數(shù)，可以參考如何讓一個(gè)字符串執(zhí)行?
我們可以用new Function方法將字符串轉(zhuǎn)化為可執(zhí)行函數(shù)，我們需要的是
- 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")
- },
處理樣式
通過(guò)正則解析拿到style樣式之后，添加到head中即可
- let styleCss = this.getSource("style");
- let style = document.createElement("style");
- style.innerHTML = styleCss;
- document.head.appendChild(style);
總結(jié)
以上就是本文的全部?jī)?nèi)容了，只是簡(jiǎn)單地借助Vue.extend()方法實(shí)現(xiàn)的一個(gè)簡(jiǎn)單的Vue組件在線編輯器
-
-
-
- 運(yùn)行代碼
- 清除
-
