ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Vue:表单双绑、组件

2020-02-22 09:53:42  阅读:141  来源: 互联网

标签:Vue 绑定 双绑 表单 item 双向 组件 数据


什么是双向数据绑定

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

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

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

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

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

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

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

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双向绑定</title>
</head>
<body>

<div id="app">
    单行文本:<input type="text" v-model="message"/>{{message}}<br/>
    多行文本:<textarea v-model="textMessage"></textarea>{{textMessage}}<br/>
    单选框:<input id="checked" type="checkbox" v-model="checkboxIscheck"/>
    <label for="checked">{{checkboxIscheck}}</label><br/>
    多选框:<br/>
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" checked>
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames" checked>
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames" checked>
    <label for="mike">Mike</label>
    <span>选中的值: {{ checkedNames }}</span><br/>
    单选按钮:
    <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">one</label>
    <span>选中的值: {{ picked }}</span>
    <hr/>
    下拉框:
    <select v-model="selected ">
        <option disabled>---请选择---</option>
        <option>-A-</option>
        <option>-B-</option>
        <option>-C-</option>
    </select>
    <span>选中的值: {{ selected  }}</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message:"Hello World!",
            textMessage: "textarea",
            checkboxIscheck: false,
            checkedNames: [],
            picked: [],
            selected: []
        }
    })
</script>
</body>
</html>

什么是组件

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

 

做第一组件

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>自定义组件</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>

<div id="app">
    <ul>
        <component-li v-for="item in message" v-bind:str="item"></component-li>
    </ul>
</div>

<script>
    Vue.component('component-li',{
        props: ['str'],
        template: '<li>Hello {{str}}</li>'
    })
    var vm = new Vue({
        el:"#app",
        data:{
            message:  ["张三", "李四", "王五"]
        }
    });
</script>
</body>
</html>

说明:

  • Vue.component():注册组件
  • my-component-li:自定义组件的名字
  • template:组件的模板
  • v-for="item in items":遍历 Vue 实例中定义的名为 items 的数组,并创建同等数量的组件
  • v-bind:str="item":将遍历的 item 项绑定到组件中 props 定义的名为 str 属性上;= 号左边的 str为 props 定义的属性名,右边的为 item in items 中遍历的 item 项的值

数据流向图

 

标签:Vue,绑定,双绑,表单,item,双向,组件,数据
来源: https://www.cnblogs.com/FondWang/p/12344251.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有