[JavaScript知识库]2021-10-14 Vue基础知识点汇总（一）

一、模板语法

<span>Message: {{ msg }}</span>

<span v-html="rawHtml"></span>

<div v-bind:id="dynamicId"></div>

<a v-on:click="doSomething">...</a>

<div>{{ number + 1 }}</div>???

二、事件三要素渲染

? ? ? 三、事件常见修饰符

<form v-on:submit.prevent="onSubmit"></form>

常见修饰符如下

.stop? 停止事件冒泡?

.prevent? 阻止事件默认行为

.capture ? 在事件捕获阶段执行事件处理函数

.self ? 只当在 event.target 是当前元素自身时触发处理函数

.once ? 事件处理函数执行一次后解绑

.passive ? 滚动事件的默认行为 (即滚动行为) 将会立即触发 ，一般与scroll连用，能够提升移动端的性能

四、表单输入绑定

1. 单行文本框

<input v-model="message" placeholder="edit me">

2. 多行文本框

<textarea v-model="message" placeholder="multiple lines"></textarea>? ?//不经常用

3. 复选按钮

<input type="checkbox" value="Jack" v-model="checkedNames">

<input type="checkbox" value="John" v-model="checkedNames">

4. 单选按钮

<input type="radio"? value="One" v-model="picked">

<input type="radio" value="Two" v-model="picked">

5. 下拉菜单

<select v-model="selected">

? <option disabled value="">请选择</option>

? <option>A</option>

? <option>B</option>

</select>

绑定能力加强

使用修饰符可以增加表单绑定能力

1. lazy

默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步。可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步

输入后更新

<input v-model.lazy="msg">

2. number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符

<input v-model.number="age" type="number">

3. trim

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符

<input v-model.trim="msg">