最近打算复习vue的知识，只是为了总结一个注意事项。

插入文字

基本用法

span text : { { text } }/span span v-text=' text '/span这属于指令li data-id='{{id}}'/li有时候只需要渲染数据一次，后续的数据变化就不再关心了，可以通过" * "来实现

SpanText:{{*text}}/span如果是html片段，可以表示如下

Span v-html='text'/span此表达式属于指令spanText:{{{text}}}/span

表达式是各种数值、变量和运算符的综合

{{美分/100 }} {{真的吗？无效的1:0示例{ } { {示例。拆分('，')}}

{{var logo=' ddfe'}} {{if (true)返回' ddfe'}}添加过滤器，允许过滤器串联，还支持传入参数

{ {示例| touppercase } } { {示例| filtera | filterb } } { {示例| filter a b}}分隔符

Vue.config是一个对象，包含了Vue.js的所有全局配置，在Vue实例化之前可以修改其属性

分隔符

Vue.config .分隔符=[“%”、“%”]；如果修改了默认分隔符，文本插值中的语法{{example}}将变为%example%

非联邦限制

vue . config . unsafedlimiters=[' $ '，' $ ']；如果修改了默认的HTML插值分隔符，则HTML插值的语法将从{ {示例}}变为示例示例示例

说明

V-if可以根据表达式的值生成或移除DOM中的一个元素。支持模板语法，惰性语法——如果初始渲染条件为假，则不做任何事情，当条件第一次为真时，将开始本地编译。v-show可以根据表达式的值显示或隐藏HTML元素。不支持模板语法。V-if的切换消耗较高，而v-show的初始渲染消耗较高，因此如果需要频繁切换，最好使用v-show；如果运行时条件不太可能改变，最好使用v-if。它必须遵循v-if或v-show，并充当v-else v-model的函数

用于在表单控件元素上创建双向数据绑定，如输入、选择、文本、CheckBox、单选等。

输入类型=' text ' v-modal=' data . name ' placeholder=' '/v-modal可以添加多个参数number，lazy和debook

v-用于数据重复渲染指令

Vue.js 1.0.17和更高版本支持分隔符；Vue.js 0.12.8及更高版本支持In分隔符。

Li v-for=' items in items ' class=' item-{ $ index } } ' { { $ index } }-{ { item。name}}/liv-for可以与Vue.js提供的内置过滤器和排序数据一起使用

(1)筛选依据

语法：筛选依据搜索关键字[在数据关键字中…]

用法：

输入v-modal=' searchtext ' ul Li v-for=' user in users |按' name ' ' { { name } } '中的search text筛选/li/ul在输入框中输入姓名，ul data将根据输入值在用户的姓名字段中筛选出我们想要的信息并显示出来。

(2)订购方

语法：orderBy sortKey [reverseKey]

用法：

ul Li v-for=' user | order by field reverse中的用户' {user。name}}/Li/ul根据字段变量表示的标记字段排列ul标记中的数据

v文本

v-text指令可以更新元素的textContent，其效果与{ {小胡子}}相同

v-html

v-html指令可以更新元素的innerHtml，其效果与{ { {小胡子}}}相同

不建议在网站上直接动态渲染任意HTML片段，容易导致XSS攻击。

垂直装订

v-bind指令用于动态地将一个或多个属性或组件属性绑定到表达式，以响应Html属性的更新。V-bind可以缩写为：

img v-bind : src=' http : img src ' img 3360 src=' http : img src '绑定prop时，prop必须在子组件中声明。您可以使用修饰符指定不同的绑定类型。sync-双向绑定，只能用于道具。一次性装订和道具。camel-将绑定属性的名称转换回驼峰命名。它只能用于绑定普通的HTML功能，通常用于绑定以驼峰命名的SVG功能，比如viewBox。

my-component : prop . sync=' SoFtware '/my-component v-on

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

！-方法处理器-按钮v-: click=' dot this '/按钮！-inline语句-button v-: click=' dot this(' hello '，$ event)'/button！-缩写-可以在按钮@ click=' dot this '/button v-on后添加的修饰符：停止呼叫事件。stoppropagation()。防止呼叫事件。preventdefault()。捕获-添加事件侦听时使用捕获模式。仅当事件由侦听器绑定元素本身触发时，才进行自触发回调。{KeyCode|KeyAlias}-仅在指定的键上触发回调。Vue.js提供的键有：[esc:27，tab:9，enter:13，space:32，' delete':[8，46]，up:38，left:37，right:39，down 3:40]

v-ref

在父组件上注册子组件的索引，方便直接访问。不需要表达式，必须提供参数id。可以通过父组件的$refs对象访问子组件。

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

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

垂直el

为DOM元素注册一个索引，这便于通过其实例的els进行访问。您可以通过设置此来访问此元素。带v El : some El的els。您可以通过用v el : some El设置该El来访问该元素。你可以用v-el:some-el设置这个. els.someEl。

span v-El : msg hello/span v-El : other-msg world/span通过此获取响应的DOM元素。$els:

这个。$ els . msg . text content//-' hello ' this。$ els . other msg . textcontent///“world”v-pre

编译时跳过当前元素及其子元素。它可以用来显示原来的小胡子标签。在没有指令的情况下跳过大量节点将加快编译速度。

v形斗篷

v-斗篷指令保留在元素上，直到相关实例完成编译。与CSS[v-斗篷]{display:none}一起使用时，该指令可以隐藏未编译的小胡子标记，直到实例准备就绪，否则，在呈现页面时，用户可能会先看到小胡子标记，然后看到编译后的数据。

div v-斗篷{{message}} /div我们来看看vue插值表达式{{}}

Vue提供了一个v-斗篷指令，它被绑定到元素，直到相关的实例完成编译。

[v形斗篷] {style:display3360none}与v形斗篷一起使用时隐藏Mustach标签

直到实例准备好。

具体指http://vuejs.org.cn/api/#v-cloak

摘要

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