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双向绑定的原理,其实自己之前看过双向绑定的原理,但也就是粗略的了解,但是没有深入.面试官当时让我手写一个原理,但是就蒙了

随机推荐

python3 os.getcwd()和os.path.realpath()区别
在写一个android手机的自动化测试,用appium+python3,跟室友讨论拟定了一个框架,在写2个通用的简单模块时,遇到问题. 同一个目录下2个模块,driver.py(用于获取app 句柄) ...
CF1742G Orray
题目传送门思路大抵算是一道位运算入门题? 首先为了使 \(b_i\) 的字典序最大,我们注意到 \(b_1=a_1\),所以 \(a_1\) 必然是序列中最大的那个数. 接下来考虑贪心,设当前已经 ...
病程极短(≤16周)的495例未分化关节炎患者随访2年的结局[EULAR2015_SAT0055]
病程极短(≤16周)的495例未分化关节炎患者随访2年的结局 SAT0055 TWO-YEAR OUTCOME IN 495 PATIENTS WITH UNDIFFERENTIATED ARTH ...
golang输出字母a-z
方法1: func main() { for i := 0; i < 10; i++ { ss := 'a' + i fmt.Printf("==%c", ss) } }
Vue进度条组件
1.进度条颜色是渐变的 <template> <div id="progress_bar" ref="myChart"></div ...
java学习日记20230301-API文档
JAVA API java application programming interinterface 应用程序编程接口,是java提供的基本编程接口在线文档:https://www.matoo ...
AttributeError: module 'openai' has no attribute 'ChatCompletion'的解决办法
原因 openai库版本过旧解决办法(二选一) pip install -U openai 下载安装包放入你的项目根目录下, 改名格式zip为whl(即:openai-0.27.0-py3-none ...
DRF全局总结
基础部分一.创建工程 1.创建虚拟环境 python -m venv 路径 2.安装Django 进入虚拟环境 pip install Django 3.创建项目 django-admin star ...
打卡ts day02--使用typescript 写评论demo
demo.ts // DataHelpler 类用于操作localStorage class DataHelpler { dataKey: string; //localstorage key pr ...
python启动robotframework-ride失败，解决方案
python启动robotframework-ride提示str(os.path.dirname(rf_file), 'utf-8'))).publish() UnicodeDecodeErro的解决 ...

Vue 双向绑定