Vue基础篇 之 v-model 模拟
我们知道vue中 为简化表单输入 提供了v-model 的语法绑定 将 vue的属性和表单元素进行了双向绑定 大大简化了表单数据操作的数据绑定
那么v-model 是如何实现双向绑定的呢?
今天我们来做个最简单的模拟 照例 先上代码
<body>
<div id="app">
【v-model】
<input type="text" v-model="message">
{{message}}
【模拟】
<input type="text" @input="changeInput" :value="message">
</div>
</body>
<script language="JavaScript">
var vm = new Vue({
el: "#app",
data: {
message: ""
},
methods: {
changeInput: function (e) {
this.message = e.target.value;
}
}
})
//组件化应用构建
</script>
我们知道v-model 与数据绑定后 输入框中的数据改变时,vue的属性也会改变,反之 当vue的属性改变之后,输入框中的值也发生改变
我们进行模拟时就注意这两个方面即可
1.输入vue属性改变 这个通过@input 属性可以实现 当输入框内容改变时 这个方法将会被调用
那么我们可以在这个方法中对vue 属性进行赋值
2.当属性发生改变后 input 内容发生改变 也就是input的 value 属性发生了改变
那么我可以通过 vue属性与input 输入框的value 属性进行绑定就可以实现
Vue基础篇 之 v-model 模拟的更多相关文章
- Vue 基础篇
Vue 基础篇 一.框架与库的区别 JQ库->DOM(DOM操作) + Ajax请求 art-template库->模板引擎 框架 -> 全方位.功能齐全 简易的DOM体验 + 发请 ...
- Vue 基础篇---computed 和 watch
最近在看前端 Vue方面的基础知识,虽然前段时间也做了一些vue方面的小项目,但总觉得对vue掌握的不够 所以对vue基础知识需要注意的地方重新撸一遍,可能比较零碎,看到那块就写哪块吧 1.vue中的 ...
- vue基础篇---vue组件
vue模块第一篇,因为公司马上要用到这vue开发.早就想好好看看vue了.只有实际工作中用到才会进步最快.vue其他的简单指令就不多讲了,没啥意思,网上一大堆.看w3c就ok. 组件这个我个人感觉坑蛮 ...
- vue基础篇(一)
1.简介 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手 ...
- vue基础篇---路由的实现《2》
现在我们来实现这样一个功能: 一个页面,包含登录和注册,点击不同按钮,实现登录和注册页切换: 编写父组件 index.html <div id="app"> <s ...
- vue基础篇---vue组件《2》
定义全局组件 我们通过Vue的component方法来定义一个全局组件. <div id="app"> <!--使用定义好的全局组件--> <coun ...
- vue基础篇---watch监听
watch可以让我们监控一个值的变化.从而做出相应的反应. 示例: <div id="app"> <input type="text" v-m ...
- vue基础篇---生命周期
每个钩子函数都在啥时间触发 beforeCreate 在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用. created 实例已经创建完成之 ...
- vue基础篇---路由的实现
路由可以有两种实现方式,一种是标签形式的,一种是js实现. 标签: <router-link to='/city'> 北京 </router-link> 标签还有另外一种实现方 ...
随机推荐
- W3School 教程整理
离线版大部分整理自 w3cschool ,少部分整理自 w3school ,由本人整理. 感谢 w3cschool 站长的无私奉献. 由于本人精力有限,此处的列表不一定能够及时更新,最新版本请到本人博 ...
- ubantu14.04搜狗拼音安装
1. 先卸载fcitx: sudo apt-get purge fcitx*2. 安装fcitx和libssh2-1: sudo apt-get install fcitx 和 sudo apt-ge ...
- CCF201503-1图像旋转
问题描述 旋转是图像处理的基本操作,在这个问题中,你需要将一个图像逆时针旋转90度. 计算机中的图像表示可以用一个矩阵来表示,为了旋转一个图像,只需要将对应的矩阵旋转即可. 输入格式 输入的第一行包含 ...
- jq移动端图片预览 (fly-zomm-img.js)
效果图: ===>==> 里面还与很多属性设置: index 关闭按钮等等 代码: //html-----------------------<div class="he ...
- 小程序中引入iconfont
注释:本人喜欢 font class, 你们可以依葫芦画瓢unicode和 symbol,,下面是 font class 演示: 1.选择好图标,然后: font class 2.步骤二: 复制 ...
- vuecli中配置webpack加快打包速度
webpack4中webpack 的DllPlugin插件可以将常见的库文件作为dll文件来,每次打包的时候就不用再次打包库文件了. 但是游鱼西在vuecli中已经去除这个选项,意识到带来的打包速度提 ...
- MPU9250/MPU6050与运动数据处理与卡尔曼滤波(1)
第一篇--概述和MPU6050及其自带的DMP输出四元数 概述 InvenSense(国内一般译为应美盛)公司产的数字运动传感器在国内非常流行,我用过它的两款,9250和6050.出于被国产芯片惯坏的 ...
- 聊聊UI自动化的PageObject设计模式
当我们开发UI自动化测试用例时,需要引用页面中的元素(数据)才能够进行点击(动作)并显示出页面内容.如果我们开发的用例是直接对HTML元素进行操作,则这样的用例无法"应对"页面中U ...
- Java学习day35(《大道至简》读后感)
对于大一之前的我来说,并不明白计算机这个专业要做的是什么,在我的眼中敲敲键盘打打字就是这个专业的全部:对于现在的我而言,这样的想法显然是十分幼稚的. 当初高考完填报志愿时选择了这门专业,也并不是因为自 ...
- Angular项目构建指南 - 不再为angular构建而犹豫不决(转)
如果你不知道什么是Angular或者根本没听说过,那么我接下来所说的对你来说毫无益处,不过如果你打算以后会接触Angular或者干脆要涨涨姿势~读下去还是有点用的. Angular和它之前所出现的其余 ...