这段在vue官网能成功运行的代码，在codepen里也没能运行，说vue没被定义Uncaught ReferenceError: Vue is not defined

html

<div id="event-handling"><p>{{ message }}</p><button v-on:click="reverseMessage">反转 Message</button>
</div>

css

.demo {font-family: sans-serif;border: 1px solid #eee;border-radius: 2px;padding: 20px 30px;margin-top: 1em;margin-bottom: 40px;user-select: none;overflow-x: auto;
}

const EventHandlingApp = {data() {return {message: 'Hello Vue.js!'}},methods: {reverseMessage() {this.message = this.message.split('').reverse().join('')}}
}Vue.createApp(EventHandlingApp).mount('#event-handling')

是怎么回事呢，codepen不能用吧
就算codepen能用，又怎么搬到vscode里，或者说浏览器里能显示呢？

2022年4月6日
修改
这样可以。

<!DOCTYPE html>
<html><body><div id="event-handling"><p>{{ message }}</p><button @click="reverseMessage">反转 Message</button></div><script src="https://unpkg.com/vue@next"></script><script>const EventHandlingApp = {data() {return {message: 'Hello Vue.js!'}},methods: {reverseMessage() {this.message = this.message.split('').reverse().join('')}}}Vue.createApp(EventHandlingApp).mount('#event-handling')</script><style>.demo {font-family: sans-serif;
border: 1px solid #eee;
border-radius: 2px;
padding: 20px 30px;
margin-top: 1em;
margin-bottom: 40px;
user-select: none;
overflow-x: auto;
}</style></body>
</html>

记住，不需要这段代码

const app = Vue.createdApp({});

大概是因为有了

const EventHandlingApp = {}
Vue.createApp(EventHandlingApp)

这段在vue官网能成功运行的代码，在codepen里也没能运行，说vue没被定义Uncaught ReferenceError: Vue is not defined相关推荐

Vue 官网学习笔记
VUE介绍 vue git 地址:https://github.com/vuejs/vue/projects Vue 官网教程地址:https://cn.vuejs.org/v2/guide/inst ...
Vue官网所说的低侵入式含义
人生天地之间,若白驹之过隙,忽然而已提出问题在观看vue官网当中,在深入响应式系统出现一段话: Vue 最标志性的功能就是其低侵入性的响应式系统.组件状态都是由响应式的 JavaScript 对象 ...
Vue官网提供表单验证cnpm i vee-validate@2 --save
Vue官网提供表单验证使用步骤: 1:安装vee-valadite,别安装最新版本@2 2:在plugins文件夹中创建一个validate.js[专门注册vee-valadite] 3:注册插件 ...
重磅：Vue 官网竟然有免费的中文视频教程了
loonggg 读完需要 2 分钟速读仅需1分钟关注我很久的读者应该都知道,这两年我一直在创业,当然了,作为程序员创业来讲,其实有时候真的不得不自己去干很多活.虽然我是移动端开发出身,但是这两年其 ...
DIY官网可视化工具打造低代码可视化一键生成导出源码工具
DIY官网可视化工具打造低代码可视化一键生成导出源码工具设计一次打通设计师+产品经理+技术开发团队必备低代码可视化工具从想法到原型到源码,一步到位低代码生成源码工具立即定制DIY官网可视化工具 ...
element在线运行网站codepen报错：Uncaught ReferenceError: Vue is not defined
目录一.问题二.解决方法三.总结一.问题在Element - The world's most popular Vue UI framework官网中点击一个例子右下角的 " ...
Uncaught ReferenceError: Vue is not defined解决方案
在进行组件的使用时发现 Uncaught ReferenceError: Vue is not defined 报了这样的错误经过多方对比后发现注册组件时应书写 Vue.component('my ...
003-读书笔记-Vue官网计算属性与监听器
1.计算属性 1-1 计算属性概述计算属性也是 Vue 实例的属性,和 data 方法中返回的对象中的属性是等同的存在.通常来说,计算属性可以简单理解: 计算属性其实就是 Vue 实例的一个属性计 ...
Vue官网todoMVC示例
这个示例是模仿官网示例样式和功能用我自己的方式写的,基本上没有看官网的源码,只参考自定义指令.让我们一步步来探讨一下.官网demo 要实现的功能单条添加todo 单条删除todo 双击编辑todo ...

这段在vue官网能成功运行的代码，在codepen里也没能运行，说vue没被定义Uncaught ReferenceError: Vue is not defined

这段在vue官网能成功运行的代码，在codepen里也没能运行，说vue没被定义Uncaught ReferenceError: Vue is not defined相关推荐

最新文章

热门文章