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 相关文章推荐
javascript[js]获取url参数的代码
Oct 17 Javascript
jQuery生成asp.net服务器控件的代码
Feb 04 Javascript
jQuery及JS实现循环中暂停的方法
Feb 02 Javascript
JavaScript实现的简单拖拽效果
Jun 01 Javascript
学习JavaScript设计模式(链式调用)
Nov 26 Javascript
解决前端跨域问题方案汇总
Nov 20 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
Feb 05 Javascript
js实现控制文件拖拽并获取拖拽内容功能
Feb 17 Javascript
vue基于mint-ui实现城市选择三级联动
Jun 30 Javascript
微信小程序实现轨迹回放的示例代码
Dec 13 Javascript
vant picker+popup 自定义三级联动案例
Nov 04 Javascript
Canvas跟随鼠标炫彩小球的实现
Apr 11 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
discuz 首页四格:最新话题+最新回复+热门话题+精华文章插件
2007/08/19 PHP
PHP企业级应用之常见缓存技术篇
2011/01/27 PHP
php根据分类合并数组的方法实例详解
2013/11/06 PHP
JS是否可以跨文件同时控制多个iframe页面的应用技巧
2007/12/16 Javascript
JQuery 插件制作实践 xMarquee插件V1.0
2010/04/02 Javascript
jquery 学习笔记一
2010/04/07 Javascript
精通Javascript系列之数据类型 字符串
2011/06/08 Javascript
javascript显示用户停留时间的简单实例
2013/08/05 Javascript
对比分析json及XML
2014/11/28 Javascript
如何在Linux上安装Node.js
2016/04/01 Javascript
node.js入门教程之querystring模块的使用方法
2017/02/27 Javascript
浅析JS抽象工厂模式
2017/12/14 Javascript
Node.js Buffer用法解读
2018/05/18 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
2018/08/24 Javascript
Vue 实现html中根据类型显示内容
2019/10/28 Javascript
微信小程序实现图片压缩
2019/12/03 Javascript
如何在vue中使用kindeditor富文本编辑器
2020/12/19 Vue.js
python BeautifulSoup使用方法详解
2013/11/21 Python
让python 3支持mysqldb的解决方法
2017/02/14 Python
快速排序的四种python实现(推荐)
2019/04/03 Python
Python异常模块traceback用法实例分析
2019/10/22 Python
Pytorch DataLoader 变长数据处理方式
2020/01/08 Python
H5 canvas中width、height和style的宽高区别详解
2018/11/02 HTML / CSS
欧尚俄罗斯网上超市:Auchan俄罗斯
2018/05/03 全球购物
以设计师精品品质提供快速时尚:Mostata
2019/05/10 全球购物
Linux如何命名文件--使用文件名时应注意
2014/05/29 面试题
当当网软件测试笔试题
2015/11/24 面试题
村党支部公开承诺书
2014/05/29 职场文书
师范学院毕业生求职信
2014/06/24 职场文书
企业党员岗位承诺书
2015/04/27 职场文书
东京审判观后感
2015/06/01 职场文书
2016年大学生暑假爱心支教活动策划书
2015/11/26 职场文书
班主任班级管理心得体会
2016/01/07 职场文书
MySQL复制问题的三个参数分析
2021/04/07 MySQL
英国数字版游戏销量周榜公布 《小缇娜的奇幻之地》登顶
2022/04/03 其他游戏
Win11 Dev 预览版25174.1000发布 (附更新修复内容汇总)
2022/08/05 数码科技