脚手架的搭建，请查看另外一篇日记：https://www.cnblogs.com/Fengge518/p/11837078.html

1：直接代码了

 1 <!DOCTYPE html>

 2 <html lang="en">

 3

 4 <head>

 5     <meta charset="UTF-8">

 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">

 7     <title>Document</title>

 8     <script src="../assets/vue.js"></script>

 9     <script>

10         window.onload = function() { //1 沒有寫加載的函數，導致出不來

11             var app = new Vue({ //2寫錯成 new app去了

12                 el: "#myapp", //3少了一個#號

13                 data: {

14                     uname: "",

15                     upwd: "",

16                     sex: "男",

17                     mylove: [],

18                     youcountry: "",

19                     remark: ""

20                 },

21                 methods: function() {}

22             })

23         }

24     </script>

25 </head>

26

27 <body>

28     <form action="" method="post">

29         <div id="myapp">

30             <div>

31                 <p>你填寫的信息有：姓名：{{uname}}，密碼：{{upwd}}</p>

32                 <p>性別：{{sex}} ,我比較喜歡的蔬菜：{{mylove}}</p>

33                 <p>喜歡旅遊的國家: {{youcountry}},其他備註的信息： {{remark}}</p>

34             </div>

35             <fieldset>

36                 <legend>

37                     您的信息：

38                 </legend>

39                 <div><label>姓名：<input type="text" v-model="uname"/></label></div>

40                 <div><label>密碼：<input type="password" v-model="upwd"></label></div>

41                 <div>

42                     <p>您的性別:</p>

43                     <label>男：<input type="radio" value="男" v-model="sex"></label>

44                     <label>女<input type="radio"  value="女" v-model="sex"></label></div>

45                 <div>

46                     <p>你喜歡吃啥蔬菜：</p>

47                     <label>西紅柿<input type="checkbox" value="西紅柿" v-model="mylove"></label>

48                     <label>苦瓜<input type="checkbox" value="苦瓜" v-model="mylove"></label>

49                     <label>洋蔥<input type="checkbox" value="洋蔥" v-model="mylove"></label>

50                     <label>白菜<input type="checkbox" value="白菜" v-model="mylove"></label>

51                 </div>

52                 <div>

53                     <label>你喜歡去哪個國家旅遊：</label>

54                     <select v-model="youcountry">

55                         <option value=""></option>

56                         <option value="中國">中國</option>

57                         <option value="巴基斯丹">巴基斯丹</option>

58                         <option value="塞爾維亞">塞爾維亞</option>

59                         <option value="朝鮮">朝鮮</option>

60                     </select>

61                 </div>

62                 <div>

63                     <p>備註的信息:</p>

64                     <textarea v-model="remark" id="" cols="30" rows="10"></textarea></div>

65             </fieldset>

66         </div>

67     </form>

68 </body>

69

70 </html>

2：效果截图

