Vue2 新手上路无处不在的特殊符号,让人傻傻分不清 “:”、“.”、“@”、“#” 、“{{}}“ 、“$“,‘$bus‘,‘$event‘

刚刚学vue没多久,经常分不清情况什么时候用什么符号:

“:” 是指令 “v-bind”的缩写

“.”是修饰符

“@”是指令“v-on”的缩写 ,它用于监听 DOM 事件

“#”是v-slot的缩写;

 "{{}}"  插值语法

 "$" :Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $ 。


Vue中有很多的指令,且形式都是 v-xxx。

v- 前缀作为一种视觉提示,用来识别模板中 Vue 特定的特性。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时,v- 前缀很有帮助,然而,对于一些频繁用到的指令来说,就会感到使用繁琐。同时,在构建由 Vue.js 管理所有模板的单页面应用程序 (SPA - single page application) 时,v- 前缀也变得没那么重要了。因此,Vue.js 为 v-bind 和 v-on 这两个最常用的指令,提供了特定简写


 1  “:” 是指令 “v-bind”的缩写  

或简写为,xxx 同样要写 js 表达式,可以直接读取到 data 中的所有属性

如果属性没有加v-bind指令,那么属性中""里的值就是普通字符串,如果加了v-bind指令,就会把""里的值解析为JS表达式



  
    
    模板语法
    
    
  
  

    
  

  

Vue2 新手上路无处不在的特殊符号,让人傻傻分不清 “:”、“.”、“@”、“#” 、“{{}}“ 、“$“,‘$bus‘,‘$event‘_第1张图片

:(v-bind) 区分与v-model

Vue中有2种数据绑定的方式

  • 单向绑定v-bind数据只能从 data 流向页面
  • 双向绑定v-model数据不仅能从 data 流向页面,还可以从页面流向 data

备注

  • 双向绑定一般都应用在表单类元素上,如