Vue文档整理

Vue

Vue概述

• Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架
• 数据双向绑定，单向数据流
• 数据驱动视图
• .vue 单文件组件（SFC）

Vue基础语法

1、模板语法

文本

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

<span>Message: {
  { msg }}</span>

Mustache 标签将会被替代为对应数据对象上 msg property 的值。无论何时，绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新。

通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：

<span v-once>这个将不会改变: {
  { msg }}</span>

html

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：

<span v-html="rawHtml"></span>

attribute

Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind 指令：

<div v-bind:id="dynamicId"></div>

使用 JavaScript 表达式

对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

{
  { number + 1 }}

{
  { ok ? 'YES' : 'NO' }}

{
  { message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

2、指令

v-bind 动态绑定值

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

v-on 绑定DOM事件

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

v-model双向绑定

你可以用 v-model 指令在表单 <input>