文档章节

vue获取input输入框的数据

王子城
 王子城
发布于 06/21 14:04
字数 306
阅读 67
收藏 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。

    

© 著作权归作者所有

共有 人打赏支持
王子城
粉丝 4
博文 35
码字总数 28927
作品 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
vue项目如何刷新当前页面的方法_vue.js_脚本之家

vue项目如何刷新当前页面的方法 更新时间:2018年05月18日 16:41:06 作者:敲代码的小老头 我要评论 这篇文章主要介绍了vue项目如何刷新当前页面的方法,小编觉得挺不错的,现在分享给大家,...

这篇文章主要介绍了vue项目如何刷新当前页面的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
07/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

精选Spring Boot三十五道必知必会知识点!

Spring Boot、Spring MVC 和 Spring 有什么区别? 1、Spring Spring最重要的特征是依赖注入。所有 SpringModules 不是依赖注入就是 IOC 控制反转。 当我们恰当的使用 DI 或者是 IOC 的时候,...

java知识分子
13分钟前
1
0
docker多容器部署lnmp环境

环境:RHEL7.5 ip:192.168.10.102,主机名:lb02 一、创建web、数据库目录 web网站目录为:/wwwroot,属主属组:www [root@lb02 ~]# mkdir /wwwroot[root@lb02 ~]# useradd -s /sbin/nolo...

人在艹木中
42分钟前
1
0
eclipse运行springboot项目报错‘找不到或无法加载主类’

这是一个很烦躁的问题~,往往困住大家好长时间,然后各种百度。借此,咱将这个问题有可能产生的原因进行一下总结。若有不完善之处欢迎大家在下面留言指出~~ Duang!问题出现 然后开始尝试解决...

Code辉
今天
1
0
springboot oauth2 跨域设置

@Overridepublic void configure(HttpSecurity http) throws Exception { http .authorizeRequests() .antMatchers("/security/**") .authentica......

昆虫大侠
今天
1
0
08-利用思维导图梳理JavaSE-泛型

08-利用思维导图梳理JavaSE-泛型 主要内容 1.泛型的基本概念 1.1.定义 1.2.使用前提 1.3.使用泛型的好处 2.泛型的使用 2.1.泛型类定义 2.2.泛型对象定义 2.3.泛型中的构造方法 2.4.泛型方法的...

飞鱼说编程
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部