devtools工具

使用devtools工具可以让你更加方便的查看到Vue实例中数据的变化。

在chorme商店搜索安装即可。

双向绑定

v-model

双向绑定一般都是与input家族进行绑定。

当表单内容发生改变时，数据层的数据也会发生改变。

<body>

<div id="app">

    <input type="text" v-model="v">

</div>

<script src="./vue.js"></script>

<script>

    const app = new Vue({

        el:"#app",

        data:{

            v:null,

        },

    })

</script>

</body>

watch监听

使用watch来监听数据的变化。

在watch对象中定义函数，函数名与被监听的数据名相同，它具有两个参数，newValue以及oldValue。

<body>

<div id="app">

    <input type="text" v-model="v">

</div>

<script src="./vue.js"></script>

<script>

    const app = new Vue({

        el: "#app",

        data: {

            v: null,

        },

        watch: {

            v(newValue, oldValue) {

                console.log(`${oldValue}=>${newValue}`);

            }

        }

    })

</script>

</body>

表单操作

input&textarea

双向绑定可直接应用于input以及textarea上。

<body>

<div id="app">

    <form action="">

        <div>

            <label for="username">

                <p>用户名</p>

                <input type="text" id="username" v-model="username">

            </label>

        </div>

        <p></p>

        <div>

            <label for="concise">

                <p>个人简介</p>

                <textarea name="" id="concise" rows="10" cols="30" v-model="concise"></textarea>

            </label>

        </div>

    </form>

</div>

<script src="./vue.js"></script>

<script>

    const app = new Vue({

        el: "#app",

        data: {

            username: "",

            concise: ""

        },

    })

</script>

</body>

checkbox单选&多选

如下，你必须同意协议，才能执行下一步：

<body>

<div id="app">

    <form action="">

        <p>我同意协议<input type="checkbox" v-model="status"></p>

        <button :disabled="!status">下一步</button>

    </form>

</div>

<script src='./vue.js'></script>

<script>

    "use strict";

    const app = new Vue({

        el: "#app",

        data: {

            status: false,

        },

    });

</script>

</body>

下面是多选的实例，后端返回了一组兴趣爱好，在选择后应该将其id传给后端，使用v-bind绑定id值，使用v-model与传递给后端的choice做绑定：

choice必须是一个Array类型，否则会抛出警告

<body>

<div id="app">

    <form action="">

        <p v-for="item in hobby">

            {{item.name}}<input type="checkbox" v-model="choice" :value="item.id">

        </p>

    </form>

</div>

<script src='./vue.js'></script>

<script>

    "use strict";

    const app = new Vue({

        el: "#app",

        data: {

            choice: [],

            hobby: [

                {"id": 1, "name": "篮球"},

                {"id": 2, "name": "足球"},

            ]

        },

    });

</script>

</body>

radio

使用radio时，只要v-model绑定同一数据源，就会产生互斥效果，不需要再指定额外的name属性。

<body>

<div id="app">

    <form action="">

        <!-- 使用v-bind，将会是int类型，否则是string -->

        男<input type="radio" v-model="gender" :value=1>

        女<input type="radio" v-model="gender" :value=2>

    </form>

</div>

<script src='./vue.js'></script>

<script>

    "use strict";

    const app = new Vue({

        el: "#app",

        data: {

            gender: 1,

        },

    });

</script>

</body>

select单选&复选

使用select来选择你喜欢的城市：

如果是select单选，传递给后端的值就是一个int类型。

如果是select复选，传递给后端的值就是一个Array类型。

<body>

<div id="app">

    <form action="">

        <select name="" v-model="choice" multiple>

            <option :value="item.id" v-for="item in city">{{item.name}}</option>

        </select>

    </form>

</div>

<script src='./vue.js'></script>

<script>

    "use strict";

    const app = new Vue({

        el: "#app",

        data: {

            choice: [],

            city: [

                {"id": 1, "name": "北京"},

                {"id": 2, "name": "上海"},

                {"id": 3, "name": "广州"},

            ],

        },

    });

</script>

