Vue表單實(shí)例代碼
什么是 Vue.js？
Vue.js 是用于構(gòu)建交互式的 Web 界面的庫(kù)。
Vue.js 提供了 MVVM 數(shù)據(jù)綁定和一個(gè)可組合的組件系統(tǒng)，具有簡(jiǎn)單、靈活的 API。
Vue.js 特點(diǎn)
簡(jiǎn)潔： HTML 模板 + JSON 數(shù)據(jù)，再創(chuàng)建一個(gè) Vue 實(shí)例，就這么簡(jiǎn)單。
數(shù)據(jù)驅(qū)動(dòng)： 自動(dòng)追蹤依賴(lài)的模板表達(dá)式和計(jì)算屬性。
組件化： 用解耦、可復(fù)用的組件來(lái)構(gòu)造界面。
輕量： ~24kb min+gzip，無(wú)依賴(lài)。
快速： 精確有效的異步批量 DOM 更新。
模塊友好： 通過(guò) NPM 或 Bower 安裝，無(wú)縫融入你的工作流。
gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson11
一 vue表單
實(shí)在是太簡(jiǎn)單了,直接來(lái)個(gè)例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue表單</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="test">
<!--輸入框-->
<input type="text" v-model="msg"> <br />
<!--單選框-->
<input id="mycb1" type="radio" v-model="choose1">
<label for="mycb1">{{choose1}}</label>
<!--復(fù)選框-->
<input id="mycb2" type="checkbox" v-model="choose2">
<label for="mycb2">{{choose2}}</label>
<!--Select-->
<select v-model="selected">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>選中: {{ selected }}</span>
</div>
<script type="text/javascript">
var vm = new Vue({
el: ".test",
data: {
msg: '我是文本',
choose1: false,
choose2: false,
selected:''
}
})
</script>
</body>
</html>
以上所述是小編給大家介紹的Vue表單實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
- require.js+vue開(kāi)發(fā)微信上傳圖片組件
- Vue.js 2.0 移動(dòng)端拍照壓縮圖片上傳預(yù)覽功能
- 基于vue+ bootstrap實(shí)現(xiàn)圖片上傳圖片展示功能
- vue2實(shí)現(xiàn)移動(dòng)端上傳、預(yù)覽、壓縮圖片解決拍照旋轉(zhuǎn)問(wèn)題
- vue中用H5實(shí)現(xiàn)文件上傳的方法實(shí)例代碼
- Vue表單驗(yàn)證插件Vue Validator使用方法詳解
- Vue.js每天必學(xué)之表單控件綁定
- Vue.js 表單校驗(yàn)插件
- Vue form 表單提交+ajax異步請(qǐng)求+分頁(yè)效果
- 使用vue構(gòu)建一個(gè)上傳圖片表單
相關(guān)文章
詳解vue項(xiàng)目中實(shí)現(xiàn)圖片裁剪功能
這篇文章主要介紹了vue項(xiàng)目中實(shí)現(xiàn)圖片裁剪功能，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
打通前后端構(gòu)建一個(gè)Vue+Express的開(kāi)發(fā)環(huán)境
這篇文章主要介紹了打通前后端構(gòu)建一個(gè)Vue+Express的開(kāi)發(fā)環(huán)境，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
vue elementUI select下拉框如何設(shè)置默認(rèn)值
這篇文章主要介紹了vue elementUI select下拉框如何設(shè)置默認(rèn)值問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue watch如何深度監(jiān)聽(tīng)數(shù)組每一項(xiàng)的變化
這篇文章主要介紹了vue watch如何深度監(jiān)聽(tīng)數(shù)組每一項(xiàng)的變化問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
下面小編就為大家分享一篇基于Vue渲染與插件的加載順序的問(wèn)題詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
父子組件之間的雙向綁定非常簡(jiǎn)單，但是很多人因?yàn)槭菑腣ue 2+開(kāi)始使用的，可能不知道如何雙向綁定，接下來(lái)通過(guò)本文給大家介紹Vue父子組件雙向綁定傳值的實(shí)現(xiàn)方法,需要的朋友可以參考下2018-07-07
vue路由守衛(wèi)及路由守衛(wèi)無(wú)限循環(huán)問(wèn)題詳析
這篇文章主要給大家介紹了關(guān)于vue路由守衛(wèi)及路由守衛(wèi)無(wú)限循環(huán)問(wèn)題的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
vue的表單數(shù)據(jù)收集案例之基本指令和自定義指令詳解
收集表單數(shù)據(jù)可以使用這個(gè)v-model實(shí)現(xiàn)這個(gè)數(shù)據(jù)的綁定，但是在有些輸入框中，還需要一些其他的指令搭配這個(gè)v-model指令結(jié)合使用，這篇文章主要介紹了vue的表單數(shù)據(jù)收集，基本指令和自定義指令,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了Vue 計(jì)算屬性 computed，一般情況下屬性都是放到data中的，但是有些屬性可能是需要經(jīng)過(guò)一些邏輯計(jì)算后才能得出來(lái)，那么我們可以把這類(lèi)屬性變成計(jì)算屬性，下面我們來(lái)看看具體實(shí)例,需要的朋友可以參考一下2021-10-10
詳解使用element-ui table組件的篩選功能的一個(gè)小坑
在element ui 框架中，對(duì)于table框架，有一個(gè)篩選功能，這篇文章主要介紹了詳解使用element-ui table組件的篩選功能的一個(gè)小坑，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-11-11