v-for
这是一个指令,只要有v-的就是指令(directive 操作dom )
在vue中可以通过v-for来循环数据的通知循环dom,语法是item in/of items,接收第二个参数是索引 (item,index) of items,还可以循环键值对,第一个参数是value,第二个是key,第三个依然是索引
v-on
在vue中还有v-on来为dom绑定事件,在v-on:后面加上要绑定的事件类型,值里可以执行一些简单javascript表达式:++ – = …
可以将一些方法设置在methods里,这样就可以在v-on:click的值里直接写方法名字可以,默认会在方法中传入事件对象,当写方法的时候加了()就可以传参,这个时候如果需要事件对象,那就主动传入$event
v-on绑定的事件可以是任意事件,v-on:可以缩写为@
为什么在 HTML 中监听事件?
你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。但不必担心,因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上,它不会导致任何维护上的困难。实际上,使用 v-on 有几个好处:
- 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
- 因为你无须在 JavaScript 里手动绑定事件,你的 ViewModel 代码可以是非常纯粹的逻辑,和 DOM 完全解耦,更易于测试。
- 当一个 ViewModel 被销毁时,所有的事件处理器都会自动被删除。你无须担心如何自己清理它们。
模板语法
在vue中,我们使用mustache插值({{}})来将数据渲染在模板中
使用v-once指令可以控制只能插入一次值,当数据变化的时候,模板对应的视图不更新
使用v-html指令可以解析html格式的数据
在html标签属性里不能使用mustache插值,这个时候给元素添加动态属性的时候使用v-bind来绑定属性,可以缩写成:
在使用v-bind绑定class和内联样式的时候,vue做了一些优化,可以使用对象语法和数组的语法来控制
防止表达式闪烁:
-
v-cloak
给模板内的元素添加v-cloak属性后,元素在vue没有加载完的时候就有这个属性,当vue加载完成后这个属性就消失了,所以我们可以给这个属性设置css样式为隐藏
<style>
[v-cloak]{
visibility: hidden;
}
</style>
-
v-text/v-html
v-text会指定将模板内元素的textContent属性替换为指令值所代表的数据,也可以用于防止闪烁
v-html可以解析标签,更改元素的innerHTML,性能比v-text较差 -
v-pre
跳过元素和其子元素的编译过程,可以用来显示mustache