这段在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;
}

js

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里，或者说浏览器里能显示呢