随笔分类 -  Vue

Vue(九) 自定义指令
摘要：前面介绍了许多 Vue 内置的指令，比如 v if、v show等，这些丰富的指令能满足我们绝大部分的业务需求，不过在需要一些特殊功能时，我们仍然希望对 DOM 进行底层的操作，这时就要用到自定义指令。 基本用法 自定义指令的注册方法和组件很像，也分全局注册和局部注册，比如注册一个 v focus 阅读全文
posted @ 2018-11-23 20:18 kindleheart 阅读(211) 评论(0) 推荐(0)
Vue(八) 数字输入框组件案例
摘要：数字输入框是对普通输入框的扩展，用来快捷输入一个标准的数字，如图： 代码： 阅读全文
posted @ 2018-11-23 10:56 kindleheart 阅读(402) 评论(0) 推荐(0)
Vue(七) 组件详解
摘要：组件 (Component) 是 Vue.js 最核心的功能，也是整个框架设计最精彩的部分，当然也是最难掌握的。 组件与复用 组件用法 组件与创建 Vue 实例类似，需要注册后才可以使用。注册有全局注册和局部注册两种方式。全局注册后任何 Vue 实例都可以使用。 全局注册 全局注册示例代码如下： m 阅读全文
posted @ 2018-11-22 23:54 kindleheart 阅读(723) 评论(0) 推荐(0)
Vue(六) 表单与 v-model
摘要：学习使用 v model 指令完成表单数据双向绑定 基本用法 表单控件在实际业务较为常见，比如单选，多选、下拉选择、输入框等，用他们可以完成数据的录入、校验、提交等。Vue.js 提供了 v model 指令，用于在表单元素上双向绑定数据，例如： 在输入框输入的同时，{{ message }} 也会 阅读全文
posted @ 2018-11-21 11:00 kindleheart 阅读(645) 评论(0) 推荐(0)
Vue(五) 购物车案例
摘要：这一篇把之前所学的内容做一个总结，实现一个购物车样例，可以增加或者减少购买数量，可移除商品，并且购物车总价随着你的操作实时变化。 实现效果如图： 代码： 阅读全文
posted @ 2018-11-20 22:20 kindleheart 阅读(1731) 评论(0) 推荐(0)
Vue(四) 内置指令
摘要：现在介绍 Vue.js 中 更多的内置指令 基本指令 v cloak v cloak 不需要表达式，它会在 Vue 实例结束编译时从绑定的 HTML 元素上移除，经常和 CSS 的 display: none; 配合使用： 这时虽然已经加了指令，但其实没有起到任何作用，Vue.js 文件还没加载完时 阅读全文
posted @ 2018-11-20 18:53 kindleheart 阅读(863) 评论(0) 推荐(0)
Vue(三) v-bind 及 class 与 style 绑定
摘要：DOM 元素经常会动态绑定一些 class 类名 或 style 样式，现在介绍使用 v bind 指令来绑定 class 和 style 的多种方法。 了解 v bind 指令 在之前已经介绍了指令 v bind 的基本用法以及它的语法糖，它的主要用法是动态更新 HTML 元素上的属性，回顾之前的 阅读全文
posted @ 2018-11-19 19:40 kindleheart 阅读(1147) 评论(0) 推荐(0)
Vue(二) 计算属性
摘要：模板内的表达式常用于简单的运算，当过长或逻辑复杂时，难以维护，计算属性就是解决该问题的 什么是计算属性 表达式如果过长，或逻辑更为复杂，就会变得臃肿甚至难以维护，比如： 该表达式包含 3 个操作，并不是很清晰，可以用计算属性进行改写： 所有的计算属性都以函数的形式写在 Vue 实例内的 comput 阅读全文
posted @ 2018-11-19 16:06 kindleheart 阅读(486) 评论(0) 推荐(0)
Vue(一) 数据绑定和第一个Vue应用
摘要：学习 Vue.js 最有效的方法是查看官网文档 数据绑定和第一个Vue应用 先从一段简单的 HTML 代码开始，感受 Vue.js 最核心的功能。 这是一段非常简单的代码，但是体现了 Vue 最核心的功能：双向绑定。在输入框输入的内容会实时显示在页面的 h1 标签内。 Vue实例与数据绑定 实例与数 阅读全文
posted @ 2018-11-19 10:27 kindleheart 阅读(403) 评论(0) 推荐(0)