第一节数据绑定

Posted 2020-08-20

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格式的文本