摘要: lazy:使用了这个修饰符将会从“input事件”变成change事件进行同步 这样输入了数字并没有显示出来而是当移开光标后在触发 number 首先谁明这个number并不是限制用户的输入,而是将用户输入的数据尝试绑定为 js 中的 number 类型 举个例子,如果用户输入300,data 中绑 阅读全文
posted @ 2018-03-26 18:35 珊迪·奇克斯 阅读(4892) 评论(0) 推荐(0) 编辑
摘要: 表单输入绑定 你可以用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。 简单的说如 阅读全文
posted @ 2018-03-24 14:12 珊迪·奇克斯 阅读(302) 评论(0) 推荐(0) 编辑
摘要: 你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。但不必担心,因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上,它不会导致任何维护上的困难。实际上,使用 v-on 有几个好处: 扫一眼 阅读全文
posted @ 2018-03-24 10:31 珊迪·奇克斯 阅读(435) 评论(0) 推荐(0) 编辑
摘要: left .right .middle 这些修饰符会限制处理函数仅响应特定的鼠标按钮。 如下例子 上面的例子点击鼠标左键即可触发事件 right是按鼠标右键触发事件 middle就是按下滑轮触发事件 阅读全文
posted @ 2018-03-24 10:29 珊迪·奇克斯 阅读(377) 评论(0) 推荐(0) 编辑
摘要: 可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。 .ctrl .alt .shift .meta 例如: 就是说你必须按完 alt后再按下c才会触发事件 请注意修饰键与常规按键不同,在和 keyup 事件一起用时,事件触发时修饰键必须处于按下状态。换句话说,只有在按住 ctrl 阅读全文
posted @ 2018-03-24 09:53 珊迪·奇克斯 阅读(333) 评论(0) 推荐(0) 编辑
摘要: 在监听键盘事件时,我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符: 记住所有的 keyCode 比较困难,所以 Vue 为最常用的按键提供了别名: 全部的按键别名: .enter .tab .delete (捕获“删除”和“退格”键) .esc .space(空 阅读全文
posted @ 2018-03-23 15:07 珊迪·奇克斯 阅读(558) 评论(0) 推荐(0) 编辑
摘要: .capture .self .once 主要学习这三个事件修饰符的用法先来看看capture capture即是给元素添加一个监听器,当元素发生冒泡时,先触发带有该修饰符的元素。若有多个该修饰符,则由外而内触发。 就是谁有该事件修饰符,就先触发谁。 例子如下: 浏览器打开如下: 当点击obj4的时 阅读全文
posted @ 2018-03-22 14:53 珊迪·奇克斯 阅读(696) 评论(0) 推荐(0) 编辑
摘要: 可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。 例子 浏览器打开如下: 每点击一次按扭数字就会加1 事件处理方法: 但这种情况不适合逻辑很复杂的时候,当逻辑很复杂时我们用v-on接收一个需要调用的方法名称 如下: 浏览器打开显示: 内联处理器中的方法 除了 阅读全文
posted @ 2018-03-21 15:19 珊迪·奇克斯 阅读(167) 评论(0) 推荐(0) 编辑
摘要: 类似于 v-if,你也可以利用带有 v-for 的 <template> 渲染多个元素。比如: 显示如下: 阅读全文
posted @ 2018-03-19 11:19 珊迪·奇克斯 阅读(278) 评论(0) 推荐(0) 编辑
摘要: v-for 也可以取整数。在这种情况下,它将重复多次模板。 例子 浏览器打开显示 如果想对这10个数进行过滤呢(只要偶数) 我们可以创建返回过滤的计算属性。 浏览器显示: 我们也可以用methods方法来写 阅读全文
posted @ 2018-03-17 14:52 珊迪·奇克斯 阅读(878) 评论(0) 推荐(0) 编辑
摘要: 还是由于 JavaScript 的限制,Vue 不能检测对象属性的添加或删除: 对于已经创建的实例,Vue 不能动态添加根级别的响应式属性。但是,可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。例如,对于: 你可以添加一个新的 age 属性到嵌套的 u 阅读全文
posted @ 2018-03-13 15:44 珊迪·奇克斯 阅读(355) 评论(0) 推荐(0) 编辑
摘要: 1 2 3 4 5 Vue实现简易留言板 6 7 8 9 10 16 17 18 19 20 21 用户名: 22 23 24 25 年 龄: 26 27 28 ... 阅读全文
posted @ 2018-03-10 14:45 珊迪·奇克斯 阅读(2460) 评论(1) 推荐(1) 编辑
摘要: 头部导航条布局 html代码: 用无序列表制作头部导航条: 无序列表是上下布局排列的,那我们需要思考的是让他左右布局的方式排列 左右排列的方式我们所用的是float:left;浮动的方法让li左右布局 CSS样式: 1 .navbox{ 2 width: 960px; 3 height: 40px; 阅读全文
posted @ 2018-03-09 17:18 珊迪·奇克斯 阅读(655) 评论(0) 推荐(1) 编辑
摘要: Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性 这样无论我增加还是删除都是有响应的 在做一个例子结束这篇博客! 效果如下: 当鼠标滑动时颜色会发生变化 阅读全文
posted @ 2018-03-09 10:52 珊迪·奇克斯 阅读(244) 评论(0) 推荐(0) 编辑
摘要: 变异方法 (mutation method),顾名思义,会改变被这些方法调用的原始数组。相比之下,也有非变异 (non-mutating method) 方法,例如:filter(), concat() 和 slice() 。这些不会改变原始数组,但总是返回一个新数组。当使用非变异方法时,可以用新数 阅读全文
posted @ 2018-03-07 16:26 珊迪·奇克斯 阅读(496) 评论(0) 推荐(0) 编辑