Vue开发问题：使用unpkg引入Vue后插值表达式未解析

问题原因 #

你当前通过https://unpkg.com/vue引入的是Vue 3，但代码采用的是Vue 2的初始化语法（new Vue()），Vue 3不再兼容这种写法，导致框架无法识别并编译模板，最终插值表达式原样输出。

另外你描述里提到显示{{tile}}属于拼写失误，你的代码中实际是{{title}}，核心问题仍为版本不兼容。

解决方案 #

方案1：继续使用Vue 2语法 #

修改引入地址，指定Vue 2版本：

<div id="myApp">
    <h1>{{title}}</h1>
</div>
<script src="https://unpkg.com/vue@2"></script>
<script>
    new Vue({
        el: '#myApp',
        data: {
            title: 'Welcome to Vue'
        }
    });
</script>

方案2：升级为Vue 3语法 #

适配Vue 3的初始化方式，使用createApp：

<div id="myApp">
    <h1>{{title}}</h1>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
    Vue.createApp({
        data() {
            return {
                title: 'Welcome to Vue'
            }
        }
    }).mount('#myApp');
</script>

内容的提问来源于stack exchange，提问作者Lian Smit