在 vue 中定位和操作单个 DOM 元素答案

【问题标题】：Target and manipulate single DOM element in vue在 vue 中定位和操作单个 DOM 元素
【发布时间】：2019-06-26 19:12:52
【问题描述】：

不知何故，我仍然无法理解一些核心 vue 概念。

我使用 phalcon 制作了一些简单的网页。如此创建它，它可以在没有 JS 的情况下工作，现在是时候添加一些花里胡哨 - ajax 查询等，以提高用户体验。

我想用 vue 做所有事情，看看它是如何加起来的。但是经过数小时的谷歌搜索后，我仍然找不到最简单任务的解决方案。

说：我想在一系列

-s 中获取一个文本段落并对其进行一些更改。也许摘录它并在其后面添加“查看更多”按钮。现在，在 jQuery 中，我只需使用 each() 进行迭代并执行任务。使用 vue 定位 DOM 元素集对我来说要困难得多，可能是因为整个范式是“相反的”。

我知道我可以使用 v-for 进行迭代，但是这些元素已经在 DOM 中，从数据库中获取并使用 volt 进行模板化。我什至有从 phalcon 创建 .js 文件的疯狂想法，但这完全否定了我先制作功能性网页然后逐步增强它的策略。

坦率地说，我现在觉得自己过于复杂了。 vue 是否适合这样的项目，或者它只是一个从头开始构建应用程序的工具？

【问题讨论】：

【解决方案1】：

Vue 的模板是客户端的，这意味着如果您正在交付一个已经模板化的 html 页面（通过您的后端），那么 vue 几乎没有什么可以为您做的。 Vue 需要数据，而不是 DOM 元素来构建它的视图模型。

这在构建单页应用程序时变得非常明显，例如，该应用程序仅在客户端呈现。您只需从后端 api（例如 REST）异步加载数据，然后在客户端上进行所有渲染。

据我了解，您希望混合使用客户端和服务器端渲染，使用后端的模板引擎渲染大部分不可交互的内容，并使用 vue 添加一些交互性。在这种情况下，您需要将一些 vue 组件（具有自己的渲染逻辑）添加到后端模板，并使用 vue 的数据绑定将数据传递给该组件。

这是一个例子：

...
<div id="app">
    <my-vue-list :products="{% products %}"></my-vue-list>
</div>
...

在你的 JS 中：

var app = new Vue({
  el: '#app',
  data: {
    components: {MyVueList} // You will have to register all the components you want to use here
  }
})

【讨论】：

可能我应该只删除 phalcon 的“视图”部分，然后从控制器返回数据。但是，如果我们无论如何都没有功能性的非 JS 版本，那么为什么不直接使用 firebase 或类似的东西......混合 volt 模板和 vue 模板可能会让我头疼，因为我只需要一些小的 UX 增强，我想我会求助于 jQuery。
@heliogabal 使用 Phalcon 的模板应该没有问题，我只能假设它相当于 Laravel 的刀片，但是从经验来看，我基本上消除了所有基于 php 的模板完全来自我所有的项目并专门使用 Vue。 Laravel 不再充当 API。与 jQuery 相比，Vue 也有很多优势，最显着的是使用虚拟 DOM。只是我的 2 美分。
@heliogabal MVC 已经过时了，因为客户端和 api 的严格分离更加灵活。虽然可以将 vue 混合到一些后端 MVC 模式中，但我认为这个选项的扩展性不是特别好。在我看来，没有理由选择 MVC 而不是 API 方法 - 例如，您也可以在这里使用 firebase - 但最终归结为您最熟悉的方法。
我有点老派，所以“渐进式增强”一直萦绕在我的脑海中。我想这也是过去的歌曲:)

【解决方案2】：

Vue 提供了ref 属性来注册对 dom 元素或子组件的引用：

// accessible via this.$refs.foo
<li ref="foo">...</li>

但是请注意，refs 不是响应式的，如文档中所述：

$refs 也是非响应式的，因此您不应尝试在模板中使用它来进行数据绑定。

【讨论】：