Vue 范围新鲜答案

【问题标题】：Vue scope freshVue 范围新鲜
【发布时间】：2017-01-20 07:02:28
【问题描述】：

我只是将 vue.js 与 jquery 一起使用。我的情况是，我尝试使用 jquery 将侧边栏 html 代码（内部带有 vue 语法）注入 main.html。但是，在我将 sidebar.html 注入 main.html 后，vue.js 无法编译注入的 vue 的语法。那么有人可以帮我解决这个问题吗？ vue 有 angular scope.apply 之类的功能吗？

【问题讨论】：

标签： javascript jquery vue.js vuejs2

【解决方案1】：

解决问题的最简单方法是在 jquery 注入后将 vue 实例安装到元素上。这是通过在 vue 构造函数中使用 el 选项指定它来完成的。或者使用$mount

很难让 jquery（它的 html 部分）与 vue.js 一起顺利运行，我建议一路使用 vue。一种简单的方法是一次加载所有 vue 模板，然后只更改数据。

【讨论】：

我的问题是，我必须制作许多具有相同侧边栏的 html 页面，所以我需要单独注入侧边栏。您还有其他想法吗？
哦，这就是vue真正擅长的东西，不需要jquery。因此，如果您只是从侧边栏组件中制作一个捆绑包，然后将该捆绑包文件包含到 html 页面中。
为了制作一个 js 包，我建议尝试vue-cli 并使用 webpack-简单的模板。
谢谢。我会试试的

【解决方案2】：

vue 有 angular scope.apply 之类的功能吗？

正如 here 所说，Vue 异步执行 DOM 更新。每当观察到数据更改时，它将打开一个队列并缓冲同一事件循环中发生的所有数据更改。在下一个事件循环“tick”中，Vue 刷新队列并执行实际工作。

为了在数据更改后等到 Vue.js 完成更新 DOM，您可以在数据更改后立即使用 Vue.nextTick(callback)。回调将在 DOM 更新后被调用，这类似于 AngularJS，您将代码包装在 $apply() 中并启动 $digest 循环。

代码示例：

HTML

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

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

仅查看代码即可诊断出为什么您的代码不起作用。

【讨论】：

我用 jquery 注入了我的代码，但无法呈现 {{item.title}}{{item.detail}}。