Question

以某种方式，我仍然无法围绕一些核心的Vue概念。

我使用phalcon制作了一些简单的网页。创建它的目的是使它在没有JS的情况下也可以工作，现在是时候添加一些麻烦了-ajax查询等，以使用户体验更好。

我想使用vue进行所有操作，以了解所有内容的总和。但是经过数小时的搜寻后，我仍然找不到最简单任务的解决方案。

说：我想获得一系列

-s中的文本段落，并对其进行一些更改。也许做它摘录并添加“看到更多的”背后按钮。现在，在jQuery中，我只需要遍历each（）并执行任务。用vue定位DOM元素集对我来说要困难得多，可能是因为整个范例是“相反的”。

我知道我可以用V-的重复，但这些元素已经在DOM，从数据库中取出，并用伏模板。我什至曾经有过从phalcon创建.js文件的想法，但这完全否定了我首先制作功能网页然后逐步进行增强的策略。

坦白说，我现在正为此感到过于复杂。 Vue甚至适合这样的项目，还是它是专门用于从头开始构建应用程序的工具？

Answer 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
  }
})

Answer 2

Vue提供了{{3}}属性，用于注册对dom元素或子组件的引用：

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

但是请注意，引用没有反应，如文档所述：

$ refs也是非反应性的，因此您不应尝试在模板中将其用于数据绑定。