2021-10-14 Vue基础知识点汇总（一）

一、模板语法

  文本

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

原始html

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

属性

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

  事件

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

Javascript表达式

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

二、事件三要素渲染

key	元素属性	<input placeholder（提示字）="Enter your username"                                          key="username-input">
index	元素索引	<li v-for= "(value,key,index) in obj（对象）" :key="value"> {{ value}} </li>
value	元素值	<li v-for= "(value,key,index) in obj（对象）" :key="value"> {{ value}} </li>

      三、事件常见修饰符

<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">