当前位置：主页 > 查看内容

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

发布时间：2021-09-06 00:00| 有 位朋友查看

简介：vue-cli使用过vue的我想大家都知道，那么xxx.vue组件是怎么运行的呢?怎么把template,script,style渲染到页面上的呢?今天我们手动写了个简易的Vue组件在线编辑器玩一玩。 话不多说先看一下效果 准备工作 安装vuejs 新建xxx.html 新建xxx.css 编写页面 divid=……

 

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

话不多说先看一下效果


准备工作

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

编写页面

  1. <div id="app"> 
  2.        <textarea name="" id="" cols="30" rows="30" v-model="content" autofocus placeholder="请输入vue模板"></textarea> 
  3.        <div class="btn-center"> 
  4.            <button @click="run">运行代码</button> 
  5.            <button @click="reset">清除</button> 
  6.        </div> 
  7.    </div> 
  8.    <div id="result"></div> 
  9.    <script src="./node_modules/vue/dist/vue.js"></script> 
textarea 元素为vue组件代码的编写部分,button为按钮区域
本文转载自网络，原文链接：https://mp.weixin.qq.com/s/KLx5S1XUAZPmiGQg8h8sQA
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：腾讯发布自研第四代数智融合计算平台“腾讯大数据-天工”，引领 下一篇：没有了

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