手把手教你实现一个简易的Vue组件在线编辑器

程序源代码

共 1904字,需浏览 4分钟

 ·

2020-12-27 00:57

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 元素为vue组件代码的编写部分,button为按钮区域

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中,我们写组件通常遵循一下模板