响应式表单（响应式表单设计）

本文目录一览：

• 1、响应式框架种类?
• 2、vue+el-form表单验证、提交及重置
• 3、单点登录如何实现？
• 4、前端开发中的交互式与响应式是什么意思有什么区别
• 5、vue2响应式原理总结

响应式框架种类?

小飞今天就来介绍一些目前设计师经常使用的响应式框架，大家可以结合自己的实际需求合理选择使用。

jQuery，Vue，Bootstrap，react。

除了 Bootstrap 和 Semantic-UI，其他的 UI 框架：Google Material UI Ant Design Element UI jQuery UI ...都各有优缺点，Semantic-UI 体积有点大，但写起来相当方便，UI 也具有现代感，推荐使用。

Twitter BootStrap （Apache v0；响应式）时髦、直观并且强大的前端框架，让Web开发变得更加容易。 Foundation （MIT；响应式）最先进的响应式前端框架。

vue+el-form表单验证、提交及重置

vue使用element-ui的form表单验证 问题描述：第一次点击新增时正常，第二次新增打开弹窗后由于表单内容为空，出现验证这种情况。

换句话说，如果是打开新建的表单，那么初始值就都为空，如果打开是编辑的弹窗表单，那么初始值就为编辑的。

在el-form中定义的rules检验字段，如果你的rules中有字段通过v-if进行隐藏，rules是不会对隐藏的字段选项进行判断，只要定义一个完整的rules就行，v-if隐藏的部分不会进入校验方法中。

Vue 中表单提交的基本方式如下：在表单中使用 v-model 绑定表单元素的值到 Vue 组件的数据上。在表单中使用 @submit.prevent 事件来阻止默认提交事件。在 Vue 组件中定义一个提交表单的方法，用来在表单提交时执行一些操作。

如果只是分别实现双向绑定和初始化渲染，官网的例子都可以解决。 双向绑定可以绑定到同一个数组Jack、John、Mike 。 Checked names： {{ checkedNames | json }} 这样可以不做任何处理，获得所有checked的checkbox。

单点登录如何实现？

1、获取用户信息等资源，实现单点登录。用户已经登录企业门户的前提下，单点登录到门户中的应用。门户与应用的域名没有关系。

2、在使用openid实现单点登录的方法有很多，可以使用上面共享session的方法，即把openid带在cookie里面，但是这样也会出现一样的cookie跨域的问题。

3、单点登录的本质就是在多个应用系统中共享登录状态。

4、单点登录可以实现：登录的时候只要一次登录，退出的时候只要一次退出。

5、单点登录将登录模块抽离出来成为一个统一认证平台，应用系统无需开发登录模块，只需简单接入统一认证平台。

前端开发中的交互式与响应式是什么意思有什么区别

问题三：前端开发中的交互式与响应式是什么意思有什么区别 一句话概括：交互式：页面或界面会根据用户的行为（键盘、鼠标、触摸等）进行相应的变化。

响应式页面设计就是一个网站能够兼容多个终端，而不是为每个终端做一个特定版本。

“响应式页面”跟“h5页面”都是基于html5规范的网页。

vue2响应式原理总结

1、vue响应式数据原理是利用Object。defineProperty这个API来实现，该API可以监听对象属性的get和set，当对象属性被调用时，它能够自动触发更新视图。Vue的响应式实现，便是通过使用Object。

2、vue2响应式原理主要通过 Object.fefineProperty 当把一个普通的js对象传入 Vue 实例作为 data 选项，Vue将遍历此对象所有的属性，并使用 Object.fefineProperty 把这些属性全部转为 getter/setter 。

3、vue2中Object.defineProperty响应式只对对象有效，对数组无效，所以对数组做额外处理。

4、这里附上vue响应式原理的地址： vue2数据响应式原理 在vue的watcher实例中配置了lazy，dirty，value属性，就是用来配合实现computed的API。

5、Vue响应式原理核心是 数据劫持，采用 ES5 的 object.defineproperty 的 getter 和 setter 方法。

6、当一个vue实例加载时，会进行初始化，将他的配置项options和mixins的内容合并，以options为主，而在初始化data时，会对data对象进行数据劫持，并做代理，通过Object。