何时在Vue HTML变量中使用$符号？

Question

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

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

我必须使用：

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

或者

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

有什么区别？同样地，我读到：

{{ data }} 

并且

{{ $data }}

感谢您的选择。

- pedro_pmda

Answer 1

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

如果只是尝试使用{{ $a }}，它将不会呈现任何内容，因为您还没有定义属性$a。但是这完全可以实现：

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

{{ $data }}是Vue定义的这样一种属性的示例，它引用data对象本身。打印它，你会看到整个数据属性的字符串化结果（使用JSON.stringify）：

{"a": "myData"}

- dfsq

---

即使您定义了$a，{{$a}}也不会呈现任何内容，Vue将在控制台中显示错误。根据文档，“以_或$开头的属性不会在Vue实例上代理，因为它们可能与Vue的内部属性和API方法冲突。您必须像vm.$data._property一样访问它们”。 https://codepen.io/Kradek/pen/ypKMmN?editors=1010 - Bert

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

代码示例来源

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

- codejockie

Answer 3

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

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

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

- Stephan-v