vue 知识点整理

概念

Vue.js 一套构建用户界面的渐进式框架，Vue 只关注视图层，采用自底向上增量开发的设计；它的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。

Vue.js 模板语法

Vue.js 使用了基于HTML 的模板语法，允许开发者声明式的将 DOM 绑定至底层 Vue 实例的数据，它的核心是一个采用了简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

插值

• 文本：数据绑定最常见的形式就是使用 {{...}} 双大括号的文本插值。
• HTML：使用 v-html 用于输出 HTML代码。
• 属性：HTML中的属性值应该使用 v-bind 指令。
• 表达式

指令：带有 v- 前缀的特殊属性，用于在表达式的值改变时，将某些行为应用到 DOM上。

• 参数：在指令后面以 : 指明。
• 修饰符：以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

用户输入：在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定

过滤器：Vue.js 允许自定义过滤器，被用作一些常见的文本格式化。

函数接受表达式的值作为第一个参数；可以串联；是JavaScript函数。

缩写：Vue.js 为两个最为常用的指令提供了特别的缩写：v-bind 和 v-on。

条件语句

• v-if：指令将根据表达式的值（true或false）来决定是否插入元素。
• v-else：可以用它给 v-if 添加一个 else 块。
• v-else-if：用作v-if 的 else-if 块。可以链式的多次使用。
• v-show：根据条件展示元素。

循环语句

v-for 指令，需要以 site in sites 形式的特殊语法，sites 是源数据数组并且 site 是数组元素迭代的别名，它可以绑定数据到数组来渲染一个列表。

• 迭代对象，通过一个对象的属性迭代数据。
• 迭代整数，也就是循环整数。

计算、监听属性

计算关键词：`computed

监听关键词：watch，通过它来响应数据的变化。

样式绑定

class 和 style 是HTML元素的属性，用于设置元素的样式，可以用 v-bind 来设置样式属性。

事件处理

v-on 指令，接收一个定义的方法来调用。

事件修饰符

• .stop
• .prevent
• .capture
• .self
• .once

组件

组件是 Vue.js 最强大的功能之一，它可以扩展HTML元素，封装可重用的代码。组件系统可以让我们用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树。

注册全局组件语法：Vue.component(tagName, options)