手把手教你实现一个简易的Vue组件在线编辑器_编程技术网-程序员技术内容聚合平台

（在说正事之前，我要推荐一个福利：你还在原价购买阿里云、腾讯云、华为云服务器吗？那太亏啦！来这里，新购、升级、续费都打折，能够为您省60%的钱呢！2核4G企业级云服务器低至69元/年，点击进去看看吧>>>)

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为按钮区域
本文转载自网络，原文链接：https://mp.weixin.qq.com/s/KLx5S1XUAZPmiGQg8h8sQA

香港服务器可以用cdn加速吗？可以，方
手把手教你实现一个简易的Vue组件在线
求求你，别再用Wait和Notify了！
12 个 GitHub 上超火的 JavaScript 项