vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
我的github地址-vue3.0Study-阶段学习成果都会建立分支。
新组件-新路由Forms.vue(下面仅介绍如何创立,不进行介绍):
Messageis:{{message}}
新建路由(在router.js中):
importFormsfrom'./views/Forms.vue' exportdefaultnewRouter({ routes:[ {path:'/',.......}, { path:'/form', name:'forms', component:Forms }, {path:'/about',......} ] })
这样就建立新的路由,这块我建立了新的gitcommit。
注意:组件名称尽量满足以下要求:1、勿采用HTML标签名;2、勿采用vue内部保留的名称如slot(插槽)、partial、component等。3、以字母开头。更加详细的组件命名内容请参见:https://cnodejs.org/topic/5816aabdcf18d0333412d323
文本表单
贴个代码,具体的使用方法不多介绍:
单行文本:{{message1}}
多行文本:{{message2}}
需要注意的是:
选择框
单选框: {{checked1}} 复选集合: 章三 里斯 王五
所选的人有:{{checkedNames}}单选集合: 男 女
性别是:{{picked}}单选下拉框: 请选择 选择的是:{{selected1}} exportdefault{ 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 }} }多选下拉框: 选择的是:{{selected2}}
注意:尽管有的选择框,无须在data属性中也声明同样的属性,但别这么做,任何选择框的属性,都应该在data声明该属性。
对于多选框,也可以采用v-for来循环显示,读者可自行实验。
值绑定
上面介绍那些选择框,属性绑定的默认的值。对此先来看看下面这个例子:
{{checked1}} {{checked11}}
上面的例子,是系统默认的,选中之后checked1是true。下面就是修改了选中之后,属性checked11对应的值,也就是【有效】。
再比如:
其中v-bind:value="a"意思:选中之后,data.pick=data.a。在js中data必须要设置这两个属性,且a要有初始值。
可以绑定到对象:
也可以:
对于所有的上面介绍的表单,都可以采用这种值绑定,限于篇幅,不一一介绍。
最后还有-修饰符
.lazy .number .trim
.lazy改变input和textarea输入框的更新模式。上面的两个输入框的例子,都是在敲键盘一边输入一边更新;加入这个之后,变成失去焦点才会更新。
.number则是将强制输入转换为Number类型。
.trim去掉输入的字符串空格(注意:加入之后,不但首尾的空格会去掉,中间部分连续多个空格会替换为单个空格)。
比如如下例子:
关于组件内部的基础功能(表单、指令、绑定、属性)已经简单了解熟悉,深入的理解需要在运用过程中不断加深。后面的学习将进一步理解MVC框架的核心概念之一【组件】。
总结
以上所述是小编给大家介绍的vue3.0CLI-2.4-新组件Forms.vue中学习表单 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!