使用 vue (Laravel) 实现简单任务

Question

我最近开始学习 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 个月后回到这个问题并试图弄清楚发生了什么）。你可以看到我对这一切有多困惑，我读得越多，我似乎就越困惑。

Answer 1

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>

Answer 2

1. 不，通常您会使用 Vue 组件来迭代和呈现每个评论（可能作为子组件）。

2. 您可以从 API 获取数据，或将其呈现到您的 blade 模板中以供 Vue 使用（节省 API 调用，如果您还没有 API 端点，则必须设置 API 端点）。

3. 如果您使用的是 Laravel 提供的 Vue 脚手架，则 Vue 实例会在加载 app.js 包的任何页面上初始化并附加到具有 ID 的元素（app如果有的话）。在这个元素中，Vue 将解析任何模板指令并渲染任何已注册的组件。因此，您可以注册其他组件（例如 ProductThings）以放入不同的刀片模板中。

4. 正如我上面提到的，Laravel 创建了一个 Vue 实例。没有什么可以阻止您通过刀片将静态内容渲染到容器中app，Vue 将在包含独立功能的组件之间保持原样。