v-model

基本用法

在表单上使用，用于双向绑定

image.png

实用修饰符

  • lzay修饰符

    1
    2
    <input v-model.lazy="textField"/>
     <p>文本输入框内容:{{textField}}</p>

    只有当用户完成输入，即输入框失去焦点后，段落中才会同步到输入框中最终的文本数据。

  • trim修饰符

    1
    2
    <input v-model.trim="textField"/>
     <p>文本输入框内容:{{textField}}</p>

    将绑定的文本数据的首尾空格去掉。

v-on(@)

基本用法

image 1.png

为html标签绑定事件

事件类型
事件 意义 可用的元素
click 单击事件，当组件被单击时触发 大部分 HTML 元素
dblclick 双击事件，当组件被双击时触发 大部分 HTML 元素
focus 获取焦点事件，例如输入框开启编辑模式时触发 input、select、textarea 等
blur 失去焦点事件，例如输入框结束编辑模式时触发 input、select、textarea 等
change 元素内容改变事件，输入框结束输入后，如果内容有变化，会触发此事件 input、select、textarea 等
select 元素内容选中事件，输入框中的文本被选中时会触发此事件 input、select、textarea 等
mousedown 鼠标按键被按下事件 大部分 HTML 元素
mouseup 鼠标按键抬起事件 大部分 HTML 元素
mousemove 鼠标在组件内移动事件 大部分 HTML 元素
mouseout 鼠标移出组件时触发 大部分 HTML 元素
mouseover 鼠标移入组件时触发 大部分 HTML 元素
Keypdown 键盘按键被按下 HTML 中所有表单元素
keyup 键盘按键被抬起 HTML 中所有表单元素

事件修饰符

  • capture修饰符

    可以将监听事件的实际设置为捕获阶段，示例如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <div @click.capture="click1" style="border:solid red">
         外层
        <div @click.capture="click2" style="border:solid red">
            中层
            <div @click.capture="click3" style="border:solid red">
                点击
            </div>
        </div>
    </div>

    点击最内层元素，控制台输出：

    1
    2
    3
    外层
    中层
    内层

  • stop修饰符

    stop修饰符可以阻止事件的传递，例如：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div @click.stop="click1" style="border:solid red">
         外层
        <div @click.stop="click2" style="border:solid red">
            中层
            <div @click.stop="click3" style="border:solid red">
                点击
            </div>
        </div>
    </div>

    点击最内层元素，控制台：

    1
    内层

  • 其他修饰符
    事件修饰符 作 用
    stop 阻止事件传递
    capture 监听捕获场景的事件
    once 只触发一次事件
    exact 只有精确满足按键的条件才会触发事件（按键组合）
    self 当事件对象的 target 属性是当前组件时才触发事件
    Prevent 禁止默认的事件
    passive 不禁止默认事件
    其他鼠标按键修饰符
    left 鼠标左键（click.left）
    right 鼠标右键
    middle 鼠标中键

  • 系统按键修饰符

    Vue中还提供了一些特殊的系统按键修饰符，这些修饰符是配合其他键盘按键或鼠标按键进行使用的，主要有如下4种：

    ctrl, shift, alt, meta(windows/command)

    示例：

    1
    2
    3

    <div @mousedown. ctrl="mousedown">鼠标按下</div>
    <--! 上面代码的作用是用户按下Ctrl键的同时,再按下鼠标按键才会触发绑定的事件函数。-->
    1
    2
    <input @keyup.alt.enter="keyup"></input> 
    <--! 上面代码的作用是用户按下Alt键的同时,再按回车键才会触发绑定的事件函数。 -->

v-bind(:)

基本用法

为html标签绑定属性值（在html标签内，不能使用插值表达式）

image 2.png