vue3.0 CLI - 2.4 - 新組件 Forms.vue 中學(xué)習(xí)表單
我的 github 地址 - vue3.0Study - 階段學(xué)習(xí)成果都會建立分支。
新組件 - 新路由 Forms.vue ( 下面僅介紹如何創(chuàng)立, 不進行介紹 ) ：
<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>
新建路由 ( 在 router.js 中 )：
import Forms from './views/Forms.vue'
export default new Router({
routes: [
{ path: '/', .......},
{
path: '/form',
name: 'forms',
component: Forms
},
{ path: '/about', ......}
]
})
這樣就建立新的路由，這塊我建立了新的 git commit。
注意：組件名稱盡量滿足以下要求：1、勿采用 HTML 標(biāo)簽名；2、勿采用 vue 內(nèi)部保留的名稱如 slot ( 插槽 )、partial、component等。3、以字母開頭。更加詳細(xì)的組件命名內(nèi)容請參見：https://cnodejs.org/topic/5816aabdcf18d0333412d323
文本表單
貼個代碼，具體的使用方法不多介紹：
<template><div class="form">
<input v-model="message1" placeholder="單行文本">
<p>單行文本: {{ message1 }}</p>
<span>多行文本:</span>
<p>{{ message2 }}</p>
<textarea v-model="message2" placeholder="多行文本"></textarea>
</div></template>
<script>
export default {
name: 'forms', // eslint-disable-next-line
data: function () { return {
message1: '',
message2: '差值' // eslint-disable-next-line
} }
}
</script>
需要注意的是：<textarea v-model="message2" placeholder="多行文本">{{ someProp }}</textarea> 中的紅色部分無效。
選擇框
<label for="cd" style="color:green">單選框：</label>
<input type="checkbox" id="cd" v-model="checked1">
<label for="cd">{{ checked1 }}</label>
<div>
<label for="jack" style="color:green">復(fù)選集合：</label>
<input type="checkbox" id="name1" value="章三" v-model="checkedNames">
<label for="name1">章三</label>
<input type="checkbox" id="name2" value="里斯" v-model="checkedNames">
<label for="name2">里斯</label>
<input type="checkbox" id="name3" value="王五" v-model="checkedNames">
<label for="name3">王五</label>
<br>
<span>所選的人有: {{ checkedNames }}</span>
</div>
<div>
<label style="color:green">單選集合：</label>
<input type="radio" id="nan" value="男" v-model="picked">
<label for="nan">男</label>
<input type="radio" id="nv" value="女" v-model="picked">
<label for="nv">女</label>
<br>
<span>性別是: {{ picked }}</span>
</div>
<div>
<label style="color:green">單選下拉框：</label>
<select v-model="selected1">
<option disabled value="">請選擇</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>選擇的是: {{ selected1 }}</span>
</div>
<div>
<label style="color:green">多選下拉框：</label>
<select v-model="selected2" multiple style="width: 50px;">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>選擇的是: {{ 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
} }
}
注意：盡管有的選擇框，無須在 data 屬性中也聲明同樣的屬性，但別這么做，任何選擇框的屬性，都應(yīng)該在 data 聲明該屬性。
對于多選框，也可以采用 v-for 來循環(huán)顯示，讀者可自行實驗。
值綁定
上面介紹那些選擇框，屬性綁定的默認(rèn)的值。對此先來看看下面這個例子：
<input type="checkbox" id="cd" v-model="checked1">
<label for="cd">{{ checked1 }}</label>
<input
type="checkbox"
id="cd1"
v-model="checked11"
true-value="有效"
false-value="無效"
>
<label for="cd1">{{ checked11 }}</label>
上面的例子，是系統(tǒng)默認(rèn)的，選中之后 checked1 是 true。下面就是修改了選中之后，屬性 checked11 對應(yīng)的值，也就是【有效】。
再比如：<label style="color:green">綁定到a：<input type="radio" v-model="pick" v-bind:value="a"></label>
其中 v-bind:value="a" 意思：選中之后，data.pick = data.a 。在 js 中 data 必須要設(shè)置這兩個屬性，且 a 要有初始值。
可以綁定到對象：<label style="color:green">綁定到對象：<input type="radio" v-model="pick1" v-bind:value="{a:1}"></label>
也可以：<label style="color:green">綁定到對象：<input type="radio" v-model="pick1" v-bind:value="obj"></label>
對于所有的上面介紹的表單，都可以采用這種值綁定，限于篇幅，不一一介紹。
最后還有 - 修飾符
.lazy .number .trim
.lazy 改變 input 和 textarea 輸入框的更新模式。上面的兩個輸入框的例子，都是在敲鍵盤一邊輸入一邊更新；加入這個之后，變成失去焦點才會更新。
.number 則是將強制輸入轉(zhuǎn)換為 Number 類型。
.trim 去掉輸入的字符串空格 ( 注意：加入之后，不但首尾的空格會去掉，中間部分連續(xù)多個空格會替換為單個空格 )。
比如如下例子： <textarea v-model.trim="message2" placeholder="多行文本"></textarea>
關(guān)于組件內(nèi)部的基礎(chǔ)功能 ( 表單、指令、綁定、屬性 ) 已經(jīng)簡單了解熟悉，深入的理解需要在運用過程中不斷加深。后面的學(xué)習(xí)將進一步理解 MVC 框架的核心概念之一 【組件】。
總結(jié)
以上所述是小編給大家介紹的vue3.0 CLI - 2.4 - 新組件 Forms.vue 中學(xué)習(xí)表單 ，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)列表固定列滾動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
本篇文章主要介紹了VUE 全局變量的幾種實現(xiàn)方式，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
vue實現(xiàn)監(jiān)聽數(shù)值的變化，并捕捉到
這篇文章主要介紹了vue實現(xiàn)監(jiān)聽數(shù)值的變化，并捕捉到問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue-cli3.0 特性解讀,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
這篇文章主要介紹了vue?element如何添加遮罩層問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了Vue打包路徑配置過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
vue項目打包后提交到git上為什么沒有dist這個文件的解決方法
這篇文章主要介紹了vue項目打包后提交到git上為什么沒有dist這個文件的解決方法,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-09
這篇文章主要介紹了vue日歷/日程提醒/html5本地緩存功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
vue中實現(xiàn)在外部調(diào)用methods的方法(推薦)
下面小編就為大家分享一篇vue中實現(xiàn)在外部調(diào)用methods的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了vue build錯誤異常的解決方法 ，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04