分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

超简单的VUE在线调试网站(不需搭建环境)

发布时间:2023-09-06 01:19责任编辑:彭小芳关键词:暂无标签

jsbin.com提供简单、直观、易用的vue调试功能,最大的好处不需要自己搭建环境就可以学习VUE

1、打开http://jsbin.com/joxinumota/edit?html,js,console,output
2、点击“Add library”,直接键入vue,选择vue2.0.3,Html编辑器的<body>区域会自动加入<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>

3、紧跟其后输入(手工输入或黏贴):
<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
4、在JavaScript编辑器中输入:
var app4 = new Vue({
  el: ‘#app-4‘,
  data: {
    todos: [
      { text: ‘学习 JavaScript‘ },
      { text: ‘学习 Vue‘ },
      { text: ‘整个牛项目‘ }
    ]
  }
})
5、output显示:
学习 JavaScript
学习 Vue
整个牛项目
6、在console编辑器中,输入:
app4.todos.push({ text: ‘新项目‘ })
回车,就可以看到output显示增加了一条新的记录:“新项目”

超简单的VUE在线调试网站(不需搭建环境)

原文地址:http://www.cnblogs.com/windel/p/7703554.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved