Vue中动态增加表单项的方法

在我的项目中遇到了两种动态增加表单项的场景，一种是对Form的添加，另外一种是对Table的添加。当初实现这两种时还有一点喜悦，现在回过头来看，发现这两种实际就是一种，以后就可以根据个人喜好选择了。

这里因为要添加的表单项存在着父子关系，要添加的子代很多，而父代属性又一致，用这种方式可以减少重复 *** 作。表单样式就不再赘述了，具体看图
这里 tab 就是我们每次添加子表单时要push进数组tabs的内容。
2、为添加要素按钮绑定一个 addTab() 方法，用于在每次添加子表单时，向数组中push一个元素

3、对表单项的编写与正常一样，只不过在数据绑定上不同，需绑定到tab中的元素

4、如果要删除多余tab，需要在 <div> 中声明一个 removeTab() 的方法，来删除对应的tab，这点区别于 addTab() ，它是定义在 <div> 之外的，每次新增的tab都会插到整个表单的末尾。

这里的table也是存在父子关系，只是展示形式的区别。因为后台的数据还有着展示的需要，所以才选用了表格这种形式来实现。
1、将table组件声明在一个 <template> 标签下，用以根据后台数据进行动态加载。

2、对表格中需要编辑的内容，可以在 <template> 标签下声明一个输入框，并使用插槽来实现数据的绑定。

3、与上面相同的，声明一个 addRow() 的方法，用于增加表格的行数。

4、删除不想要的行，需要对应增加一个 deleteRow() 方法

是首先 props 里面传来的参数 是建议直接修改的(至于能不能修改，我就不清楚了)
如果需要双向绑定props 中的数据，建议使用watch 监听 props ，然后在监听的函数里面将值重新赋给 另一个参数，然后表单进行绑定， 并且使用$emit 调用父组件方法 修改该参数

Vue是一套用于构建用户界面的渐进式框架，该框架被设计为可以自底向上逐层应用，与其他大型框架大为不同。该框架核心库只关注视图层，既易于上手，又能通过npm包管理器与第三方库整合。
一、什么是Vue？
官方给出的概念：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的前端框架。
1、构建用户界面
用 vue 往 html 页面中填充数据，非常的方便
2、框架
框架是一套现成的解决方案，程序员若想使用只能遵守框架的规范，去编写自己的业务功能
学习 vue，就是在学习 vue 框架中规定的用法
vue 的指令、组件（是对 UI 结构的复用）、路由、Vuex、vue 组件库等都是框架的一部分
二、vue 的两个特性
1、数据驱动视图
概念
在使用了 vue 的页面中，vue 会监听数据的变化，从而自动重新渲染页面的结构 数据的变化会驱动视图自动更新
好处：程序员只管把数据维护好，那么页面结构会被 vue 自动渲染出来
2、双向数据绑定
概念
js 数据的变化，会被自动渲染到页面上 页面上表单采集的数据发生变化的时候，会被 vue 自动获取到，并更新到 js 数据中
开发者不再需要手动 *** 作 DOM 元素，来获取表单元素最新的值
3、实现原理--MVVM
概念
MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理。
MVVM 指的是 Model、View 和 ViewModel， 它把每个 HTML 页面都拆分成了这三个部分，如图所示：
在 MVVM 概念中：
Model 表示当前页面渲染时所依赖的数据源。
View 表示当前页面所渲染的 DOM 结构。
ViewModel 表示 vue 的实例，它是 MVVM 的核心。
工作原理
ViewModel 为 MVVM 的核心
它把当前页面的数据源（Model）和页面的结构（View）连接在了一起。
当数据源发生变化时，会被 ViewModel 监听到，VM 会根据最新的数据源自动更新页面的结构 当表单元素的值发生变化时，也会被 VM 监听到，VM 会把变化过后最新的值自动同步到 Model 数据源中
三、Vue的基本使用
步骤
① 导入 vuejs 的 script 脚本文件
② 在页面中声明一个将要被 vue 所控制的 DOM 区域
③ 创建 vm 实例对象（vue 实例对象）
如下图所示
四、指令
1概念
指令（Directives）是 vue 为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构
2类型
vue 中的指令按照不同的用途可以分为如下 6 大类：
① 内容渲染指令
② 属性绑定指令
③ 事件绑定指令
④ 双向绑定指令
⑤ 条件渲染指令
⑥ 列表渲染指令
21 内容渲染指令
（1）v-text 指令
缺点：会覆盖元素内部原有的内容
（2）{{ }} 插值表达式：只是内容的占位符，不会覆盖原有的内容
专门用来解决 v-text 会覆盖默认文本内容的问题
（3）v-html 指令的作用：可以把带有标签的字符串，渲染成真正的 HTML 内容
22 属性绑定指令
注意：插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中！
使用 v-bind: 指令，为元素的属性动态绑定值；
简写是英文的 :
在使用 v-bind 属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号，例如：
<div :title="'box' + index">这是一个 div</div>
加上: 后，“” 中的表达式都按照 js表达式编译，因此字符串类型数据要加上单引号
23 事件绑定指令
（1）v-on: 简写是 @
（2）通过 v-on 绑定的事件处理函数，需要在 methods 节点中进行声明
（3）语法格式为：
<button @click="add"></button>
methods: {
add() {
// 如果在方法中要修改 vue实例data 中的数据，可以通过 this 访问到
thiscount += 1
}
}
（4）$event 的应用场景：如果默认的事件参数对象 e 被覆盖了，则可以手动传递一个$event。
（5）事件修饰符：
prevent 阻止默认跳转行为
<a @clickprevent="xxx">链接</a>
stop 组织冒泡
<button @clickstop="xxx">按钮</button>
capture 以捕获模式触发当前的事件处理函数
onece 绑定的事件只触发一次
self 只有在eventtarget是当前元素自身时触发
（6）按键修饰符：
在监听键盘事件时，我们经常需要判断详细的按键。此时，可以为键盘相关的事件添加按键修饰符， 例如：
24 双向绑定指令
（1）v-model
data中的对象与绑定的输入框中的内容时刻保持一致
辅助开发者在不 *** 作 DOM 的前提下，快速获取表单的数据
<div>
<input v-model="username" />
<input v-model="password" />
</div>
const vm = new Vue(){
data:{
username: '',
password: ''
}
}
（2） v-model 指令的修饰符
//number 自动将用户的输入值转为数值类型
<input v-modelnumber="age" />
//trim 自动过滤用户输入的首尾空白字符
<input v-modeltrim="msg" />
//lazy 在“change”时而非“input”时更新,类似“防抖”
<input v-modellazy="msg" />
25 条件渲染指令
（1）v-show
原理：动态为元素添加或移除 display: none 样式，来实现元素的显示和隐藏
如果要频繁的切换元素的显示状态，用 v-show 性能会更好
（2）v-if
原理：每次动态创建或移除元素，实现元素的显示和隐藏
如果刚进入页面的时候，某些元素默认不需要被展示，而且后期这个元素很可能也不需要被展示出来，此时 v-if 性能更好

