vue3.0 CLI 真小白一步一步入手全教程系列：https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0Study - 阶段学习成果都会建立分支。 ========================== 新组件 - 新路由 Forms.vue ( 下面仅介绍如何创立, 不进行介绍 ) ： 复制代码 复制代码 新建路由 ( 在 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 文本表单 贴个代码，具体的使用方法不多介绍： 复制代码 复制代码 需要注意的是：{{ someProp }} 中的红色部分无效。 选择框 复制代码 单选框： {{ checked1 }} 复制代码 复制代码 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 来循环显示，读者可自行实验。 值绑定 上面介绍那些选择框，属性绑定的默认的值。对此先来看看下面这个例子： 复制代码 {{ checked1 }} {{ checked11 }} 复制代码 上面的例子，是系统默认的，选中之后 checked1 是 true。下面就是修改了选中之后，属性 checked11 对应的值，也就是【有效】。 再比如：绑定到a： 其中 v-bind:value="a" 意思：选中之后，data.pick = data.a 。在 js 中 data 必须要设置这两个属性，且 a 要有初始值。 可以绑定到对象：绑定到对象： 也可以：绑定到对象： 对于所有的上面介绍的表单，都可以采用这种值绑定，限于篇幅，不一一介绍。 最后还有 - 修饰符 .lazy .number .trim .lazy 改变 input 和 textarea 输入框的更新模式。上面的两个输入框的例子，都是在敲键盘一边输入一边更新；加入这个之后，变成失去焦点才会更新。 .number 则是将强制输入转换为 Number 类型。 .trim 去掉输入的字符串空格 ( 注意：加入之后，不但首尾的空格会去掉，中间部分连续多个空格会替换为单个空格 )。 比如如下例子： ================= 关于组件内部的基础功能 ( 表单、指令、绑定、属性 ) 已经简单了解熟悉，深入的理解需要在运用过程中不断加深。后面的学习将进一步理解 MVC 框架的核心概念之一 【组件】。本文代码都已更新至 github。https://www.cnblogs.com/ndos/p/9617526.html