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

我的 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、以字母开头。更加详细的组件命名内容请参见：

文本表单

贴个代码，具体的使用方法不多介绍：

<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 中学习表单  ，希望对大家有所帮助