Vue CDN无法正常工作求助（附代码示例）

你的代码无法运行的核心原因是CDN拉取的Vue版本和代码语法不匹配：当前https://cdn.jsdelivr.net/npm/vue默认指向Vue 3，但你的代码用的是Vue 2的传统写法（new Vue({ el: ... })），Vue 3已经废弃了这种实例创建方式。

可以通过以下两种方式解决：

方案一：改用Vue 2的CDN链接 #

直接替换script标签的CDN地址为Vue 2的版本，现有代码无需修改：

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

方案二：升级代码适配Vue 3 #

如果想使用Vue 3，需要调整实例创建的语法，使用createApp并通过mount方法挂载：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="name"/>
        <p>Hello {{ name }}</p>
    </div>
    <script>
        Vue.createApp({
            data(){
                return{
                    name: 'John'
                };
            }
        }).mount("#app"); 
    </script>
</body>
</html>

修改完成后，打开浏览器控制台（F12）确认无报错，同时测试输入框的双向绑定是否正常——输入内容时<p>标签的文本同步更新，就说明问题已解决。

内容的提问来源于stack exchange，提问作者Eiden Martinez Davila