Vue笔记（插值）

插值：

• 使用{{属性}}进行插值，将其中的值转为字符串
• 使用{{{属性}}进行插值，将其中的值转为HTML片段
• Vue指令和自身特性不允许插值，否则会发出警告

表达式：

• 在{{}}中，支持三目运算符，且只支持单个表达式，不支持语句和流控制，不能使用用户自定义的全局变量，只能使用Vue白名单内的全局变量，如Math和Date
• Vue支持在{{}}中插入|号，对数据进行过滤，需要在实例的filters中设定，可以串联使用，也可以传递参数，第一个参数总是上一个过滤器处理后的结果：如{{data | 过滤器（第二个参数）}}
  • 过滤属性应当用于处理简单的文本转换，如果要实现更复杂的数据变换，应该使用计算属性

指令：

• 在实例中使用v-bind绑定数据，动态更新HTML元素上的属性，可以简写为：（语法糖）
• 在实例中使用v-bind绑定类
  • 可以使用对象语法绑定class，并可以传递多个，如标签中:class = "{类名：布尔值，类名：布尔值}"
  • 可以直接绑定data或者computed中的属性，进行动态设置
  • 可以使用数组，数组项中为data或computed的值
  • 可以在其中使用三目运算符
  • 当写复用组件或表达式较长或逻辑复杂尽可能使用计算属性
  • 在自定义组件上使用，样式规则会直接应用到此组件的根元素上
• 在实例中使用v-bind绑定style
  • 与class中的类似，其绑定的CSS名称可使用驼峰命名或短横分隔命名
  • Vue会自动给特殊的CSS属性名称增加前缀
• 在实例中使用v-on绑定数据，实现事件监听，其绑定的数据为methods属性中的函数，可以简写为@（语法糖）

分隔符：

• Vue中数据绑定的语法被设计为可配置的。
• Vue.config是一个包含Vue的所有全局配置的对象。
• 可以在Vue.config中配置绑定的语法，在Vue实例化之前修改其中的属性。
• 源码中（src/config.js）:let delimiters = ['{{','}}']；let unsafeDelimiters = ['{{{','}}}']
• 所以在实例化前可以使用Vue.config.delimiters和Vue.config.unsafeDelimiters来更改分隔符