文档章节

vue获取input输入框的数据

王子城
 王子城
发布于 06/21 14:04
字数 306
阅读 178
收藏 0

    用惯了jQuery,突然使用vue感觉很不习惯,有很多不同的地方,感觉是两个不同的思想来写前端的代码。jQuery是使用选择器($)选取DOM对象,对其进行赋值、取值、事件绑定等操作。而Vue则是通过Vue对象将数据和View完全分离开来了。

    Vue在获取input中数据的方式和jQuery有略微的区别。

<input class="login_input" placeholder="请输入账号" type="text" id="username"/>

    如上面一段代码,如果jQuery想要获取input的数据通常的做法是根据id获取,$('#username').val()。

    Vue在这里做法和jQuery有细微区别,jQuery是通过id获取对应节点然后获取数据,而Vue则是通过ref获取input数据。username = this.$refs.username.value。

<input class="login_input" placeholder="请输入账号" type="text" ref="username"/>

注意两则代码中的区别,一个是id一个是ref。

    

© 著作权归作者所有

共有 人打赏支持
王子城
粉丝 6
博文 41
码字总数 32317
作品 0
武汉
程序员
私信 提问
加载中

评论(2)

王子城
王子城

引用来自“龙影”的评论

jquery 的思想要完全抛弃才能更快上手。忘记你学过JQ
的确,感觉有很多相矛盾的地方
龙影
龙影
jquery 的思想要完全抛弃才能更快上手。忘记你学过JQ
Vue进阶(五):与 Vuex 的第一次接触

Vue进阶(五):与 Vuex 的第一次接触 在 Vue.js 的项目中,如果项目结构简单,父子组件之间的数据传递可以使用 props 或者 $emit 等方式 (详参博文《Vue进阶(六):组件之间的数据传递》)...

sunhuaqiang1
05/05
0
0
[vue] 表单输入格式化,中文输入法异常

v-model 是 vue.js 提供的语法糖,根据不同的表单控件监听不同的事件,实现对表单控件的数据双向绑定。当控件是输入框时,v-model 监听其 input 事件。如下所示,这两种写法有什么区别吗? ...

张跃迁不想说话
05/30
0
0
前端框架Vue(7)——Vue+ElementUI:简易login登录框重构

目标:Vue 来实现一个简易的登录框,有 用户名(user)和 密码(password),具备简单的校验。 使用的UI框架:ElementUI vue 登录框的优点: 无须操作 dom,只需建立数据模型,自动渲染。 双向...

docallen
2017/04/14
0
0
你不知道的Vuejs - Vuejs 最佳实践(1)

by yugasun from yugasun.com/post/you-do… 本文可全文转载,但需要保留原作者和出处。 有了前面文章的铺垫,相信一路看过来的新手的你开发一个中型的 Vuejs 应用已经不在话下,包括 Vuejs ...

yugasun
06/01
0
0
V.HSIAN/vue-component

vue component 在线文档 https://hsian.github.io/vc-dist/index.html#/component/button Install # 克隆仓库git clone https://github.com/hsian/vue-component.git cd vue-component and n......

V.HSIAN
07/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

springboot中filter的用法

一、在spring的应用中我们存在两种过滤的用法,一种是拦截器、另外一种当然是过滤器。我们这里介绍过滤器在springboot的用法,在springmvc中的用法基本上一样,只是配置上面有点区别。 二、f...

xiaomin0322
22分钟前
3
0
java项目修改了更换了jdk版本报错进行修改

java项目原来用的是1.8版本的,改成1.7版本后,项目会报错,要进行的修改是 然后是clean一下项目,然后是选中项目的buildpath,然后是configurebuildpath,然后是看jdk是否进行修改...

myAll_myAll
34分钟前
3
0
Gartner 2018 数据库系列报告发布 巨杉数据库连续两年入选

近期,Gartner陆续发布了2018年的数据库系列报告,包括《数据库魔力象限》《数据库核心能力》以及《数据库推荐报告》。其中,SequoiaDB巨杉数据库作为业界领先的金融级分布式交易型数据库产品...

巨杉数据库
36分钟前
1
0
Navicat闲置一段时间卡死问题的解决

先关闭连接,再右键点击所需要设置的链接,进入编辑连接,进入高级项,勾选保持连续间隔(秒):时间设置短一些,比如30秒,完成!!

joyStalker
37分钟前
1
0
理解Java中的弱引用(Weak Reference)

1. What——什么是弱引用? Java中的弱引用具体指的是java.lang.ref.WeakReference<T>类,我们首先来看一下官方文档对它做的说明: 弱引用对象的存在不会阻止它所指向的对象变被垃圾回收器回...

绝地逢生
37分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部