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 相关文章推荐
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
Jan 02 Javascript
JS中判断null、undefined与NaN的方法
Mar 24 Javascript
JS实现弹性漂浮效果的广告代码
Sep 02 Javascript
基于javascript实现最简单的选项卡切换效果
May 16 Javascript
ionic隐藏tabs的方法
Aug 29 Javascript
详解Vue2中组件间通信的解决全方案
Jul 28 Javascript
Vue 2.0入门基础知识之内部指令详解
Oct 15 Javascript
详解如何在React组件“外”使用父组件的Props
Jan 12 Javascript
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
浅谈vue加载优化策略
Mar 19 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
Apr 25 Javascript
Vue+Java+Base64实现条码解析的示例
Sep 23 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中的PHP_EOL换行符详细解析
2013/10/26 PHP
PHP实现克鲁斯卡尔算法实例解析
2014/08/22 PHP
php根据一个给定范围和步进生成数组的方法
2015/06/19 PHP
PHP数学运算与数据处理实例分析
2016/04/01 PHP
PHP面向对象五大原则之开放-封闭原则(OCP)详解
2018/04/04 PHP
IE FF OPERA都可用的弹出层实现代码
2009/09/29 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
2013/11/29 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
2015/03/02 Javascript
JS简单实现动画弹出层效果
2015/05/05 Javascript
jquery+Jscex打造游戏力度条
2020/09/12 Javascript
Bootstrap select下拉联动(jQuery cxselect)
2017/01/04 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
2017/01/09 Javascript
javascript 网页进度条简单实例
2017/02/22 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
2017/04/12 Javascript
vue组件如何被其他项目引用
2017/04/13 Javascript
vue调用高德地图实例代码
2017/04/28 Javascript
es6学习笔记之Async函数的使用示例
2017/05/11 Javascript
vue和webpack打包项目相对路径修改的方法
2018/06/15 Javascript
jquery获取img的src值实例介绍
2019/01/16 jQuery
[51:26]VP vs VG 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python中的__init__ 、__new__、__call__小结
2014/04/25 Python
Python算法应用实战之栈详解
2017/02/04 Python
python使用folium库绘制地图点击框
2018/09/21 Python
使用python批量读取word文档并整理关键信息到excel表格的实例
2018/11/07 Python
Python微医挂号网医生数据抓取
2019/01/24 Python
基于python求两个列表的并集.交集.差集
2020/02/10 Python
Python函数调用追踪实现代码
2020/11/27 Python
html5指南-3.如何实现html元素拖拽功能
2013/01/07 HTML / CSS
彪马荷兰官网:PUMA荷兰
2019/05/08 全球购物
司机辞职报告范文
2014/01/20 职场文书
学生党支部先进事迹
2014/02/04 职场文书
校庆接待方案
2014/03/18 职场文书
如何写好自荐信
2014/04/07 职场文书
综艺节目策划方案
2014/06/13 职场文书
2016十一国庆节慰问信
2015/12/01 职场文书
MyBatis配置文件解析与MyBatis实例演示
2022/04/07 Java/Android