Vue的表单双绑和组件你了解吗

目录
  • 1、什么是双向数据绑定
  • 2、在表单中使用双向数据绑定
  • 3、什么是组件
  • 总结

1、什么是双向数据绑定

Vue.js是一个MV VM框架， 即数据双向绑定， 即当数据发生变化的时候， 视图也就发生变化， 当视图发生变化的时候，数据也会跟着同步变化。这也算是Vue.js的精髓之处了。

值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vue x那么数据流也是单项的，这时就会和双向数据绑定有冲突。

（1）为什么要实现数据的双向绑定

在Vue.js中，如果使用vuex， 实际上数据还是单向的， 之所以说是数据双向绑定，这是用的UI控件来说， 对于我们处理表单， Vue.js的双向数据绑定用起来就特别舒服了。即两者并不互斥，在全局性数据流使用单项，方便跟踪；局部性数据流使用双向，简单易操作。

2、在表单中使用双向数据绑定

你可以用v-model指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇， 但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

注意：v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值!

（1）单行文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    输入的文本：<input type="text" v-model="message" value="hello">{{message}}
</div>

<script src="../js/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            message:""
        }
    });
</script>
</body>
</html>

（2）多行文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
   多行文本：<textarea v-model="pan"></textarea>&nbsp;&nbsp;多行文本是：{{pan}}
</div>

<script src="../js/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            message:"Hello hello!"
        }
    });
</script>
</body>
</html>

（3）单复选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    单复选框：
    <input type="checkbox" id="checkbox" v-model="checked">
    &nbsp;&nbsp;
    <label for="checkbox">{{checked}}</label>
</div>

<script src="../js/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            checked:false
        }
    });
</script>
</body>
</html>

（4）多复选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    多复选框：
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    &nbsp;&nbsp;
    <label for="jack">Jack</label>
    <input type="checkbox" id="join" value="Join" v-model="checkedNames">
    &nbsp;&nbsp;
    <label for="join">Jack</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    &nbsp;&nbsp;
    <label for="mike">Mike</label>
    <span>选中的值：{{checkedNames}}</span>
</div>

<script src="../js/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            checkedNames:[]
        }
    });
</script>
</body>
</html>

（6）单选按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    单选框按钮
    <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">One</label>
    <input type="radio" id="two" value="Two" v-model="picked">
    <label for="two">Two</label>
    <span>选中的值：{{picked}}</span>
</div>

<script src="../js/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            picked:'Two'
        }
    });
</script>
</body>
</html>

（7）下拉框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<!--    性别：
    <input type="radio" name="sex" value="男" v-model="pan">男
    <input type="radio" name="sex" value="女" v-model="pan">女
    <p>选中了：{{pan}}</p>-->

    下拉框:
    <select v-model="pan">
        <option value="" disabled>---请选择---</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
        <option>D</option>
    </select>
    <span>value:{{pan}}</span>

</div>

<script src="../js/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            pan:"A"
        }
    });
</script>
</body>
</html>

注意：v-model表达式的初始值未能匹配任何选项，元系将被渲染为“未选中”状态。 在iOS中， 这会使用户无法选择第一个选项，因为这样的情况下，iOS不会触发change事件。因此，更推荐像上面这样提供一个值为空的禁用选项。

3、什么是组件

组件是可复用的Vue实例， 说白了就是一组可以重复使用的模板， 跟JSTL的自定义标签、Thymeleal的th:fragment等框架有着异曲同工之妙，通常一个应用会以一棵嵌套的组件树的形式来组织：

例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。

（1）第一个Vue组件

注意：在实际开发中，我们并不会用以下方式开发组件，而是采用vue-cli创建，vue模板文件的方式开发，以下方法只是为了让大家理解什么是组件。

使用Vue.component()方法注册组件，格式如下：

<div id="app">
  <pan></pan>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    //先注册组件
    Vue.component("pan",{

        template:'<li>Hello</li>'

    });
    //再实例化Vue
    var vm = new Vue({
        el:"#app",
    });
</script>

说明：

  • Vue.component()：注册组件
  • pan：自定义组件的名字
  • template：组件的模板

（2）使用props属性传递参数

像上面那样用组件没有任何意义，所以我们是需要传递参数到组件的，此时就需要使用props属性了！

