vue 常用指令总结
程序员文章站
2022-05-16 14:56:52
...
v-on
缩写为:@
用法:绑定事件监听器
如:
<button v-on:click="doThis"></button>
等级于
<button @click="doThis"></button>
v-blind
缩写为::
用法:动态地绑定一个或多个特性,或一个组件 prop 到表达式。
如:
<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
等价于
<!-- 缩写 -->
<img :src="imageSrc">
v-model
用法:在表单控件或者组件上创建双向绑定
你可以用 v-model 指令在表单 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。
如:
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
v-once
用法:只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
如:
<!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once>
<h1>comment</h1>
<p>{{msg}}</p>
</div>
<!-- 组件 -->
<my-component v-once :comment="msg"></my-component>
<!-- `v-for` 指令-->
<ul>
<li v-for="i in list" v-once>{{i}}</li>
</ul>
v-for
用法:我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法,items 是源数据数组并且 item 是数组元素迭代的别名。
如:
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})