My github address -vue3.0Study - The learning results of stages will be branched.
New Components - New Routing (The following is only an introduction to how to create it, not an introduction):
<template><div class="form">
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
</div></template>
<script>
export default {
name: 'forms', // eslint-disable-next-line
data: function () { return {
d: '' // eslint-disable-next-line
} }
}
</script>
Create a new route (in ):
import Forms from './views/'
export default new Router({
routes: [
{ path: '/', .......},
{
path: '/form',
name: 'forms',
component: Forms
},
{ path: '/about', ......}
]
})
This way I create a new route, and I create a new git commit in this area.
Note: The component name should try to meet the following requirements: 1. Do not use HTML tag names; 2. Do not use names retained by vue such as slot (slot), partial, component, etc. 3. Start with letters. For more detailed component naming content, please refer to:/topic/5816aabdcf18d0333412d323
Text Form
I will post a code, and I won't introduce the specific usage methods:
<template><div class="form">
<input v-model="message1" placeholder="Single-line text">
<p>Single-line text: {{ message1 }}</p>
<span>Multiple lines of text:</span>
<p>{{ message2 }}</p>
<textarea v-model="message2" placeholder="Multiple lines of text"></textarea>
</div></template>
<script>
export default {
name: 'forms', // eslint-disable-next-line
data: function () { return {
message1: '',
message2: 'Difference' // eslint-disable-next-line
} }
}
</script>
It should be noted that: <textarea v-model="message2" placeholder="multi-line text">{{ someProp }}</textarea>The red part in it is invalid.
Select box
<label for="cd" style="color:green">Radio box：</label>
<input type="checkbox" v-model="checked1">
<label for="cd">{{ checked1 }}</label>
<div>
<label for="jack" style="color:green">Selected collection：</label>
<input type="checkbox" value="Chapter 3" v-model="checkedNames">
<label for="name1">Chapter Three</label>
<input type="checkbox" value="Rees" v-model="checkedNames">
<label for="name2">Reese</label>
<input type="checkbox" value="Wang Wu" v-model="checkedNames">
<label for="name3">Wang Wu</label>
<br>
<span>The person selected has: {{ checkedNames }}</span>
</div>
<div>
<label style="color:green">Single choice collection：</label>
<input type="radio" value="male" v-model="picked">
<label for="nan">male</label>
<input type="radio" value="female" v-model="picked">
<label for="nv">female</label>
<br>
<span>Gender is: {{ picked }}</span>
</div>
<div>
<label style="color:green">Single-select drop-down box：</label>
<select v-model="selected1">
<option disabled value="">Please select</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>The selected is: {{ selected1 }}</span>
</div>
<div>
<label style="color:green">Multiple selection drop-down box：</label>
<select v-model="selected2" multiple style="width: 50px;">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>The selected is: {{ selected2 }}</span>
</div>
export default {
name: 'forms', // eslint-disable-next-line
data: function () { return {
checked1: null,
checkedNames: [],
picked: null,
selected1: null,
selected2: [],
message1: null,
message2: null // eslint-disable-next-line
} }
}
Note: Although some selection boxes do not need to declare the same attribute in the data attribute, do not do this. Any attribute of the selection box should declare the attribute in data.
For multi-check boxes, you can also use v-for to display them loop, and readers can experiment on their own.
Value binding
The default values for those selection boxes and attribute bindings are introduced above. Let’s take a look at the following example:
<input type="checkbox" v-model="checked1">
<label for="cd">{{ checked1 }}</label>
<input
type="checkbox"
v-model="checked11"
true-value="efficient"
false-value="invalid"
>
<label for="cd1">{{ checked11 }}</label>
The above example is the system default, and checked1 is true after checking. The following is to modify the value corresponding to the property checked11 after the selected selection, which is [valid].
For example:<label style="color:green">Binding to a: <input type="radio" v-model="pick" v-bind:value="a"></label>
where v-bind:value="a" means: after selecting, = . In js, data must set these two properties, and a must have an initial value.
Can be bound to an object:<label style="color:green">Bind to an object:<input type="radio" v-model="pick1" v-bind:value="{a:1}"></label>
Also:<label style="color:green">Binding to object: <input type="radio" v-model="pick1" v-bind:value="obj"></label>
For all the forms introduced above, this value binding can be used. Due to space limitations, we will not introduce them one by one.
Finally, there is - modifier
.lazy .number .trim
.lazy Changes the update mode of the input and textarea input boxes. The above two input boxes examples are updated while typing on the keyboard; after adding this, it will only be updated if it loses focus.
.number converts the cast input to the Number type.
.trim removes the input string spaces (Note: After adding, not only the spaces at the beginning and end will be removed, but multiple consecutive spaces in the middle will be replaced with a single space).
For example, the following example:<textarea ="message2" placeholder="multiple lines of text"></textarea>
I have been briefly and familiar with the basic functions (forms, instructions, bindings, attributes) within the component, and a deep understanding needs to be continuously deepened during the application process. The subsequent learning will further understand one of the core concepts of the MVC framework [Component].
Summarize
The above is the learning form in vue3.0 CLI - 2.4 - New Components introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!