Vue学习笔记使用系列一【表单】的更多相关文章

  1. Django学习笔记（五）—— 表单

    疯狂的暑假学习之  Django学习笔记(五)-- 表单 參考:<The Django Book> 第7章 1. HttpRequest对象的信息 request.path         ...

  2. Flutter学习笔记（13）--表单组件

    如需转载,请注明出处:Flutter学习笔记(13)--表单组件 表单组件是个包含表单元素的区域,表单元素允许用户输入内容,比如:文本区域,下拉表单,单选框.复选框等,常见的应用场景有:登陆.注册.输 ...

  3. ng2 学习笔记（二）表单及表单验证

    在上一篇文章中提到了表单,只说了表单的数据绑定,这一篇文章主要讲一下表单验证,为什么把表单单独拿出来学习,主要是因为,表单是商业应用的支柱,我们用它来执行登录.求助.下单.预订机票.安排会议,以及不计 ...

  4. Vue.js 学习笔记 第6章 表单与v-model

    本篇目录: 6.1 基本用法 6.2 绑定值 6.3 修饰符 表单类控件承载了一个网页数据的录入与交互,本章将介绍如何使用指令v-model完成表单的数据双向绑定. 6.1 基本用法 表单控件在实际业 ...

  5. Vue.js学习笔记 第七篇 表单控件绑定

    本篇主要说明表单控件的数据绑定,这次没有新的知识点 文本框 1.普通文本框 <div id="app-1"> <p><input v-model=&q ...

  6. SpringMVC:学习笔记(5)——数据绑定及表单标签

    SpringMVC——数据绑定及表单标签 理解数据绑定 为什么要使用数据绑定 基于HTTP特性,所有的用户输入的请求参数类型都是String,比如下面表单: 按照我们以往所学,如果要获取请求的所有参数 ...

  7. HTML&CSS基础学习笔记1.26-input重置表单

    重置表单 <input>的[type]属性值为"button"的时候表示一个普通的按钮,相当于一个<button>标签. <input>的[ty ...

  8. HTML之学习笔记（九）表单

    html的表单标签是一个系列,用开闭的<form>标签包裹起来的组合.表单的作用是将我们要向服务器提交数据的数据包含起来,然后提交到服务器处理.(使用表单是浏览器提交客户端数据到服务端的方 ...

  9. 【Spring学习笔记-MVC-11--】Spring MVC之表单标签

    一.使用方法 1.要使用Spring MVC提供的表单标签,首先需要在视图页面添加: <%@ taglib prefix="form" uri="http://ww ...

  10. html+css学习笔记 5[表格、表单]

    表格 -- 默认样式重置 表格标签:     table 表格     thead 表格头     tbody 表格主体     tfoot 表格尾     tr 表格行     th 元素定义表头 ...

随机推荐

  1. 关于C#.WinForm 与 WinApi的SendMessage 方法

    介绍: Windows Api 的 SendMessage 该函数将指定的消息发送到一个或多个窗口.此函数为指定的窗口调用窗口程序,直到窗口程序处理完消息再返回.而和函数PostMessage不同,P ...

  2. CF1256A Payment Without Change 题解

    OI生涯打的第一场CF比赛,写篇题解纪念一下吧 ------------可以想到先尽量用面值为1的硬币来凑,然后再用面值为n的硬币来补足.先算出用上所有面值为1的硬币还差多少钱,然后判断用面值为n的硬 ...

  3. SEO外包好还是自己组建团队

    http://www.wocaoseo.com/thread-151-1-1.html       营络营销已成为企业不可忽视的一块大肥肉,很多企业都想进来分一杯羹,但是不少企业苦于缺少过硬的技术,无 ...

  4. js 数组与字符串互相转换

    1.数组转字符串 arr.join() 2.字符串转数组 str.split(',')

  5. zabbix-4.0-监控服务器的ping告警设置

    问题:一直在困惑如果一台服务器的网络发生故障或者断开时,怎么第一时间发现并去排查. 思路:利用zabbix平台监控服务器,监控ping这一项,设置一个报警,并使用脚本去提醒与通知,可使用邮件报警/短信 ...

  6. SSM整合+WebUpload使用（spring+springmvc+mybatis+maven）

      SSM框架整合以及webupload的集成与使用 在项目中最近用到了webupload.js,也方方面面遇到了不少问题,比如上传文件前对表单参数校验,当校验失败不予提交,及在文件上传成功后,选择同 ...

  7. 【Go语言入门系列】（九）写这些就是为了搞懂怎么用接口

    [Go语言入门系列]前面的文章: [Go语言入门系列](六)再探函数 [Go语言入门系列](七)如何使用Go的方法? [Go语言入门系列](八)Go语言是不是面向对象语言? 1. 引入例子 如果你使用 ...

  8. 20190918-03关机重启命令及修改root密码 000 006

    (1)sync   (功能描述:将数据由内存同步到硬盘中) (2)halt (功能描述:关闭系统,等同于shutdown -h now 和 poweroff) (3)reboot (功能描述:就是重启 ...

  9. J2EE之JavaScript(1)

    声明:此博客仅供记录自己的学习记录和随笔,看看就行了,就图一乐!   本篇学习随笔来自JavaScript 菜鸟教程:https://www.runoob.com/js/js-howto.html J ...

  10. oracle之二归档日志

    归档日志 archivelog 5.1 归档和非归档的区别     1)归档会在日志切换时,备份历史日志,用于OLTP,可以进行冷备份和热备份,可以实现数据库完全恢复.不完全恢复(基于时间点)     ...