手把手教你實(shí)現(xiàn)一個(gè)簡(jiǎn)易的Vue組件在線(xiàn)編輯器

vue-cli使用過(guò)vue的我想大家都知道，那么xxx.vue組件是怎么運(yùn)行的呢？怎么把template,script,style渲染到頁(yè)面上的呢？今天我們手動(dòng)寫(xiě)了個(gè)簡(jiǎn)易的Vue組件在線(xiàn)編輯器玩一玩。

話(huà)不多說(shuō)先看一下效果

準(zhǔn)備工作

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

編寫(xiě)頁(yè)面

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

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ě)組件通常遵循一下模板