vue 统计中英文字符串长度_手把手教你实现一个简易的Vue组件在线编辑器

最新推荐文章于 2023-11-01 22:32:47 发布

职业成功w

最新推荐文章于 2023-11-01 22:32:47 发布

阅读量388

点赞数

文章标签： vue 统计中英文字符串长度

本文链接：https://blog.csdn.net/weixin_34811804/article/details/112395784

版权

vue-cli使用过vue的我想大家都知道，那么xxx.vue组件是怎么运行的呢？怎么把template,script,style渲染到页面上的呢？今天我们手动写了个简易的Vue组件在线编辑器玩一玩。

话不多说先看一下效果

准备工作

安装vuejs
新建xxx.html
新建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;
 }