首页 > 代码库 > 第一节数据绑定
第一节数据绑定
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格式的文本
第一节数据绑定