diff --git "a/\346\270\270\346\265\267\346\236\227/2021-06-05-vue.md" "b/\346\270\270\346\265\267\346\236\227/2021-06-05-vue.md"
new file mode 100644
index 0000000000000000000000000000000000000000..5bc30005f09ec2e56ba7c9b019a72a2cb0d8618f
--- /dev/null
+++ "b/\346\270\270\346\265\267\346\236\227/2021-06-05-vue.md"
@@ -0,0 +1,61 @@
+# 表单输入绑定
+
+
+### 绑定的属性和事件
+
+1. v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件：
+
++ text和textarea元素使用value属性和input事件。
++ checkbox和radio使用checked属性和change事件。
++ select字段将value作为prop并将change作为事件。
+
+2. input绑定
+
+```
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>vuedemo</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+</head>
+<body>
+ 
+<div id="app">
+    <input v-model="message" placeholder="请输入message值...">
+    <p>message值：{{ message }}</p>
+</div>
+ 
+<script>
+    new Vue({
+        el: '#app',
+        data: {
+            message: '改我'
+        }
+    });
+</script>
+</body>
+</html>
+```
+
+3. 修饰符
+```
+ .lazy：
+在默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加lazy修饰符，从而转变为使用change事件进行同步：
+
+
+<!-- 在“change”时而非“input”时更新 -->
+<input v-model.lazy="msg" >
+.number：
+如果想自动将用户的输入值转为数值类型，可以给v-model添加number修饰符：
+
+
+<input v-model.number="age" type="number">
+这通常很有用，因为即使在type="number"时，HTML输入元素的值也总会返回字符串。如果这个值无法被parseFloat()解析，则会返回原始的值。
+
+.trim：
+如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：
+
+
+<input v-model.trim="msg">
+```
\ No newline at end of file
