我最近開始學習 vue.js（來自 angular 2+），我看了一些教程，一切似乎都很順利。一如既往，在完成教程后，我為自己創建了一個小應用程序，以確保我知道自己在做什么。但我似乎真的在為 Vue.js 苦苦掙扎。到目前為止，該應用程序非常簡單。用戶發布了一個故事，這個故事有評論....就這么簡單我到了我希望用戶能夠編輯評論的地步，但似乎我無法弄清楚如何做到這一點。我希望這樣當用戶單擊編輯按鈕時，評論會更改為文本區域或某種輸入。至此我已經完全沒有在項目中使用vue了。所有的頁面都是用 blade 渲染的。我想弄清楚你打算如何使用它？所以我有以下問題您是否打算使用多個 vue 組件，在刀片中循環并在每次迭代時創建一個？<div id="app"> @foreach($comments as $comment) <comment {Stuff passed in}></comment> @endforeach</div>您是否打算擁有一個從 api 獲取數據并將它們循環到 vue 組件中的 vue“應用程序”？ const comments = new Vue({ el: '#comments#' })由于所有網站都是一個多頁面應用程序（不想走 SPA 路線）并且可以說我現在有一個產品頁面，該產品有一個屬性列表（與評論幾乎相同）。我要創建另一個 vue 應用程序嗎？const comments = new Vue({ el: '#comments',});const productThings = new Vue({ el: '#productThings'})如果我想在由 vue 控制的頁面上設置部分（比如評論部分和另一個交互部分）這是否必須像上面的代碼示例中那樣是 2 個 vue“應用程序”，一個是“評論”，一個是“ somethingelse" 或者整個頁面必須是一個大的 vue 組件。// Comment loop, How ever this gets handled with vue // Some other content // Another place I need it to be interactive````這似乎非常復雜，只是為了完成簡單的任務，而且似乎很快就會失控（我只能想象在 6 個月后回到這個問題并試圖弄清楚發生了什么）。你可以看到我對這一切有多困惑，我讀得越多，我似乎就越困惑。
2 回答
動漫人物
TA貢獻1815條經驗 獲得超10個贊
Vue 用于創建完全成熟的 SPA Web 應用程序，但只能用作沒有構建過程的插件，用于更簡單的用例。通常你會集成 Vue Router 來創建多頁面體驗，但你也可以只定義單個組件并將它們安裝在一個元素上。在您的情況下，混合使用 PHP 和 Vue，我建議您采用沒有構建過程和插入式組件的方式。
Vue 是一個帶有靜態模板的 JavaScript 框架。所以，你不應該生成動態模板，然后將它們傳遞給 Vue，而應該定義靜態模板，然后只將數據傳遞給 Vue。例如，您可以通過 Ajax 以 JSON 格式獲取數據，然后處理該數據以呈現評論列表等。
如果你想使用 Vue 作為沒有路由的插件，你需要在它們各自的頁面上安裝兩個單獨的 Vue 實例。您當然可以重用這些組件的一部分。請記住，您不能在這些實例之間共享數據（使用 SPA 的好處之一）。但是，您可以通過 LocalStorage/SessionStorage/IndexedDB 共享數據。
訪問數據的一種常見方式是通過 REST API（通過 Ajax/fetch）。您將在 HTTP REST 接口后面以適當的格式（通常是 JSON）提供數據。然后，Vue 獲取數據，然后使用它來構建組件。另一種方法（不太好）是只使用服務器端編程語言呈現數據并將其放入 JavaScript 變量中，這樣您就可以在運行時訪問數據。
這是一個基本示例。請記住，從屬性綁定值是一種反模式，因此我沒有以雙向方式綁定注釋文本。我還對評論數據進行了硬編碼，并且不從遠程獲取它。
Vue.config.devtools = false;
Vue.config.productionTip = false;
Vue.component('comment', {
? data () {
? ? return {
? ? ? commentAsInput: false
? ? };
? },
? props: {
? ? commentObject: {
? ? ? type: Object,
? ? ? required: true
? ? }
? },
? template: `<div>
? ? <a href="#" @click="commentAsInput = !commentAsInput" v-if="!commentAsInput">
? ? ? {{ commentObject.text }}
? ? </a>
? ? <textarea :value="commentObject.text" v-if="commentAsInput" />
? </div>`
});
Vue.component('comments', {
? data () {
? ? return {
? ? ? comments: [{ id: 124, text: 'fkgnsdklgnl' }, { id: 2135325, text: 'nlekng345gn' }]
? ? }
? },
? template: `<div>
? ? <h1>Comments</h1>
? ? <div v-for="comment in comments" :key="comment.id">
? ? ? <comment :comment-object="comment" />
? ? </div>
? </div>`
});
new Vue({
? el: '#app',
? template: `<comments />`
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>
白衣非少年
TA貢獻1155條經驗 獲得超0個贊
不，通常您會使用 Vue 組件來迭代和呈現每個評論（可能作為子組件）。
您可以從 API 獲取數據，或將其呈現到您的 blade 模板中以供 Vue 使用（節省 API 調用，如果您還沒有 API 端點，則必須設置 API 端點）。
如果您使用的是 Laravel 提供的 Vue 腳手架，則 Vue 實例會在加載 app.js 包的任何頁面上初始化并附加到具有 ID 的元素（
app如果有的話）。在這個元素中，Vue 將解析任何模板指令并渲染任何已注冊的組件。因此，您可以注冊其他組件（例如 ProductThings）以放入不同的刀片模板中。正如我上面提到的，Laravel 創建了一個 Vue 實例。沒有什么可以阻止您通過刀片將靜態內容渲染到容器中
app，Vue 將在包含獨立功能的組件之間保持原樣。
- 2 回答
- 0 關注
- 143 瀏覽
添加回答
舉報
0/150
提交
取消