概念
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)
网友评论