使用jq load方法加载vue 模板不识别vue语法

Question

我没有使用webpack等构建工具，页面跳转借助jq的load方法

index.html

<div id='app'>

    <!--侧边导航-->

    <div class='side-menu'>

        <button @click='getData'>加载数据</div>

    </div>

    

    <!--存放主要内容-->

    <div id='contain'></div>

</div>

<scipt>

var app=new Vue({

    el:'#app',

    methods:{

        getData:function(){

            $('#contain').load('test.html')

        }

    }

})

</script>

test.html

<div id='test'>

    {{msg}}

    <p v-for='item in list'>{{item.name}}</p>

</div>

<scipt>

var test=new Vue({

    el:'#test',

    data:{

        msg:'测试',

        list:[

            {name:'aa'},

            {name:'aa'},

            {name:'cc'}

        ]

    }

})

</script>

加载test.html成功之后并没有渲染出data里面的内容，二是直接出现{{msg}}这样的大括号，为啥vue语法不起作用呢？

Answer 1

肯定不行啊，动态引入的没经过编译，没转换成js，浏览器是不认识的，得在页面上引入vue的运行时的包