注意：默认规则下props属性里的值不能为大写；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <!--组件：传递给组件中的值：props-->
  <pan v-for="item in items" v-bind:panh="item"></pan>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    //定义组件
    Vue.component("pan",{
        props:['panh'],
        template:'<li>{{panh}}</li>'

    });
    var vm = new Vue({
        el:"#app",
        data:{
            items:["java","Linux","前端"]
        }
    });
</script>
</body>
</html>

说明：

  • v-for="item in items"：遍历Vue实例中定义的名为items的数组，并创建同等数量的组件
  • v-bind:panh="item"：将遍历的item项绑定到组件中props定义名为item属性上；= 号左边的panh为props定义的属性名，右边的为item in items 中遍历的item项的值

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • Vue form表单动态添加组件实战案例

    今天我们来给大家介绍下在Vue开发中我们经常会碰到的一种需求场景,就是在form中我们需要动态的增加组件模块,效果如下: 这种效果实现其实就是对 v-for 指令的一种使用,组件不是必须的,只是为了将这部门的代码我们单独的拎出来,便于查看,好了,话不多说,我们来看下具体怎么来实现. 案例效果的实现 1.创建组件 首先我们创建一个单独的组件,同时在 template 中定义我们的表单元素,此处使用的是 element UI 来实现效果. 2.import组件 我们需要在父组件中引入创建的组件,并通

  • Vue 表单输入绑定v-model

    Vue 表单输入绑定v-model

    目录 1.v-model 2.绑定的属性和事件 3.表单元素绑定 3.1 input绑定 3.2 textarea绑定 3.3 checkbox绑定 3.4 radio绑定 3.5 select绑定 4.值绑定 4.1 代码详解 5.修饰符 5.1 .lazy 5.2 .number 5.3 .trim 1.v-model v-model指定可以实现表单值与属性的双向绑定.即表单元素中更改了值会自动的更新属性中的值,属性中的值更新了会自动更新表单中的值 2.绑定的属性和事件 v-model在内部

  • Vue循环组件加validate多表单验证的实例

    *父父组件(helloWorld.vue): <template> <div class="hello-world"> <el-button type="text" @click="saveAll" class="button">SAVE</el-button> <promise-father ref="promiseFather"></pr

  • 详解vue 表单绑定与组件

    详解vue 表单绑定与组件

    一.什么是双向数据绑定 Vue.js是一个MV VM框架, 即数据双向绑定, 即当数据发生变化的时候, 视图也就发生变化, 当视图发生变化的时候,数据也会跟着同步变化.这也算是Vue.js的精髓之处了.   值得注意的是,我们所说的数据双向绑定,一定是对于UI控件来说的非UI控件不会涉及到数据双向绑定.单向数据绑定是使用状态管理工具的前提.如果我们使用vue x那么数据流也是单项的,这时就会和双向数据绑定有冲突. 1.为什么要实现数据的双向绑定 在Vue.js中,如果使用vuex, 实际上数据还

  • Vue之表单事件数据绑定详解

    Vue之表单事件数据绑定详解

    <body> <div id="root"> <form action="" @submit.prevent="demo"> <label for="TW"> 姓名:</label> <input type="text" id="TW" v-model.trim="userInfo.account"&g

  • Vue的表单双绑和组件你了解吗

    目录 1.什么是双向数据绑定 2.在表单中使用双向数据绑定 3.什么是组件 总结 1.什么是双向数据绑定 Vue.js是一个MV VM框架, 即数据双向绑定, 即当数据发生变化的时候, 视图也就发生变化, 当视图发生变化的时候,数据也会跟着同步变化.这也算是Vue.js的精髓之处了. 值得注意的是,我们所说的数据双向绑定,一定是对于UI控件来说的非UI控件不会涉及到数据双向绑定.单向数据绑定是使用状态管理工具的前提.如果我们使用vue x那么数据流也是单项的,这时就会和双向数据绑定有冲突. (1

  • Vue表单类的父子组件数据传递示例

    使用Vue.js进行项目开发,那必然会使用基于组件的开发方式,这种方式的确给开发和维护带来的一定的便利性,但如果涉及到组件之间的数据与状态传递交互,就是一件麻烦事了,特别是面对有一大堆表单的页面. 在这里记录一下我平时常用的处理方式,这篇文章主要记录父子组件间的数据传递,非父子组件主要通过Vuex处理,这篇文章暂时不作说明. 与文档里给的方案一样,父组件向子组件传递数据主要通过 props,子组件向父组件传递数据主要通过触发器 $emit(),只是在用法上会有些不同. 1.传递基本类型数据 当子

  • vue悬浮表单复合组件开发详解

    vue悬浮表单复合组件开发详解

    本文实例为大家分享了vue悬浮表单复合组件开发的具体代码,供大家参考,具体内容如下 组件样式 组件功能 卡片形式展示筛选条件点击添加筛选后展示悬浮表单表单内完成条件选择后点击保存,新增一个卡片 开发 <div class="form-label">筛选条件:</div> <template v-for="(item, index) in fitter">   <div :key="index" class

  • Vue Element-ui表单校验规则实现

    目录 1.前言 2.规则校验的入门模式 2.1.示例代码 2.2.form项 2.3.prop项 2.4.rules项 2.5.rule项 2.6.使用规则 2.7.规则校验的核心 3.规则校验的进阶模式 3.1.嵌套对象属性名 3.2.自定义校验器validator 3.3.类型type 3.3.数据转换transform 3.4.数值范围Range 3.5.枚举值 3.6.正则Pattern 3.7.长度len 3.8.空白whitespace 3.9.i18n 4.规则校验的高级模式 4.

  • vue axios 表单提交上传图片的实例

    项目中用的element 的框架,然后在项目有一个添加数据需求是图片可上传,也可不上传, 然后问题就是element 中的上传控件在没有图片的时候是不会触发提交的,但接口写的是有file的  multipart/form-data    接收模式 所有只能自己另个模仿一个表单上传 <input class="file" name="file" type="file" accept="image/png,image/gif,imag

  • vue自动化表单实例分析

    vue自动化表单实例分析

    背景 B端系统表单较多,且表单可能含有较多字段 字段较多的表单带来了大片HTML代码 在大片HTML中,混杂着参数绑定.事件处理等逻辑,不利于维护 技术栈 Vue,Element(默认表单布局)适合中后台项目快速开发 目标 通过json配置快速生成表单的vue plugin. 设计目标 减少html 重复片段 表单字段组件可扩展 事件.联动通过eventbus 解耦 校验可扩展 表单布局可自定义 可视化配置 大概方案设计 使用 安装 npm install charlie-autoform ch

  • vue.js表单验证插件(vee-validate)的使用教程详解

    vue.js表单验证插件(vee-validate)的使用教程详解

    综述 名称:vee-validate 用途:简单的 Vue.js 表单验证插件 官网:地址 github:地址 特别提示 配合laravel使用特别好使 因为验证规则和laravel后端的验证规则一样 插件既可以应用于SPA也可以应用于多页面,通用性强 安装 单页安装 npm install vee-validate --save 浏览器安装 <!-- unpkg --> <script src="https://unpkg.com/vee-validate@2.0.0-rc.

  • 策略模式实现 Vue 动态表单验证的方法

    策略模式(Strategy Pattern)又称政策模式,其定义一系列的算法,把它们一个个封装起来,并且使它们可以互相替换.封装的策略算法一般是独立的,策略模式根据输入来调整采用哪个算法.关键是策略的 实现和使用分离 . 注意:本文可能用到一些编码技巧比如 IIFE(Immediately Invoked Function Expression, 立即调用函数表达式),ES6 的语法 let/const.箭头函数.rest 参数,短路运算符 等,如果还没接触过可以点击链接稍加学习 ~ 1. 你曾

  • vue自定义表单生成器form-create使用详解

    vue自定义表单生成器form-create使用详解

    介绍 form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成器.并且支持生成任何 Vue 组件.结合内置17种常用表单组件和自定义组件,再复杂的表单都可以轻松搞定. 文档| github 演示项目: 开源的高品质微信商城 功能 自定义组件 可生成任何Vue组件 自带数据验证 轻松转换为表单组件 通过 JSON 生成表单 通过 Maker 生成表单 强大的API,可快速操作表单 双向数据绑定 事件扩展 局部更新 数据验证 栅格布局 内置组件17种常用

  • vue elementUI 表单嵌套验证的实例代码

    一:表单一级验证 element中from组件内表单验证通过使用el-form标签,绑定model和rules属性进行表单验证 <el-form ref="form" :model="form" :rules="rules" label-width="110px" @submit.native.prevent> <el-form-item label="客户名称:" size="

随机推荐