<span>Text:{{text}}</span> 
<span v-text="text"></span> 这个属于指令
<li data-id="{{id}}"></li>

<span>Text:{{*text}}</span> 

<span v-html="text"></span> 这个属于指令
<span>Text:{{{text}}}</span> 

 {{ cents/100 }}
 {{ true",") }}

{{ var logo= 'DDFE' }}
{{ if(true) return 'DDFE' }}

{{ example | toUpperCase }}
{{ example | filterA | filterB }}
{{ example | filter a b }}

Vue.config.delimiters = ["<%","%>"];

 Vue.config.unsafeDelimiters = ["<$","$>"];

 <input type="text" v-modal="data.name" placeholder="" />

 <li v-for="item in items" class="item-{{$index}}">
 {{$index}}-{{item.name}}
 </li>

 <input v-modal="searchText">
 <ul>
 <li v-for="user in users | filterBy searchText in 'name'">{{name}}</li>
</ul>

<ul>
 <li v-for="user in users | orderBy field reverse">{{user.name}}</li>
</ul>

 <img v-bind:src="/UploadFiles/2021-04-02/imgSrc">

在绑定prop时，prop必须在子组件中声明。可以用修饰符指定不同的绑定类型。
.sync-双向绑定，只能用于prop 

.once-单项绑定，只能用于prop 

.camel-将绑定的特性名字转换回驼峰命名。只能用于普通HTML特性的绑定，通常用于绑定用驼峰命名的SVG特性，比如viewBox。


<my-component :prop.sync="someThing"></my-component>


v-on
v-on指令用于绑定事件监听器。事件类型由参数指定；表达式可以是一个方法的名字或一个内联语句；如果没有修饰符，也可以省略。


 <!--方法处理器-->
 <button v-on:click="doThis"></button>
 <!--内联语句-->
 <button v-on:click="doThis('hello',$event)"></button>
 <!--缩写-->
 <button @click="doThis"></button>


v-on后面可以添加的修饰符：
.stop-调用event.stopPropagation() 

.prevent-调用event.preventDefault() 

.capture-添加事件监听时使用capture模式 

.self-只当事件是从侦听器绑定的元素本身触发时才触发回调 

.{KeyCode|KeyAlias}-只在指定按键上触发回调。Vue.js提供的键有：[esc:27、tab:9、enter:13、space:32、'delete':[8,46]、up:38、left:37、right:39、down:40]
v-ref
在父组件上注册一个子组件的索引，便于直接访问，不需要表达式，必须提供参数id。可以通过父组件的$refs对象访问子组件。 


当v-ref和v-for一起使用时，注册的值是一个数组，包含所有子组件，对应于绑定数组； 


如果v-for使用在一个对象上，注册的值是一个对象，包含所有子组件，对应于绑定对象。


v-el
为DOM元素注册一个索引，方便通过所属实例的els访问这个元素。可以用v"htmlcode">

 <span v-el:msg>hello</span>
 <span v-el:other-msg>world</span>


通过this.$els获取响应的DOM元素：


this.$els.msg.textContent //-> "hello"
this.$els.otherMsg.textContent //-> "world"


v-pre
编译时跳过当前元素和它的子元素。可以用来显示原始的Mustache标签。跳过大量没有指令的节点会加快编译。


v-cloak
v-cloak这个指令保持在元素上直到关联实例结束编译。和css [v-cloak]{display:none}一起使用，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕，否则在渲染页面时，有可能用户会先看到Mustache标签，然后看到编译后的数据。


 <div v-cloak>
 {{message}}
 </div>


下面看下去除vue插值表达式{{}}
vue 提供了v-cloak指令，该指令会绑定在元素上直到关联实例结束编译。
[v-cloak] {style:display:none} 和v-cloak一起使用时，会隐藏Mustach标签
直到实例准备完毕。
具体参考http://vuejs.org.cn/api/#v-cloak


总结
以上所述是小编给大家介绍的Vue插值、表达式、分隔符、指令知识小结，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！