工具地址： >本地应用：
指令v-text的作用是：设置标签的内容
默认写法会替换全部内容，使用插值表达式{{}}可以替换指定内容
部分替换使用两个大括号写法

v-html指令：作用是设置元素的innerHTML
内容中有html结果会被解析为标签；v-text无论内容是什么，只会解析为文本
解析文本用v-text，解析html结构用v-html

v-on指令： 事件绑定的方法写成函数调用的形式，可以传入自定义参数
定义方法时需要定义形参来接受传入的实参
时间的后面跟上修饰符可以对事件进行限制
enter可以限制触发的按键为回车
时间修饰符有多种

计数器的步骤：
1在data中定义数据num；
2methods中添加两种方法add和sub
3使用v-text给num设置span标签
4使用v-on将add，sub绑定给+、-按钮
5add逻辑小于10继续累加，否则alert
6sub逻辑大于0继续递减，否则alert

创建Vue示例时，el（挂载点），data（数据），methods（方法）
v-on指令的作用是绑定事件，简写为@
方法中通过this，关键字获取data中的数据
v-text设置文本值，简写{{}}

v-show指令的作用是：根据真假切换元素的显示状态
原理是修改元素的display，实现显示和隐藏
指令后面的内容，最终都会解析为布尔值
值为true元素显示，值为false元素隐藏

v-if指令的作用是：根据真假切换元素的显示状态
本质是通过 *** 纵dom元素来切换显示状态
表达式的值为true，元素存在于dom树中，为false，从dom树中移除

v-bind指令的作用是：为元素绑定属性
完整写法是v-bind：属性名
简写的话可以直接省略v-bind，只保留：属性名
需要动态的增删class建议使用对象的方式

v-for指令的作用是：根据数据生成列表结构
数组经常和v-for结合使用
语法是（item，index）in 数据
item和index可以结合其他指令一起使用
数组长度的更新会同步到页面上，是响应式的

v-model指令的作用是便捷的设置和获取表单元素的值
绑定的数据和表单元素值相关联
绑定的数据双向绑定表单元素的值

网络应用

1、vue使用element-ui的form表单验证

问题描述：第一次点击新增时正常，第二次新增打开d窗后由于表单内容为空，出现验证这种情况。
解决 ： this$refsstaffFormresetFields();//等d窗里的form表单的dom渲染完在执行this$refsstaffFormresetFields()，去除验证（clearValidate），（resetField表单重置）

//打开d窗的新增方法

addStaff() {

      thisstaffVisible = true;//d窗打开

      this$nextTick(()=>{

         this$refsstaffFormresetFields()

        this$refsstaffFormclearValidate()

      });

},

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>HTML5学堂</title>
</head>
<body>
    <div class="wrap" id="app">
        用户名：<input type="text" v-model="iptText"/>
        男：<input type="radio" v-model="iptRadio" value="boy" />
        女：<input type="radio" v-model="iptRadio" value="girl" />
        <div>表单的数据：</div>
        <div>用户名为：{{iptText}}，性别是：{{iptRadio}}</div>
    </div>
    <!-- HTML5学堂 -->
    <script src="js/vueminjs" type="text/javascript"></script>
    <script type="text/javascript">
        var h5course = new Vue({
            el: '#app',
            data: {
                iptText: '',
                iptRadio: ''
            }
        });
    </script>
</body>
</html>

---