vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单


Posted in Javascript onSeptember 14, 2018

我的 github 地址 - vue3.0Study - 阶段学习成果都会建立分支。

新组件 - 新路由 Forms.vue ( 下面仅介绍如何创立, 不进行介绍 ) :

<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 标签名;2、勿采用 vue 内部保留的名称如 slot ( 插槽 )、partial、component等。3、以字母开头。更加详细的组件命名内容请参见: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">复选集合:</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 属性中也声明同样的属性,但别这么做,任何选择框的属性,都应该在 data 声明该属性。

对于多选框,也可以采用 v-for 来循环显示,读者可自行实验。

值绑定

上面介绍那些选择框,属性绑定的默认的值。对此先来看看下面这个例子:

<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>

上面的例子,是系统默认的,选中之后 checked1 是 true。下面就是修改了选中之后,属性 checked11 对应的值,也就是【有效】。

再比如:<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 必须要设置这两个属性,且 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 则是将强制输入转换为 Number 类型。

.trim 去掉输入的字符串空格 ( 注意:加入之后,不但首尾的空格会去掉,中间部分连续多个空格会替换为单个空格 )。

比如如下例子: <textarea v-model.trim="message2" placeholder="多行文本"></textarea>

关于组件内部的基础功能 ( 表单、指令、绑定、属性 ) 已经简单了解熟悉,深入的理解需要在运用过程中不断加深。后面的学习将进一步理解 MVC 框架的核心概念之一 【组件】。

总结

以上所述是小编给大家介绍的vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单  ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
麦鸡的TAB切换功能结合了javascript和css
Dec 17 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
May 04 Javascript
jQuery实用函数用法总结
Aug 29 Javascript
jQuery基于json与cookie实现购物车的方法
Apr 15 Javascript
jQuery 如何给Carousel插件添加新的功能
Apr 18 Javascript
Vue.js每天必学之方法与事件处理器
Sep 06 Javascript
Cookies 和 Session的详解及区别
Apr 21 Javascript
微信小程序实现跑马灯效果
Oct 21 Javascript
JavaScript展开操作符(Spread operator)详解
Jul 20 Javascript
jQuery实现弹幕特效
Nov 29 jQuery
微信小程序开发打开另一个小程序的实现方法
May 17 Javascript
深入理解javascript中的this
Feb 08 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
Sep 14 #Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
Sep 14 #Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
Sep 14 #Javascript
node中的session的具体使用
Sep 14 #Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
Sep 14 #Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
Sep 14 #Javascript
详解Vue CLI3配置解析之css.extract
Sep 14 #Javascript
You might like
最令PHP初学者头痛的十四个问题
2006/07/12 PHP
十天学会php之第二天
2006/10/09 PHP
php弹出对话框实现重定向代码
2014/01/23 PHP
PHP扩展开发教程(总结)
2015/11/04 PHP
Docker配置PHP开发环境教程
2016/12/21 PHP
php中yar框架实例用法讲解
2020/12/27 PHP
Javascript中找到子元素在父元素内相对位置的代码
2012/07/21 Javascript
javascript-简单的计算器实现步骤分解(附图)
2013/05/30 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
2013/08/14 Javascript
JavaScript调用客户端Java程序的方法
2015/07/27 Javascript
基于JavaScript实现网页倒计时自动跳转代码
2015/12/28 Javascript
当jquery ajax遇上401请求的解决方法
2016/05/19 Javascript
vue实现可增删查改的成绩单
2016/10/27 Javascript
Nodejs高扩展性的模板引擎 functmpl简介
2017/02/13 NodeJs
微信小程序 扭蛋抽奖机css3动画实现详解
2019/07/19 Javascript
[06:10]6.81新信使新套装!给你一个炫酷的DOTA2
2014/05/06 DOTA
[02:40]2014DOTA2 国际邀请赛中国区预选赛 四大豪门抵达华西村
2014/05/23 DOTA
[27:39]Ti4 循环赛第二日 LGD vs Fnatic
2014/07/11 DOTA
[03:30]DOTA2完美“圣”典精彩集锦
2016/12/27 DOTA
Python安装第三方库及常见问题处理方法汇总
2016/09/13 Python
利用python实现简单的循环购物车功能示例代码
2017/07/05 Python
python新手学习可变和不可变对象
2020/06/11 Python
Python 中如何写注释
2020/08/28 Python
Python爬虫之App爬虫视频下载的实现
2020/12/08 Python
分享一个H5原生form表单的checkbox特效代码
2018/02/26 HTML / CSS
美国LOGO设计公司:The Logo Company
2018/07/16 全球购物
售后服务科岗位职责范文
2013/11/13 职场文书
会计工作决心书
2014/03/11 职场文书
2014和解协议书范文
2014/09/15 职场文书
公司授权委托书格式样本
2014/10/01 职场文书
教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
2014年前台接待工作总结
2014/12/05 职场文书
党建工作汇报材料
2014/12/24 职场文书
人事专员岗位职责
2015/02/03 职场文书
诚信考试承诺书范文
2015/04/29 职场文书
Redis如何一键部署脚本
2021/04/12 Redis