vue笔记（1）——插值总结

• 文本插值

<p>{{ text }}</p>
<p v-text="text"></p>
<p data-id="{{ id }"></p>
<p>{{ *text }}</p>  // "*"是只渲染一次数据，后续数据变化不再关心

• html插值

// content: '<p>http://www.yuki.kim</p>'
<div>{{{ content }}</div>
<div v-html="content"></div>

注意：vue指令和自身特性内饰不可以插值的

• 表达式

{{ true? 1 : 0 }}
{{ str.split(",") }}
{{ num/100 }}
{{ str | toUpperCase }}

• 指令

v-if   v-bind  v-on.....

• 分隔符
  有时候会和自己使用的模板语法太类似，比如freemark的模板语法${}，这时候可以选择修改vue分隔符。

// 修改文本插值分隔符。变成<%text%>。
Vue.config.delimiters = ["<%" , "%>"]
// 修改html分隔符。变成<$html$>。
Vue.config.unsafeDelimiters = ["<$" , "$>"]