</body>

修饰符

.lazy

使用该修饰符时，绑定的v-model数据源不会实时刷新，而是等到input失去焦点后才会更新。

<body>

<div id="app">

    <form action="">

        <input type="text" v-model.lazy="userInput">

    </form>

</div>

<script src='./vue.js'></script>

<script>

    "use strict";

    const app = new Vue({

        el: "#app",

        data: {

            "userInput": "默认值",

        },

    });

</script>

</body>

.number

使用该修饰符时，当你输入的内容为纯数字时将会自动转为int类型存储再v-model数据源中。

如果不使用该修饰符，则是String类型。

<body>

<div id="app">

    <form action="">

        <input type="text" v-model.number="userInput">

    </form>

</div>

<script src='./vue.js'></script>

<script>

    "use strict";

    const app = new Vue({

        el: "#app",

        data: {

            "userInput": "默认值",

        },

    });

</script>

</body>

.trim

使用该修饰符时，将会自动移除v-model数据源两侧的空格。

<body>

<div id="app">

    <form action="">

        <input type="text" v-model.trim="userInput">

    </form>

</div>

<script src='./vue.js'></script>

<script>

    "use strict";

    const app = new Vue({

        el: "#app",

        data: {

            "userInput": "默认值",

        },

    });

</script>

</body>

实例练习

搭建出一个漂亮的注册页面吧。

<body>

<div id="app">

    <div class="container">

        <div class="row">

            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-md-offset-2">

                <form action="" method="POST" role="form">

                    <p></p>

                    <legend class="text-center">欢迎注册</legend>

                    <div class="form-group">

                        <label for="username">用户名</label>

                        <input type="text" class="form-control" id="username" v-model="register.username">

                    </div>

                    <div class="form-group">

                        <label for="age">出生日期</label>

                        <input type="text" class="form-control" id="age" v-model.number="register.age">

                    </div>

                    <div>

                        <label class="radion-inline" for="male">男

                            <input type="radio" id="male" value="male" checked="checked" v-model="register.gender">

                        </label>

                        <label class="radion-inline" for="female">女

                            <input type="radio" id="male" value="female" v-model="register.gender">

                        </label>

                    </div>

                    <p></p>

                    <div class="form-group">

                        <label for="hobby">兴趣爱好</label>

                        <select id="hobby" class="form-control" required="required" multiple v-model="register.hobby">

                            <option value="1">篮球</option>

                            <option value="2">足球</option>

                            <option value="3">其他</option>

                        </select>

                    </div>

                    <div class="form-group">

                        <label for="introduction">个人简介</label>

                        <textarea id="introduction" cols="30" rows="10" class="form-control"

                                  v-model="register.introduction"></textarea>

                    </div>

                    <button type="注册" class="btn btn-primary" @click.prevent="post">Submit</button>

                </form>

            </div>

        </div>

    </div>

</div>

<script src='./vue.js'></script>

<script>

    "use strict";

    const app = new Vue({

        el: "#app",

        data: {

            register: {

                username: null,

                gender: null,

                age: null,

                hobby: [],

                introduction: "",

            },

        },

        methods: {

            post() {

                console.log(this.register);

            }

        }

    });

</script>

</body>

Vue 双向绑定的更多相关文章

