鍍金池/ 問答/HTML/ vue這么動態(tài)引入vue文件？

vue這么動態(tài)引入vue文件？

我需要在vue項目運(yùn)行時引入新的vue文件，該文件是服務(wù)器生成的通過ajax請求回去的，請問如何實現(xiàn)這個功能？

回答
編輯回答
夏木

額

那個。。剛注意到時.vue文件。。vue文件就不太可行了，因為vue文件本身時經(jīng)過vue-loader等webpack處理編譯過的，否則時沒辦法識別包括模板、樣式、es6語法等問題。但是如果可以通過下面的方法來寫vue實例，模板可以用render函數(shù)來寫，然后動態(tài)掛載，應(yīng)該就沒問題了

再更新。。。

剛剛又看了vue官網(wǎng)介紹，runtime+Compiler，可以實現(xiàn)模板直接html不需要用render，樓主可以研究下
vue編譯器
vue-el
理論上時可以實現(xiàn)的 參看vue官網(wǎng)api，Vue.extend介紹
我寫的demo

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
    <p>{{ message }}</p>
    <input type="text" v-model="message"/>
    <button @click="dynamicMount">動態(tài)掛載vue</button>
    <div id="mount-point">
    </div>
</div>
<script>
new Vue({
    el: '#app',
    data: {
        message:'Hello World!'
    },
    created() {
        this.dynamicMount = function() {
            let Profile = Vue.extend({
            template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
            data: function () {
                return {
                firstName: 'Walter',
                lastName: 'White',
                alias: 'Heisenberg'
                }
            }
            })
            // 創(chuàng)建 Profile 實例，并掛載到一個元素上。
            new Profile().$mount('#mount-point')
        }
    }
})
</script>
</body>
</html>
2018年9月9日 00:38
編輯回答
真難過

vue-router有一個懶加載功能，你直接用js去解析vue文件是沒可能的
但是你可以做到的事情是，在打包之后把代碼分割成多塊，需要的時候才加載

2018年5月28日 00:18
編輯回答
朽鹿

那要看請求的這個文件有沒有其它特殊的語法，如果只是html語法和css語法，vue語法，是沒有問題的，如果這個請求文件的內(nèi)容是一個組件，那就把文件的內(nèi)容讀出來直接賦值給頁面script標(biāo)簽，或者把html代碼直接賦值到vue.extend中的template變量就可以

2017年8月4日 06:25