vue 知识点整理

Vue
357
0
0
2022-04-10
标签   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)