vue.js 数据绑定

当数据发生变化时,自动更新视图

1.1语法

1.1.1插值

  1.最基本形式:文本插值,即{{text}},因其类似于Mustache,故称为Mustache标签

  2.因数据与视图相关联,每次数据发生变化,视图就会被渲染,要想只渲染一次,使用{{*text}}

  3.上文中text被当做字符串来处理,若想当成html形式,则需要使用{{{html}}}

  4.Mustache标签也可放在html标签内,如

  <li data-id="{{id}}"></li>

1.1.2表达式(JavaScript表达式和过滤器(0或多个)组成)

  1.{{example | toUpperCase}}

1.1.3指令

  指令是带有v-前缀的特殊特性,值为绑定表达式(JavaScript表达式和过滤器(0或多个)组成),指令的作用是当表达式的值发生变化时,这个变化也反映到DOM上

1.2分隔符

  语法风格可以配置,即将两个大括号换成其他样式,可在Vue.config中设置

  

let delimiters = ['{{', '}}']//文本插值的分隔符设置
let unsafeDelimiters =  ['{{{', '}}}']//html插值的分隔符设置

 

posted @ 2017-03-28 14:44  绮梦璇玑  阅读(172)  评论(0编辑  收藏  举报