Vue 范围新鲜

Question

我只是用 vue.js 和 jquery。我的情况是，我试图用 jquery 将侧边栏 html 代码（里面有 vue 语法）注入 main.html。但是，在我将sidebar.html注入到main.html之后，vue.js无法编译注入的vue语法。那么有人可以帮我解决这个问题吗？ vue有没有angularscope.apply?

这样的函数

Answer 1

Does vue has function like angular scope.apply?

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

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

代码示例：

HTML

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

JS

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

为什么你的代码不起作用，只看代码就可以诊断出来。

Answer 2

解决您问题的最简单方法是在 jquery 注入后将您的 vue 实例挂载到该元素。这是通过在 vue 构造函数中使用 el option. Or by using $mount

指定它来完成的

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

Vue 范围新鲜

Vue scope fresh

javascript

jquery

vue.js

vuejs2