新组件 - 新路由 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.
来源: https://www.cnblogs.com/ndos/p/9617526.html