半夏微澜ぺ - 博客园

2017年3月15日

摘要：渲染后的DOM绑定click事件add().点击组件的局部变量counter+1;this.$emit("increment")触发increment事件，increment事件对应的incrementTotal 什么是组件组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的阅读全文

posted @ 2017-03-15 18:35 半夏微澜ぺ阅读(636) 评论(0) 推荐(0)

表单控件绑定

摘要：你可以用v-model指令在表单控件元素创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，单v-model 本质上不过是语法糖，它负责监听用户的输入事件以更新数据。并特别处理一些极端的例子。 v-model并不关心表单控件初始化所生成的值。因为它会选择vue实例数据来作为阅读全文

posted @ 2017-03-15 11:46 半夏微澜ぺ阅读(550) 评论(0) 推荐(0)

事件处理器

摘要：监听事件可以用v-on指令监听DOM事件来触发一些javascript代码。 demo: 方法事件处理器许多事件处理器的逻辑都很复杂，所以直接把javaScript代码写在v-on指令中是不可行的。因此v-on可以接收一个定义的方法来调用有时也需要在内联语句处理器中访问原生DOM事件，可以用特阅读全文

posted @ 2017-03-15 09:48 半夏微澜ぺ阅读(599) 评论(0) 推荐(1)

2017年3月14日

列表渲染v-for

摘要： v-for我们用v-for指令根据一组数据的选项列表进行渲染。v-for指令需要以item in items形式的特殊语法，items是源数据数组并且item是数组元素迭代的别名。 demo: 渲染的结果在v-for块中，我们拥有对父作用域属性的完全访问权限。v-for还支持一个可选的第二个参数作阅读全文

posted @ 2017-03-14 17:39 半夏微澜ぺ阅读(5480) 评论(0) 推荐(0)

条件渲染

摘要： v-if demo: <template>中v-if条件组因为v-if是一个指令，需要将它添加到一个元素上。但是如果我们想要切换多个元素呢？此时我们可以把一个<template>元素当做包装元素，并在上面使用v-if。最终的渲染结果不会包含<template>元素。可以使用v-else指令来表阅读全文

posted @ 2017-03-14 16:40 半夏微澜ぺ阅读(710) 评论(0) 推荐(0)

2017年3月13日

class与style绑定

摘要：数据绑定一个常见需求是操作元素的class列表和内联样式。因为它们都是属性，我们可以用v-bind处理他们：只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易出错。因此，在v-bind用于class和style时，Vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或者数阅读全文

posted @ 2017-03-13 18:49 半夏微澜ぺ阅读(376) 评论(0) 推荐(0)

vue实例以及生命周期

摘要： Vue实例构造器每一个Vue.js应用都是通过构造函数Vue创建一个Vue的根实例启动的：虽然没有完全遵循MVVM模式，Vue的设计无疑受到了它的启发。因此在文档中经常会使用vm这个变量名表示Vue实例。在实例化Vue时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩阅读全文

posted @ 2017-03-13 18:06 半夏微澜ぺ阅读(279) 评论(0) 推荐(0)

vue 模板语法

摘要：模板语法 Vue.js使用了基于HTML的模板语法，允许开发者声明式将DOM绑定至底层Vue实例的数据。所有Vue.js的模板都是合法的HTML,所以可以被遵循规范的浏览器和HTML解析器解析。在底层的实现上，Vue将模板编译成虚拟DOM渲染函数。结合响应系统，在应用系统改变时，Vue能够智能计算阅读全文

posted @ 2017-03-13 18:04 半夏微澜ぺ阅读(640) 评论(0) 推荐(0)

vue 指令

摘要：指令指令是带有v-前缀的特殊属性。指令属性的值预期是单一javascript表达式（除了v-for）,指令的职责就是当其表达式值改变时相应地将某些行为应用到DOM上； #参数有些指令能接受一个'参数'，在指令后以冒号指明。例如，v-bind指令被用来相应地更新HTML属性：在这里href是参数阅读全文

posted @ 2017-03-13 18:02 半夏微澜ぺ阅读(596) 评论(0) 推荐(0)

计算属性 computed

摘要：计算属性 computed 计算缓存 vs Methods js 这里我们声明了一个计算属性reverseMessage。我们提供的函数将用作属性vm.reversedMessage 的getter。你可以像绑定普通属性一样在模板中绑定计算属性。Vue知道vm.reversedMessage 依赖阅读全文

posted @ 2017-03-13 18:00 半夏微澜ぺ阅读(3282) 评论(0) 推荐(0)