《Vue.js实战》一书 p117 练习 1& 2 (2019.12.19)

(最近学了下angular的教程,又回过头来看 vue.js实战一书...)

练习1 :在输入框聚焦时,增加对键盘上下按键的支持,相当于加1 和减 1

练习2 :增加一个控制步伐的prop--step,比如设置为10 ,点击加号按钮, 一次增加10 。

ps:只添加了少量代码,即完成了此2练习!

-----------------------------------------------------------------------------------------------------------------------

练习1解析:在组件 inputNumber中的inputh ,添加监听了keyup事件,并附加了修饰符up / down,调用监听函数handleUp/handleDown

@keyup.up="handleUp"
    @keyup.down="handleDown"

练习1解析:

父组件中,给子组件传入一个step特性,值为10

    <input-number v-model="value" :max="100" :min="0" :step="10"></input-number>

子组件 inputNumber中,props中添加step

step:{
      type:Number,
      default:10
    }

修改handleUp函数如下:

    handleUp(){
      if(this.currentValue >= this.max) return;
      this.currentValue += this.step;
    },

原文地址:https://www.cnblogs.com/sx00xs/p/12070585.html

时间: 2024-07-31 03:21:42

《Vue.js实战》一书 p117 练习 1& 2 (2019.12.19)的相关文章

vue.js实战学习——指令与事件

注:此内容摘抄自:梁灏的<Vue.js实战> 1.指令是Vue.js模版中最常用的一项功能,它带有前缀 v- ,比如:v-if , v-html ,v-pre 等.指令的主要职责就是当其表达式的值改变时,相应的将某些行为应用到DOM上. <div class="app1"> <p v-if="show">哈喽?</p> </div> var app=new Vue({ el:'.app1', data:{

vue.js实战学习——v-bind 及class与 style绑定

注:此内容摘抄自:梁灏的<Vue.js实战> 注:记得要引入vue.js才能运行哦,文章中贴出的代码直接复制是不行的,html css js 都放在了一起,而且也没有引用vue.js. DOM元素经常会动态的绑定一些class类名或style样式. 1.了解v-bind指令 它的主要用法是动态更新HTML元素上的属性. 在数据绑定中,最常见的两个需求就是元素的样式名称class和内联样式style的动态绑定,他们也是HTML的属性,因此可以使用v-bind指令.我们只需要用v-bind计算出表

vue.js实战学习——内置指令(一)

注:此内容摘抄自:梁灏的<Vue.js实战> 注:记得要引入vue.js才能运行哦,文章中贴出的代码直接复制是不行的,html css js 都放在了一起,而且也没有引用vue.js.   1.v-cloak v-cloak不需要表达式,它会在Vue实例结束编译时从绑定的HTML元素上移除,经常和CSS的display:none: 配合使用. <div class="app1" v-cloak> {{message}} </div> var app1

vue.js实战——购物车练习(包含全选功能)

vue.js实战第5章 54页的练习1 直接放代码好了,全选的部分搞了好久,代码好像有点啰嗦,好在实现功能了(*^▽^*) HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca

热烈庆祝《Vue.js 实战教程 V2.x(一)基础篇》上线了!

课程简介 课程地址:https://ke.qq.com/course/432961 机构名称:大华软件学院 授课讲师:大强老师 课程名称:Vue.js 实战教程 V2.x(一)基础篇 课程简介:包括前端发展史.Vue.js简介.第一个Vue.js程序.安装环境和Vue.Vue实例.模板语法.计算属性和侦听器.Class与Style绑定.条件渲染.列表渲染.事件处理.表单输入绑定.组件基础等等. 适合人群: 1.初出茅庐,想学习前端开发的同学: 2.没用过Vue.js,想学习更多框架的同学: 3.

Vue.js 实战总结

最近在某个项目中用到了Vue.js,从上手做开发到项目发布,一步步踩了不少坑.本文试图总结过去一个多月使用Vue.js中的一些经验,也算是一点心得体会吧,拿出来与大家分享,欢迎多多交流. Vue.js简介 Vue.js is a JavaScript framework for building astonishing web applications. Vue.js is a JavaScript library for creating web interfaces. Vue.js is a

Vue.js实战:初识Vue.js

一.Vue.js是什么 简单小巧的核心,渐进式技术栈,足以应付任何规模的应用. 简单小巧指的是Vue.js 压缩后大小仅有17KB 所谓渐进式(Progressive)就是你一步一步,有阶段性地来使用Vue.js,不必一开始就使用所有的东西. 使用Vue.js可以让Web开发变得简单,同时也颠覆了传统前端开发模式. 二.MVVM模式 与知名前端框架Angular.Ember 等一样,Vue.js在设计上也使用MVVM(Model-View-View-Model )模式. MVVM模式是有经典的软

Vue.js实战 章五:内置指令

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

Vue.js 实战教程 V2.x(8)Class与Style绑定

8 Class与Style绑定 操作元素的 class 列表和内联样式是数据绑定的一个常见需求. 8.1绑定HTML Class 对象语法 我们可以传给 v-bind:class 一个对象,以动态地切换 class: <div v-bind:class="{ active: isActive }"></div> 上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的 truthiness. 你可以在对象中传入更多属性来动态