如何从Vue.js 2中的自定义指令获取文字表达式？

Question

我正在尝试将Vue 1.x自定义指令转移到Vue 2.x，我无法在任何地方找到如何将表达式再次作为文字。让我们说这个例子是我的自定义指令：

<div v-custom="file.txt"></div>

在Vue1中

 

Vue.directive('custom', function () {
  console.log(this.expression)
})

将返回＆＃34; file.txt＆＃34;作为一个字符串。

在Vue2中

Vue.directive('custom', {
  bind: function (el, binding) {
    console.log(binding.expression)
  }
})

将返回

  

[Vue警告]：财产或方法＆＃34;文件＆＃34;未在实例上定义   但在渲染期间引用。确保声明反应数据   数据选项中的属性

和

  

[Vue warn]：渲染函数出错：＆＃34; TypeError：无法读取属性   ＆＃39; TXT＆＃39;未定义＆＃34;

这意味着我在Vue2中的表达式不再是字符串，而是变量。我如何让它现在返回一个字符串？

Answer 1

只需将文字换成单引号即可使其成为字符串文字。但是，正如您的评论中所述，如果尝试访问binding.expression，它将包含包装单引号。相反，您应该使用binding.value属性。

<强>模板：

<div id="app">
  <div v-custom="'file.txt'"></div>
</div>

<强>使用Javascript：

Vue.directive('custom', {
  bind: function (el, binding) {
    console.log(binding.value)
  }
})

new Vue({
    el: '#app'
})

Sample Fiddle