Vue学习计划（二）

Vue Day2

事件修饰符

等到使用时再查询相应的东西即可

有阻止继续传播的修饰符.stop；取消默认事件的修饰符.prevent；修饰符可以串联使用；.capture是由内部元素出发的事件现在此处理，然后才交由内部元素处理，此过程为捕获事件；事件不是内部触发的.self，只有自身元素触发时才会触发该函数；

注：使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

按键修饰符

v-on:keyup拼接上下面的按键码别名，就可以实现在按下按键松开以后会触发事件

• .enter
• .tab
• .delete (捕获“删除”和“退格”键)
• .esc
• .space
• .up
• .down
• .left
• .right

系统键

• .ctrl
• .alt
• .shift
• .meta

.exact修饰符

允许控制系统修饰符组合触发的事件

指令v-model

当使用复选框的时候，将同个栏目下的复选框的v-model设置成同一个变量

多个复选框，绑定到同一个数组：

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>

单选框也是设置成相同的变量，但是变量的值只会是选中的单个值！

对于选择框也是雷同复选框和单选框的操作！

<select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>

<select v-model="selected" multiple style="width: 50px;">
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>

# 其中selected是选中的结果，单选只有一个元素，复选框则是一个数组！

值绑定

单选框选中，那么绑定的数据就是对应的value的值，复选框选中对应上面的model的值为布尔值true，下拉框则是将select上面绑定的值赋值为选中的对应option

<!-- 当选中时，`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a">

<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle">

<!-- 当选中第一个选项时，`selected` 为字符串 "abc" -->
<select v-model="selected">
    <option value="abc">ABC</option>
</select>

修饰符

.lazy

在输入框的值进行修改时，不会马上更改对应的数据内容，而是等到change时间触发时才去修改对应的值

.number

将用户输入的值转化成number类型，而不是变成字符串

.trim

直接过滤用户输入的内容中首尾的空白字符串