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