vue双向绑定的原理及实现双向绑定MVVM源码分析
vue双向绑定的原理及实现双向绑定MVVM源码分析双向数据绑定的原理是:可以将对象的属性绑定到UI,具体的说,我们有一个对象,该对象有一个name属性,当我们给这个对象name属性赋新值的时候,新值 ...
IOS自带输入法中文不触发KEYUP事件导致vue双向绑定错误问题
先上图: 可以看到输入框中的内容和弹出框的内容不一致, <input class="am-fr labRight" id="txcode" type=&q ...
Vue双向绑定原理，教你一步一步实现双向绑定
当今前端天下以 Angular.React.vue 三足鼎立的局面,你不选择一个阵营基本上无法立足于前端,甚至是两个或者三个阵营都要选择,大势所趋. 所以我们要时刻保持好奇心,拥抱变化,只有在不断的变 ...
梳理vue双向绑定的实现原理
Vue 采用数据劫持结合发布者-订阅者模式的方式来实现数据的响应式,通过Object.defineProperty来劫持数据的setter,getter,在数据变动时发布消息给订阅者,订阅者收到消息后 ...
vue双向绑定原理分析
当我们学习angular或者vue的时候,其双向绑定为我们开发带来了诸多便捷,今天我们就来分析一下vue双向绑定的原理. 简易vue源码地址:https://github.com/jiangzhenf ...
vue双向绑定原理及实现
vue双向绑定原理及实现一.总结一句话总结:vue中的双向绑定主要是通过发布者-订阅者模式来实现的发布订阅 1.单向绑定和双向绑定的区别是什么? model view 更新单向绑定:mode ...
vue双向绑定原理源码解析
当我们学习angular或者vue的时候,其双向绑定为我们开发带来了诸多便捷,今天我们就来分析一下vue双向绑定的原理. 简易vue源码地址:https://github.com/maxlove123 ...
Vue双向绑定实现原理demo
一.index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...
Vue双向绑定原理（源码解析）---getter setter
Vue双向绑定原理大部分都知道Vue是采用的是对象的get 和set方法来实现数据的双向绑定的过程,本章将讨论他是怎么利用他实现的. vue双向绑定其实是采用的观察者模式,get和s ...
Vue双向绑定原理及其实现
在之前面试的时候被面试官问到是否了解Vue双向绑定的原理,其实自己之前看过双向绑定的原理,但也就是粗略的了解,但是没有深入.面试官当时让我手写一个原理,但是就蒙了

随机推荐

2.11-12 滴水new-delete-vector（动态数组编写）
去长沙玩了几天,没学 1.new 与 delete 通过调用分析了解到new在堆区开辟数据 delete就是释放数据案例 #include<stdio.h> #include <m ...
select省市联动+对应经销商、自定义箭头
HTML: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <met ...
推荐系统[八]算法实践总结V2：排序学习框架(特征提取标签获取方式)以及京东推荐算法精排技术实战
0.前言「排序学习(Learning to Rank,LTR)」,也称「机器排序学习(Machine-learned Ranking,MLR)」 ,就是使用机器学习的技术解决排序问题.自从机器学习的 ...
Java的注释和标识符
java 的注释规则 1. 单行注释语法:// 描述://用于当行注释,与JavaScript一样 //这是一个代码注释 2. javadoc注释语法: /** *注释内容 / 描述:多行注释中可 ...
JAVA排序的方法
//冒泡排序法: package fuxi;public class Bubble { public static void main(String[] args) { int a ...
使用expect在实现跨机器拿日志
1.shell脚本 config_file_path=$1 #集群的ip port=$2 #获取集群服务端口中的日志 sjc=$3 #时间戳 user_name="sdbadmin" ...
NOIP 2022 游记
2022 NOIP (NOI Plus) 游记 Day-9 - Day-2 一句话总结,原神打的有点小多了.现在想想真的有点后悔(但也不是很手动滑稽,如果多做几个题或者把短板数论和数据结构看看也许这次 ...
loj3076
参照 E_Space 的候选队论文,我们建出广义串并联图进行「删一度点」「缩二度点」「叠合重边」操作合并信息的表达式树. 我们把其描述成一颗 Leafy Tree. 我们不妨在每个叶节点处存一个点或者 ...
No.2.1
字体图标( 目的:使用字体图标技巧实现网页中简洁的图标效果) 字体图标展示的是图标,本质是字体,处理简单的.颜色单一的图片优点:灵活性:灵活的修改样式,例如:尺寸,颜色等轻量级:体积小,渲染快,降 ...
Java虚拟机中 -XX:+PrintFlagsFinal与XX:+PrintCommandLineFlags 中MaxHeapSize的值不同的原因
size_t CollectorPolicy::compute_heap_alignment() { // The card marking array and the offset arrays f ...

Vue 双向绑定