vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html

我的 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 框架的核心概念之一 【组件】。本文代码都已更新至 github。

纯小白入手 vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单的更多相关文章

  1. 纯小白入手 vue3.0 CLI - 2.5 - 了解组件的三维

    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...

  2. 纯小白入手 vue3.0 CLI - 3.3 - 路由的导航守卫

    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 尽量把纷繁的知识,肢解重组成为可以堆砌的知识. ...

  3. 纯小白入手 vue3.0 CLI - 3.2 - 路由的初级使用

    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 尽量把纷繁的知识,肢解重组成为可以堆砌的知识. ...

  4. 纯小白入手 vue3.0 CLI - 3.1 - 路由 ( router )

    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 尽量把纷繁的知识,肢解重组成为可以堆砌的知识. ...

  5. 纯小白入手 vue3.0 CLI - 2.7 - 组件之间的数据流

    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 尽量把纷繁的知识,肢解重组成为可以堆砌的知识. ...

  6. 纯小白入手 vue3.0 CLI - 2.6 - 组件的复用

    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...

  7. 纯小白入手 vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定

    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...

  8. 纯小白入手 vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造

    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...

  9. 纯小白入手 vue3.0 CLI - 2.1 - 组件 ( component )

    vue3.0 CLI 真小白入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0Study  ...

随机推荐

  1. FastDFD安装遇到的问题

    如果按照步骤安装最后却发现 sudo service fdfs_trackerd start 启动不了,那么重启一下虚拟机就可以了

  2. Apache JMeter的基本使用

    安装 安装地址:http://jmeter.apache.org/download_jmeter.cgi 解压后运行jmeter.bat的批处理文件就可以了 JMeter测试脚本编写: 1,创建线程组 ...

  3. jdk1.8+SpringAOP注解报java.lang.IllegalArgumentException: error at ::0 can't find referenced pointcut select错误的不知原因的解决办法[仅供参考]

    先说办法:如果Aspectweaver-1.*.*jar这三个包版本比较低, 比如1.5.0这一层次的,可以找版本高一点的包替换低版本的包,问题可以得到解决 jar包的下载地址:https://mvn ...

  4. [Spring]IOC控制反转和DI依赖注入

    从之前算起到现在接触Spring也已经有几天了,进度也不是很快,就只弄懂了控制反转和依赖注入那么一点东西.然后敲了两个demo 主要是因为之前没有学过,然后网上资源很多但是都不是面向我们初学者的,大多 ...

  5. pigz 压缩

    压缩工具--pigz 压缩: tar cvf - 目录名 | pigz -9 -p 24 > file.tgz pigz:用法-9是压缩比率比较大,-p是指定cpu的核数. 解压: pigz - ...

  6. Shell 相互调用

    Shell 文件包含 和其他语言一样,Shell 也可以包含外部脚本.这样可以很方便的封装一些公用的代码作为一个独立的文件. Shell 文件包含的语法格式如下: . filename # 注意点号( ...

  7. RabbitMQ AMQP (高级消息队列协议)

    目录 RabbitMQ AMQP (高级消息队列协议) Message Queue 简介 概念 基本组成 场景及作用 AMQP简介 模型架构 基础组件 AMQP-RabbitMQ 简介 模型 特性 参 ...

  8. Linux 部署 ASP.NET Core 的一些问题记录

    异常错误: 关闭 IP6 #修改 vi /etc/sysctl.conf # 添加如下三条设置    net.ipv6.conf.all.disable_ipv6 = 1    net.ipv6.co ...

  9. 【转】Windows 8 desktop app中dll搜索路径设置的诡异现象,Bug?

    原文地址:http://blog.csdn.net/my_business/article/details/8850151 某个桌面程序在win 8上运行异常的问题困扰了我有近一周,今天终于找到了根本 ...

  10. Liferay7.0与cas单点登录配置

    1.简介     Liferay7.0支持多种登录方式,包括:常规的.opensso.cas.ntlm.ldap.openid.Facebook.Google等. 其中, (1) 常规:则是默认Lif ...