2017-01-20 40 views
0

我只是使用jQuery與vue.js。我的情況是,我試圖通過jquery向main.html注入側邊欄html代碼(使用vue語法)。但是,在我將sidebar.html注入到main.html後,vue.js無法編譯註入的vue的語法。那麼任何人都可以幫我解決這個問題嗎? vue是否具有角度範圍的功能?應用程序?Vue範圍新鮮

回答

0

問題的最簡單的解決方案是將你的vue實例掛載到jquery注入的元素之後。這是通過在具有el選項的vue構造函數中指定它來完成的。或者通過使用$mount

很難讓jquery(它的html部分)與vue.js平滑運行,我會建議一直使用vue。一種簡單的方法是一次加載所有vue模板,然後只更改數據。

+0

我的問題是,我必須用相同的側邊欄製作很多html頁面,所以我需要單獨注入側邊欄。你有另一個想法做到這一點? –

+0

哦,那是一件非常擅長的事情,不需要jquery。所以如果你只是從你的側邊欄組件中創建一個包,然後將該包文件包含到html頁面中。

爲了使一個JS束,我建議嘗試的[VUE-CLI(https://github.com/vuejs/vue-cli )並使用webpack-simple模板進行遊戲。 –

+0

謝謝。我會嘗試 –

0

vue是否具有像角度範圍的功能?應用程序?

正如它說的here,Vue異步執行DOM更新。無論何時觀察到數據變化,它都會打開一個隊列並緩衝在同一個事件循環中發生的所有數據變化。在下一個事件循環「打勾」中,Vue刷新隊列並執行實際工作。

爲了等到Vue.js完成數據更改後更新DOM,可以在數據更改後立即使用Vue.nextTick(回調)。回調將在DOM更新後調用,這與AngularJS類似,您將代碼封裝在$ apply()中並啓動$ digest循環。

代碼示例:

HTML

<div id="example">{{ message }}</div> 

JS

var vm = new Vue({ 
    el: '#example', 
    data: { 
    message: '123' 
    } 
}) 
vm.message = 'new message' // change data 
vm.$el.textContent === 'new message' // false 
Vue.nextTick(function() { 
    vm.$el.textContent === 'new message' // true 
}) 

爲什麼你的代碼沒有工作可找只在代碼後進行診斷。

+0

我注入了我的代碼與jquery和{{item.title}} {{item.detail}}無法呈現。 –