我的 github 地址 - vue3.0Study - 阶段学习成果都会建立分支。
新组件 - 新路由 Forms.vue ( 下面仅介绍如何创立,不进行介绍 ) :
新建路由 ( 在 router.js 中 ):
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
文本表单
多行文本:
{{ message2 }}
需要注意的是:
中的红色部分无效。
选择框
注意:尽管有的选择框,无须在 data 属性中也声明同样的属性,但别这么做,任何选择框的属性,都应该在 data 声明该属性。
对于多选框,也可以采用 v-for 来循环显示,读者可自行实验。
值绑定
上面介绍那些选择框,属性绑定的默认的值。对此先来看看下面这个例子:
上面的例子,是系统默认的,选中之后 checked1 是 true。下面就是修改了选中之后,属性 checked11 对应的值,也就是【有效】。
再比如:
其中 v-bind:value="a" 意思:选中之后,data.pick = data.a 。在 js 中 data 必须要设置这两个属性,且 a 要有初始值。
可以绑定到对象:dio" v-model="pick1" v-bind:value="{a:1}">
也可以:
对于所有的上面介绍的表单,都可以采用这种值绑定,限于篇幅,不一一介绍。
最后还有 - 修饰符
.lazy .number .trim
.lazy 改变 input 和 textarea 输入框的更新模式。上面的两个输入框的例子,都是在敲键盘一边输入一边更新;加入这个之后,变成失去焦点才会更新。
.number 则是将强制输入转换为 Number 类型。
.trim 去掉输入的字符串空格 ( 注意:加入之后,不但首尾的空格会去掉,中间部分连续多个空格会替换为单个空格 )。
比如如下例子:
关于组件内部的基础功能 ( 表单、指令、绑定、属性 ) 已经简单了解熟悉,深入的理解需要在运用过程中不断加深。后面的学习将进一步理解 MVC 框架的核心概念之一 【组件】。
总结
以上所述是小编给大家介绍的vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单 。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。
原文链接:https://www.f2er.com/vue/30201.html