首页 > 代码库 > 第一节数据绑定

第一节数据绑定

1、文本插值的方法:Mustache语法,{{msg}}。

  例如:<span>{{msg}}</span>。

  • 当只需要渲染一次的时候,用*来实现:<span>{{*msg}}</span>
  • 当值是html片段的时候,可以用三个大括号来绑定:msg:"<span>name</span>"  ;    <span>{{{msg}}}</span>
  • 可以绑定标签的属性:<li data-id="{{msg}}"></li>

2、表达式的使用:

  js表达式:{{ msg / 100 }}     ,      {{ true ? 1 : 0 }}

      表达式后面接过滤符:  

      {{ example | toUpperCase}}  , toUpperCase是一个过滤器,是js函数。

      {{ example | toUpperCase | filter }}  ,两个过滤器串联,都要满足。

                 {{ example | filter a b }}  ,a b为过滤器参数,用空格隔开

3、指令:是指带有v-前缀的特殊的表达式。指令的最用是当表达式的值变化时,也反映到DOM上。

  例如:<div v-if="show">DDEE</div>

               <div v-on:click="action"></div>

4、分隔符

  Vue.config 是一个配置对象,包含了Vue.js的所有的全局的配置。

      源码:

    let delimiters = [‘{{‘,‘}}‘]

      let unsafeDelimiters = [‘{{{‘,‘}}}‘]

 

   在Vue实例化之前修改其中的属性:

    Vue.config.delimiters = ["<%","%>"]    //文本插值

           Vue.config.unsafeDelimiters = ["<$","$>"]   //html格式的文本

 

第一节数据绑定