从零单排vue第四章--处理用户输入

2019-12-02 admin

<html lang=“en”> <head> <meta charset=“utf-8”> <title>v-on</title> <script src=“vue.js”></script> </head> <body> <div id=“app”> <span>{{count}}</span> <button v-on:click=“handleClick”>加1</button> </div> <script> var app = new Vue({ el: ‘#app’, data: { count: 0 }, methods: { handleClick() { this.count++ } } }) </script> </body> </html>


##### 运行结果:

> 每次点击button,数值加1

##### 代码解析:

*   代码第11行,button标签内添加了一个v-on:click事件监听器。
*   在vue实例化对象中,定义了一个data属性,count初始化为0。
*   在vue实例化对象中,还定义了一个方法,handleClick方法。`v-on:click="handleClick"`语句就是将事件监听器绑定在该方法中。
*   handleClick方法中实现了count加1的功能。注意,this的作用就是表示当前的vue实例对象。

#### 表单输入的双向绑定(v-model指令)

Vue 还提供了 `v-model` 指令,它能轻松实现表单输入和应用状态之间的双向绑定。

如下代码:

<!DOCTYPE html> <html lang=“en”> <head> <meta charset=“utf-8”> <title>v-on</title> <script src=“vue.js”></script> </head> <body> <div id=“app”> <span>{{msg}}</span> <input v-model=“msg” /> </div> <script> var app = new Vue({ el: ‘#app’, data: { msg: 0 } }) </script> </body>

[转载]原文链接:https://segmentfault.com/a/1190000021169100

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-80256.html

文章标题:从零单排vue第四章--处理用户输入

相关文章
JavaScript 事件流、事件处理程序及事件对象总结
JS与HTML之间的交互通过事件实现。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器(或处理程序)来预定事件,以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式,支持页面的行为与页面的外观之间的松散耦合。...
2017-04-05
可以从CSS框架中借鉴到什么
现在很多人会使用 CSS 框架进行快速建站。   那 CSS 框架是什么呢,它通常是一些 CSS 文件的集合,这些文件包括基本布局、表单样式、网格、简单组件、以及样式重置。使用 CSS 框架大大降低工作成本进行快速建站。   当然对于一些大...
2016-03-11
vue-awesome-swiper的使用以及API整理
一、先说一个看关于vue-awesome-swiper的一个坑 vue项目的package.json中显示的&lt;span style=“color: orange;”&gt;“vue-awesome-swiper”: “^2.5.4”&...
2018-04-26
好消息!好消息!饿了么ElementUI用户的福音——ElementUIVerify!
如果你受够了饿了么ElementUI原生的校验方式,那就来试试它吧! 前言 饿了么ElementUI虽好,但表单校验的体验不够理想 如果说产品开发要讲究用户体验,那插件开发也要讲究开发体验,而好的开发体验,要靠好的api设计来保障 本人专注...
2017-12-24
三步搞定vue在vscode的环境配置问题
1. vscode基础开发插件 vscode-icons 图标美化 Debugger for Chrome 调试 Beautify 代码格式化 Prettier 代码格式化 ESLint 代码规范 JavaScript (ES6) cod...
2017-12-25
vue.js实现请求数据的方法示例
vue2.0示例代码如下: var vm = new Vue({ el:&quot;#list&quot;, data:{ gridData: &quot;&quot;, }, ...
2017-03-20
js监听input输入框值的实时变化实例
1、在元素上同时绑定 oninput 和onporpertychanger事件 例: &lt;script type=&quot;text&#x2F;JavaScript&quot;&gt; function aa(e){alert(&qu...
2017-02-16
从 Node.js 分裂出 Io.js 事件看开源软件谁做主
Node.js 作为服务器编程语言的后起之秀,常用来构建和运行 Web 应用,近日却爆出其社区出现分裂。由于对官方运营商 Joyent 公司在 Node.js 管理上的长期不满,多位核心开发者另立门户,创建了分支 Io.js。从 GitHu...
2015-11-12
从 JavaScript 到 TypeScript - 声明类型
从 JavaScript 语法改写为 TypeScript 语法,有两个关键点,一点是类成员变量 (Field) 需要声明,另一点是要为各种东西 (变量、参数、函数 / 方法等) 声明类型。而这两个点直接引出了两个关键性的问题,有哪些类型?...
2017-06-05
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
直接贴代码了: 先上输入前的样子: &lt;style&gt; #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block...
2017-03-17
回到顶部