TML:完成頁面的內容展示
CSS:完成頁面樣式的控制,美化頁面,完成頁面的布局。
表單:用于采集用戶輸入的數據。用于和服務器進行交互。
form:用于定義表單的。可以定義一個范圍(代表用戶采集數據的范圍)
屬性:action:指定提交數據的url(指的就是把數據提交到哪里)
method:指定提交方式
分類:一共有7種,2種比較常用。
get:1.請求參數會在地址欄顯示
2.請求參數的長度是有限制的。
3.請求不安全
post:1.請求參數不會在地址欄顯示,會封裝在請求體中。
2.請求參數的長度沒有限制
3.較為安全
表單里面的數據要想被提交,必須指定它的name屬性
表單項標簽
input:可以通過type屬性值,改變元素展示的樣式。
type屬性:text:文本輸入框,默認值
placeholder:指定輸入框的提示信息,當輸入框的內容發生變化,會自動情況提示信息。
password:密碼輸入框
radio:1.單選框(要想讓多個單選框實現單選的效果,則多個單選框的name屬性值必須一樣)
2.一般會給每一個單選框提供value屬性,指定其被選中后提交的值。
3.checked屬性可以指定默認值
checkbox:復選框:
1.一般會給每一個單選框提供value屬性,指定其被選中后提交的值。
2.checked屬性可以指定默認值
file:文件選擇框
hidden:隱藏域,用于提交一些信息
按鈕:
submit:提交按鈕。可以提交表單
button:普通按鈕
image:圖片提交按鈕
src屬性指定圖片的路徑
label:指定輸入項的文字描述信息
注意:lable的for屬性一般會和input的id屬性值對應。如果對應了,點擊lable區域,會讓input輸入框獲取焦點。
select:下拉列表
子元素:option,指定列表項
textarea:文本域
ue3從2020年9月發布到現在也有3年多的時間,這期間相信各大企業先后陸續都會在新項目的選擇上從Vue2轉到了Vue3開發,原因毫無疑問兩個方面的改變性能+組合式API的變化,性能提升暫且不談后續有空我會單獨說一下性能方面的,也并非講組合式API的用法好處,本文重點要討論的一個地方是關于<script setup>用法問題。 <script setup> 是什么? 有什么用? 在vue的官網中是這么寫的
添加圖片注釋,不超過 140 字(可選)
網中寫了這樣的一個示例(官網中主要展示的是組合式API與Option API的區別)
<script setup>
import { ref, onMounted } from 'vue'
// 響應式狀態
const count = ref(0)
// 用來修改狀態、觸發更新的函數
function increment() {
count.value++
}
// 生命周期鉤子
onMounted(() => {
console.log(`The initial count is ${count.value}.`)
})
</script>
<template>
<button @click="increment">Count is: {{ count }}</button>
</template>
其中第一行代碼的setup就是一個語法糖的使用,那么如果沒有加入setup關鍵字的話應該如何寫呢?
<script>
import { ref, onMounted } from 'vue'
export default {
setup () {
// 響應式狀態
const count = ref(0)
// 用來修改狀態、觸發更新的函數
function increment() {
count.value++
}
// 生命周期鉤子
onMounted(() => {
console.log(`The initial count is ${count.value}.`)
})
return {
count
}
}
}
</script>
<template>
<button @click="increment">Count is: {{ count }}</button>
</template>
看起來是不是前者簡便了一些,少寫了export default也不再需要在setup方法中return,一共8行代碼,隨著<template>模板中的變量越多代return出去的代碼也會越多,通常一個業務組件中大約是10~30行代碼 <script setup>的得與失 使用setup標識的好處 如前面所說,節約代碼,不需要在setup方法內使用return返回變量即可在template中直接使用 作為<script setup>使用的代價失去了什么? 在講這方面之前我認為有必要先,拋出一個觀點,是否越越簡潔的代碼就越好?顯然我是不這么認為的,關于這點不僅僅體現在這一方面,后期可以單獨針對這一點再舉個例子講一下,當前只針對setup單獨討論,在討論這個問題之前我們需要對一下幾個概念有一個清晰的認識。 通常我們在Vue中使用引入局部組件?
<script>
import componentA from '組件路徑'
export default {
components: {
// 完成注冊
componentA
}
}
</script>
<template>
<div>
<!--完成使用-->
<componentA></componentA>
</div>
</template>
想必這幾行代碼使用,早已深深刻入每一個使用Vue開發的人的DNA了。不知大家是否有想過嘗試過通過console.log(componentA)在控制臺輸出一下componentA組件的本質是何物,或者他應該是何物? 我想了解這一點是比較重要的,或許他不影響著我們開發,直接按固定的套路import接收一個固定的變量,固定的寫法,就能實現組件注冊并實現業務邏輯開發,但作為一個開發人員,如果連每天都在使用的東西都不了解,我覺得多少都是有些問題的。 關于這一點實際上就跟Vue本身沒多大關系的,這涉及到的實際上就是模塊化方法的知識。 js的ES6模塊化的一些概念 關于模塊化的作用在這里不做過多的敘述,直接說最終使用上的一個規則,網上可能有各種各樣的說法,這里我得到叫法可能跟網上有所不同,但語法規則上是一樣的,大家可以自行去網上了解。 導出
// 非默認導出,他可以有多個,不可匿名
export const a = 'a'
export const b = 'b'
// 默認導出,可以匿名
export default ‘c’
導入
// 導入非默認導出變量,導出的變量名必須跟導出相同
import { a } from '導出文件地址'
// 導入默認導出變量,默認導出變量名可以自定義,因為導出是匿名
import ccccc from '導出文件地址'
// 全量導入,會將默認導出與非默認導出一起合成一個大對象返回,如果是默認導出,那么key值就是default
import * as all from '導出文件地址'
console.log(a)
// 輸出 'a'
console.log(ccccc)
// 輸出 'c'
console.log(all)
// 輸出對象 { a: 'a', b: 'b': default: 'c' }
回到最開始的時候寫的案例組件,如下
<script>
import { ref, onMounted } from 'vue'
export default {
setup () {
// 響應式狀態
const count = ref(0)
// 用來修改狀態、觸發更新的函數
function increment() {
count.value++
}
// 生命周期鉤子
onMounted(() => {
console.log(`The initial count is ${count.value}.`)
})
return {
count
}
}
}
</script>
<template>
<button @click="increment">Count is: {{ count }}</button>
</template>
很顯然componentA就是<script>里面的export default所導出的整個對象,到此也解釋了為何我不推薦寫<script setup>,因為本應該能能基于我們更好理解性質的代碼被直接忽略了,這是由于通常我們使用vue-cli開發,內部集成了webpack里面的其中一個loader,也就是vue-loader幫我們處理了這些事情。 老好人vue-loader 使用腳手架開發時候,我們不難發現在package.json里面需要依賴vue-loader。 什么?你說沒有? 那是因為官方提供的腳手架實際上不是直接依賴vue-loader,而是依賴了@vue/cli-service然后再這個包內部又依賴了vue-loader,去node_modules內部找到這個包查看引用不難發現這點。 那么vue-loader幫我們做了什么? js模塊化的局限性及解決辦法 我們所熟悉的模塊化實際上只支持兩種文件js,json而.vue文件實際不難理解,因為他并不是純js代碼。 那么import導入時候肯定是不知道導出的變量是啥,哪怕之前所說的componentA實際上export default這些代碼也是在.vue文件內的一個<script>內部的代碼,我們所熟悉的能直接這么寫的文件恐怕只有.html文件,在瀏覽器的時候他認識這個標簽。 但.vue憑什么理所應當就認識?里面還有<template>作為類html的模板以及<style>作為容納css的標簽,從我們最開始理解的前端三劍客html,css,js,這似乎是一件不被理解的事情。 因此vue-loader實際上就相當于是認識這個.vue的翻譯官,它的作用就是將.vue文件轉換成.js文件,這樣就能解決了模塊導入的局限性。 vue-loader針對.vue文件做了多少處理 關系這點還是挺多細節的,在這里不做過多解釋,有機會可以單獨寫一篇講一下,這里只做簡單解釋,就是將<template>轉換成導出的對象中的render方法,將<style>轉換成js語法,比如通過document.createElement創建<style>標簽,再通過document.body.appendChild插入到dom中,這樣一來不就是純js代碼了。 那么回歸到最初的問題,很顯然 <script setup>就是在這個過程中做了一些代碼的節約,從而讓我們可以少寫了這幾行代碼。 可以簡單的理解為,我們不用親自寫這些代碼。但是vue-loader在編譯之后還是給我們加上了這些代碼,這其中也包括了return出去的變量,所以才可以直接在模板中使用。 總結使用<script setup>代價到底失去了什么
<script>
import { ref, onMounted } from 'vue'
export const defaultOptions = {
count: '0'
}
export default {
setup () {
// 響應式狀態
const option = ref(defaultOptions)
return {
option
}
}
}
</script>
<template>
<div>{{ option.count }}</div>
</template>
如上述這類代碼除了export default以外還可以使用非默認導出export導出變量defaultOptions,當然這點幾乎無關痛癢,也并非是我不推薦的原因。 最主要的原因是,經過上述的說法,如果對于js 模塊化有足夠的理解,那么我認為從代碼閱讀性質來說無疑是更好的,因為vue-loader將這一部分不該做的事情都做了,回想Vue2實際這些代碼都是不可忽略的,但反而因為如此,他能更接近js本質上的一些東西,我認為是不可忽略的。 其中return返回的變量,我認為其實從某種角度上,更能直觀讓你看到<template>上到底使用了那些變量,方法,計算屬性等。 總結 使用<script setup>弊大于利 而對于相對于少這一點點代碼來說實際上,我認為實際上并不占用項目太多的代碼量,但會換來更好的代碼閱讀性。
單的作用:用來收集用戶的信息。
提示信息: 說明性的文字,用于提示用戶進行填寫和操作。
表單控件:包含了具體的表單功能項,如文本框、密碼框、單選框、復選框、提交按鈕、重置按鈕等。
表單域:相當于一個容器,用來容納所有的表單控件和提示信息,可以通過它定義處理表單數據提交的url地址,以及數據提交到服務器的方法。如果不定義表單域,表單中的數據就無法傳送到后臺服務器。
<input />標簽為單標簽,type屬性為input標簽最基本的屬性,取值有多種,用于指定不同的標簽類型。除了type屬性之外,<input />標簽還可以定義很多其他的屬性:
文本框 <input type="text" value="默認值"/>
密碼框 <input type="password" />
單選按鈕組
<input type=“radio” name=“ral” />男
<input type=“radio” name=“ral” checked=“checked”/>(默認選中)女
<!--*disabled="disabled" (禁用) * checked="checked" (默認選中)-->
復選框組
<input type="checkbox" name="" />
<input type="checkbox" name="" disabled="disabled" />
按鈕組:
空按鈕 <input type="button" value="按鈕內容" />
提交按鈕 <input type="submit" value="按鈕內容" />
重置按鈕 <input type="reset" value="按鈕內容" />
圖片按鈕 <input type="image" src='bg.png' />
文件按鈕 <input type="file" />
label 標簽為 input 元素定義標注。
<label>
<input type="text" value="">
</label>
<label for="name">姓名</label>
<input type="text" id="name" value="">
如果需要輸入大量的信息,則需要用到<textarea></textarea>標簽。textarea控件可以創建多行文本輸入框,語法:
<textarea cols="每行中顯示的字符數" rows="顯示的行數">
文本信息
</textarea>
<select>
<option>選項1</option>
<option selected>選項2</option>
<option>選項3</option>
...
</select>
關于表單的第一節課,我們講過表單由三部分組成:表單控件(input控件,select、textarea、button)、提示信息、表單域。
在HTML中,form標簽用于定義表單域,即創建一個表單,用來收集和傳遞用戶的輸入信息,指定提交到的服務器,以及提交方式。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。