Question

我不太明白我是否应该在Vue HTML变量中使用$：

new Vue({
   data: {
      a: "myData"
   }
});

我必须使用：

 <h1>My value is {{ a }}</h1>

或

<h1>My value is {{ $a }}</h1>

有什么区别？以同样的方式，我读到：

{{ data }}

和

{{ $data }}

感谢。

Answer 1

您不需要使用$（尽管您可以）。按照惯例，$表示特定于框架的属性。

如果只是尝试使用{{ $a }}，则无法呈现任何内容，因为您尚未定义属性$a。但是完全有可能：

data () {
  return {
    $a: "myData"
  }
}

{{ $data }}是由Vue定义的此类属性的示例，并引用data对象本身。打印它，您将看到整个数据属性的字符串化（使用JSON.stringify）结果：

{＆＃34; a＆＃34;：＆＃34; myData＆＃34; }

Answer 2

我相信您使用$来访问内置（Vue）属性和方法。当您想要访问由您创建的属性时，可以使用其他方法。

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

// $watch is an instance method
vm.$watch('a', function (newValue, oldValue) {
  // This callback will be called when `vm.a` changes
})

Code sample source

注意：您不应使用$来访问属性/方法。

Answer 3

$的所有属性都是实例属性，这意味着它们是Vue本身的一部分。我不确定你甚至可以像你提到的那样使用$a。

至少这不是一个好主意，因为这表示您正在使用实例属性而不是您自己的预定义数据属性。

https://vuejs.org/v2/api/#Instance-Properties

何时在Vue HTML变量中使用$或不使用？

3 个答案: