Vue 2.x教程之基础API

本文主要介绍的是关于Vue 2.x之基础API的相关内容，主要内容如下 模板语法（文本插值、属性绑定、JS表达式、过滤器、指令） Vue实例（viewModal(属性+函数)、生命周期） 计算属性和监听器 (computed(get,set) 与 watch) 样式绑定（对象绑定、数组绑定、内联绑定） 条件绑定（v-if v-show） 列表渲染 (v-for、:key、数组监测、过滤/排序) 事件处理 (监听、修饰符、key修饰符) 表单输入绑定（text、checkbox、radio、select） 一、模板语法 文本插值 属性绑定 模板中的JS 支持表达式执行，但不支持多个表达式、语句和控制流的执行 属性绑定和绑定的数据都支持JS表达式 过滤器 指令 注册过滤器 注意 注册过滤器时，如果需要传递参数，必须从第二个参数开始，第一个参数为当前绑定的数据 过滤器一般用于简单的文本格式化，如果是对多个状态数据，或是复杂的数据处理应该使用计算属性 注册指令 二、Vue实例 Vue 实例，实则也就是 ViewModel（数据 + 函数），都是通过构造函数 Vue 创建 三、计算属性与监听器 computed 任何复杂逻辑，都应当使用计算属性 可以像绑定普通属性一样在模板中绑定计算属性 声明式地创建依赖关系，计算属性的 getter 是干净无副作用的，因此也是易于测试和理解的。 使用 methods 和 filter 也能达到计算属性同样的效果，但计算属性使模板更加简单清晰（模板中放入太多的逻辑会让模板过重且难以维护）。 计算属性有 计算缓存 的特性，计算属性是基于它的依赖缓存，只有在它的相关依赖发生改变时才会重新取值，而 methods 每次执行都会重新取值。 什么需要缓存？ 假设我们有一个重要的计算属性 A ，这个计算属性需要一个巨大的数组遍历和做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter ！如果你不希望有缓存，请用 method 替代。 getter与setter 计算属性默认为 getter 也可以添加 setter watch 使用 watch 来监听data，实时响应数据的变化 例：监听用户输入，显示 正在输入...，输入完成时，显示 请稍等...，并发送异步请求，请求成功里，显示答案 使用 watch 选项允许我们执行异步操作（访问一个 API），限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这是计算属性无法做到的。 四、样式绑定 使用 v-bind:class 与 v-bind:style 来绑定样式 对象语法绑定 class 绑定的是对象的 key，如果对象的值为 true，则绑定 key style 绑定的整个 对象 绑定 class 绑定style 数组语法绑定 class 绑定的是数组的 值 style 绑定的是数组中的 对象 五、条件渲染 v-if 切换元素的隐藏和显示 v-if、v-else、v-if-else 切换单个元素 切换多个元素 多条件判断 条件渲染默认会复用相同的组件，如果不复用元素，可添加 key 值 v-show 用于切换元素样式属性 display 的 block 和 none 与 v-if 不同的是，元素隐藏时，并没有从DOM中删除，而 v-if 是删除了元素保存在缓存中。 注意 v-show 不支持 <template> 语法 v-if 是真实的条件渲染，因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。 区分 v-if 与 v-show 的使用场景： v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗 如果需要频繁切换使用 v-show 较好 如果在运行时条件不大可能改变则使用 v-if 较好 六、列表渲染 v-for='item of items / item in items' 用于迭代对象或数组中的元素 基本用法 添加第二个参数可以获取当前迭代的 key 值 数组迭代 对象迭代 循环组件，向组件中传递数据 组件有自己的作用域，向组件中传递数据需要使用属性传递 v-for 具有比 v-if 更高的优先级 判断每一个todo项是否可显示 判断是否需要迭代todos 添加 key 属性 提升重复渲染效率 数组监测 Vue重写了数组的变异方法，用于监测数组的更新 push() 、pop() 、shift() 、unshift() 、 splice() 、sort() 、reverse() 这些操作会改变原有数组，为变异方法 非变异方法返回新的数组，可以用于替换旧的数组 直接修改数组长度、利用索引修改数组的值，不会被监听到 过滤/排序 使用计算属性对原有数组进行过滤和排序 七、事件监听 v-on v-on 用于监听绑定的事件 原生事件对象 使用 $event 传递原生事件对象 事件修饰符 methods 应该只处理纯粹的数据逻辑，而不是去处理 DOM 事件细节      .stop 阻止事件冒泡      .prevent 阻止默认事件      .capture 使用捕获模式      .self 只有当事件作用于本身时才触发      .once 只绑定一次 按键修饰符 监听键盘按下的键值 监听keyCode 常用按键别名 .enter .tab .delete (捕获 “删除” 和 “退格” 键) .esc .space .up .down .left .right 2.1.0 .ctrl .alt .shift .meta 按键组合 所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上 当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何自己清理它们。 八、表单输入绑定 使用 v-modal 给表单控件绑定相关数据（双向绑定） v-modal 是一个语法糖 基本输入 当有选项有 value 属性时，选中时，返回 value, 当属性没有 value 时，选中时返回字符串或 true/false 绑定动态的value v-model 绑定的 value 通常是静态字符串，对于 radio、checkbox、select，可以动态的使用v-bind设置value 修饰符 v-modal 的修饰符 .lazy、 .number、.trim 自定义输入组件 使用 v-modal 自定义输入组件 前提条件，组件必须有 value 属性， 在有新的value时，可通过 input 事件获取更新的值。 自定义的货币输入组件 总结 以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。