From 3d836e7f5dbe2f5ee9e0f9bf3bccf10c926c93bf Mon Sep 17 00:00:00 2001 From: ntepluhina Date: Wed, 15 Jan 2020 18:42:04 +0200 Subject: [PATCH 1/4] feat: added form bindings up to radiobuttons --- src/.vuepress/components/forms-1.vue | 16 ++++++ src/.vuepress/components/forms-2.vue | 18 ++++++ src/.vuepress/components/forms-3.vue | 16 ++++++ src/.vuepress/components/forms-4.vue | 22 +++++++ src/.vuepress/config.js | 21 ++++++- src/guide/forms.md | 86 ++++++++++++++++++++++++++++ 6 files changed, 177 insertions(+), 2 deletions(-) create mode 100644 src/.vuepress/components/forms-1.vue create mode 100644 src/.vuepress/components/forms-2.vue create mode 100644 src/.vuepress/components/forms-3.vue create mode 100644 src/.vuepress/components/forms-4.vue create mode 100644 src/guide/forms.md diff --git a/src/.vuepress/components/forms-1.vue b/src/.vuepress/components/forms-1.vue new file mode 100644 index 0000000000..0df191b1f7 --- /dev/null +++ b/src/.vuepress/components/forms-1.vue @@ -0,0 +1,16 @@ + + + diff --git a/src/.vuepress/components/forms-2.vue b/src/.vuepress/components/forms-2.vue new file mode 100644 index 0000000000..46b694f95b --- /dev/null +++ b/src/.vuepress/components/forms-2.vue @@ -0,0 +1,18 @@ + + + diff --git a/src/.vuepress/components/forms-3.vue b/src/.vuepress/components/forms-3.vue new file mode 100644 index 0000000000..68c69a0654 --- /dev/null +++ b/src/.vuepress/components/forms-3.vue @@ -0,0 +1,16 @@ + + + diff --git a/src/.vuepress/components/forms-4.vue b/src/.vuepress/components/forms-4.vue new file mode 100644 index 0000000000..2d0063f0e5 --- /dev/null +++ b/src/.vuepress/components/forms-4.vue @@ -0,0 +1,22 @@ + + + diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js index e6feb5592e..57d0d9f2a5 100644 --- a/src/.vuepress/config.js +++ b/src/.vuepress/config.js @@ -25,7 +25,24 @@ module.exports = { ], sidebarDepth: 2, sidebar: { - '/guide/': ['installation', 'introduction', 'instance', 'template-syntax'] + '/guide/': [ + { + title: 'Essentials', + collapsable: true, + children: [ + 'installation', + 'introduction', + 'instance', + 'template-syntax', + // 'computed', + // 'class-and-style', + // 'conditional', + // 'list', + // 'events', + 'forms' + ] + } + ] } }, plugins: { @@ -39,4 +56,4 @@ module.exports = { } } } -}; +} diff --git a/src/guide/forms.md b/src/guide/forms.md new file mode 100644 index 0000000000..e9cbdf3f79 --- /dev/null +++ b/src/guide/forms.md @@ -0,0 +1,86 @@ +# Form Input Bindings + +## Basic Usage + +You can use the `v-model` directive to create two-way data bindings on form input, textarea, and select elements. It automatically picks the correct way to update the element based on the input type. Although a bit magical, `v-model` is essentially syntax sugar for updating data on user input events, plus special care for some edge cases. + +::: tip Note +`v-model` will ignore the initial `value`, `checked` or `selected` attributes found on any form elements. It will always treat the Vue instance data as the source of truth. You should declare the initial value on the JavaScript side, inside the `data` option of your component. +::: + +`v-model` internally uses different properties and emits different events for different input elements: + +- text and textarea elements use `value` property and `input` event; +- checkboxes and radiobuttons use `checked` property and `change` event; +- select fields use `value` as a prop and `change` as an event. + +::: tip Note +For languages that require an [IME](https://en.wikipedia.org/wiki/Input_method) (Chinese, Japanese, Korean etc.), you'll notice that `v-model` doesn't get updated during IME composition. If you want to cater for these updates as well, use `input` event instead. +::: + +### Text + +```html + +

Message is: {{ message }}

+``` + + + +### Multiline text + +```html +Multiline message is: +

{{ message }}

+
+ +``` + + + +Interpolation on textareas won't work. Use `v-model` instead. + +```html + + + + + +``` + +### Checkbox + +Single checkbox, boolean value: + +```html + + +``` + + + +Multiple checkboxes, bound to the same Array: + +```html +
+ + + + + + +
+ Checked names: {{ checkedNames }} +
+``` + +```js +new Vue({ + el: '#example-3', + data: { + checkedNames: [] + } +}) +``` + + From 805889d536511b6fbb16f25dcb19dd84d49f4c8d Mon Sep 17 00:00:00 2001 From: ntepluhina Date: Wed, 15 Jan 2020 18:53:30 +0200 Subject: [PATCH 2/4] feat: added radio and select --- src/.vuepress/components/forms-5.vue | 21 ++++++ src/.vuepress/components/forms-6.vue | 21 ++++++ src/.vuepress/components/forms-7.vue | 21 ++++++ src/.vuepress/components/forms-8.vue | 25 ++++++++ src/guide/forms.md | 96 ++++++++++++++++++++++++++++ 5 files changed, 184 insertions(+) create mode 100644 src/.vuepress/components/forms-5.vue create mode 100644 src/.vuepress/components/forms-6.vue create mode 100644 src/.vuepress/components/forms-7.vue create mode 100644 src/.vuepress/components/forms-8.vue diff --git a/src/.vuepress/components/forms-5.vue b/src/.vuepress/components/forms-5.vue new file mode 100644 index 0000000000..4244d0c97c --- /dev/null +++ b/src/.vuepress/components/forms-5.vue @@ -0,0 +1,21 @@ + + + diff --git a/src/.vuepress/components/forms-6.vue b/src/.vuepress/components/forms-6.vue new file mode 100644 index 0000000000..4bebf6074f --- /dev/null +++ b/src/.vuepress/components/forms-6.vue @@ -0,0 +1,21 @@ + + + diff --git a/src/.vuepress/components/forms-7.vue b/src/.vuepress/components/forms-7.vue new file mode 100644 index 0000000000..574fce39e7 --- /dev/null +++ b/src/.vuepress/components/forms-7.vue @@ -0,0 +1,21 @@ + + + diff --git a/src/.vuepress/components/forms-8.vue b/src/.vuepress/components/forms-8.vue new file mode 100644 index 0000000000..a3da617f2d --- /dev/null +++ b/src/.vuepress/components/forms-8.vue @@ -0,0 +1,25 @@ + + + diff --git a/src/guide/forms.md b/src/guide/forms.md index e9cbdf3f79..5ac0022663 100644 --- a/src/guide/forms.md +++ b/src/guide/forms.md @@ -84,3 +84,99 @@ new Vue({ ``` + +### Radio + +```html + + +
+ + +
+Picked: {{ picked }} +``` + + + +### Select + +Single select: + +```html +
+ + Selected: {{ selected }} +
+``` + +```js +Vue.createApp().mount( + { + data() { + return { + selected: '' + } + } + }, + '#example-select' +) +``` + + + +:::tip Note +If the initial value of your `v-model` expression does not match any of the options, the ` + + + + +
+Selected: {{ selected }} +``` + + + +Dynamic options rendered with `v-for`: + +```html +
+ + Selected: {{ selected }} +
+``` + +```js +Vue.createApp().mount( + { + data() { + return { + selected: 'A', + options: [ + { text: 'One', value: 'A' }, + { text: 'Two', value: 'B' }, + { text: 'Three', value: 'C' } + ] + } + } + }, + '#example-select-dynamic' +) +``` + + From 10883c5cd1450484f795e6e060e448d326286e0e Mon Sep 17 00:00:00 2001 From: ntepluhina Date: Wed, 15 Jan 2020 19:12:29 +0200 Subject: [PATCH 3/4] feat: add modifiers --- src/guide/forms.md | 98 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 98 insertions(+) diff --git a/src/guide/forms.md b/src/guide/forms.md index 5ac0022663..3571386c36 100644 --- a/src/guide/forms.md +++ b/src/guide/forms.md @@ -14,6 +14,7 @@ You can use the `v-model` directive to create two-way data bindings on form inpu - checkboxes and radiobuttons use `checked` property and `change` event; - select fields use `value` as a prop and `change` as an event. + ::: tip Note For languages that require an [IME](https://en.wikipedia.org/wiki/Input_method) (Chinese, Japanese, Korean etc.), you'll notice that `v-model` doesn't get updated during IME composition. If you want to cater for these updates as well, use `input` event instead. ::: @@ -180,3 +181,100 @@ Vue.createApp().mount( ``` + +## Value Bindings + +For radio, checkbox and select options, the `v-model` binding values are usually static strings (or booleans for checkbox): + +```html + + + + + + + + +``` + +But sometimes we may want to bind the value to a dynamic property on the Vue instance. We can use `v-bind` to achieve that. In addition, using `v-bind` allows us to bind the input value to non-string values. + +### Checkbox + +```html + +``` + +```js +// when checked: +vm.toggle === 'yes' +// when unchecked: +vm.toggle === 'no' +``` + +:::tip Tip +The `true-value` and `false-value` attributes don't affect the input's `value` attribute, because browsers don't include unchecked boxes in form submissions. To guarantee that one of two values is submitted in a form (e.g. "yes" or "no"), use radio inputs instead. +::: + +### Radio + +```html + +``` + +```js +// when checked: +vm.pick === vm.a +``` + +### Select Options + +```html + +``` + +```js +// when selected: +typeof vm.selected // => 'object' +vm.selected.number // => 123 +``` + +## Modifiers + +### `.lazy` + +By default, `v-model` syncs the input with the data after each `input` event (with the exception of IME composition as [stated above](#vmodel-ime-tip)). You can add the `lazy` modifier to instead sync after `change` events: + +```html + + +``` + +### `.number` + +If you want user input to be automatically typecast as a number, you can add the `number` modifier to your `v-model` managed inputs: + +```html + +``` + +This is often useful, because even with `type="number"`, the value of HTML input elements always returns a string. If the value cannot be parsed with `parseFloat()`, then the original value is returned. + +### `.trim` + +If you want whitespace from user input to be trimmed automatically, you can add the `trim` modifier to your `v-model`-managed inputs: + +```html + +``` + +## `v-model` with Components + +> If you're not yet familiar with Vue's components, you can skip this for now. + +HTML's built-in input types won't always meet your needs. Fortunately, Vue components allow you to build reusable inputs with completely customized behavior. These inputs even work with `v-model`! To learn more, read about [custom inputs](TODO:components.html#Using-v-model-on-Components) in the Components guide. From cd92dd865834ddfaee5c735045dba8b377e2ec82 Mon Sep 17 00:00:00 2001 From: ntepluhina Date: Wed, 22 Jan 2020 19:59:51 +0200 Subject: [PATCH 4/4] fix: added missed comma --- src/.vuepress/config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js index 0c1d8b00b8..e218b68ffa 100644 --- a/src/.vuepress/config.js +++ b/src/.vuepress/config.js @@ -37,7 +37,7 @@ module.exports = { 'computed', 'class-and-style', 'conditional', - 'list' + 'list', // 'events', 'forms' ]