Vue 学习简记
一、插值
V-text:插入文本
V-html:可以插入标签
{{msg}}:插入文本信息
二、条件语句
V-show (适用于只改变一次)
V-if,v-else,v-else-if(适用于可多次改变)
v-for:循环语句,可渲染列表(:key 主键)
v-for
指令需要使用 item in items
形式的特殊语法,其中 items
是源数据数组,而 item
则是被迭代的数组元素的别名。
三、事件
V-on:
缩写:‘@’,参数 event。 可绑定click
可用修饰符
.stop
- 调用event.stopPropagation()
。.prevent
- 调用event.preventDefault()
。.capture
- 添加事件侦听器时使用 capture 模式。.self
- 只当事件是从侦听器绑定的元素本身触发时才触发回调。.{keyCode | keyAlias}
- 只当事件是从特定键触发时才触发回调。.native
- 监听组件根元素的原生事件。.once
- 只触发一次回调。.left
- (2.2.0) 只当点击鼠标左键时触发。.right
- (2.2.0) 只当点击鼠标右键时触发。.middle
- (2.2.0) 只当点击鼠标中键时触发。.passive
- (2.3.0) 以{ passive: true }
模式添加侦听器
V-bind:
缩写 :’:’
修饰符
-
.prop
- 作为一个 DOM property 绑定而不是作为 attribute 绑定。(差别在哪里?).camel
- (2.1.0+) 将 kebab-case attribute 名转换为 camelCase。(从 2.1.0 开始支持).sync
(2.3.0+) 语法糖,会扩展成一个更新父组件绑定值的v-on
侦听器。
v-model:双向绑定
修饰符