Vue.js 学习(3) -- 语法基础

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上， Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，你也可以不用模板，直接写渲染（render）函数，使用可选的 JSX 语法。

插值

1、文本插值：

使用双大括号绑定数据，这种语法称为“Mustache”：

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

双括号表示的就是一个文本插值。其中，msg是数据对象的属性，例如像下面这样：

var app = new Vue({
  el: '#vueApp',
  data: {
    msg: 'Hello VueJS!'
  }
})

只要对象的属性msg发生了变化，文本插值也就会更新。

还记得前面说过的vue指令吗？通过指令v-once，我们也可以一次性的为{{ msg }}赋值，之后，当msg再次更新的时候，span标签内的值也都不会改变了。v-once的用法：

<span v-once>This will not change when msg updates: {{ msg }}</span>

2、HTML插值

双大括号会将括号内的内容解释为纯文本，而非html，如果想要输出html，请使用v-html指令。

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

这样，该标签内的数据绑定将会被忽略。

3、属性

如果想为html标签的属性绑定数据，不能使用双大括号，应该使用v-bind指令。
栗子：

<div v-bind:class="dynamicClass"></div>

var app = new Vue({
  el: '#app',
  data: {
    dynamicClass: 'visibleClass'
  }
})

4、JavaScript表达式

在双大括号内我们可以使用JS表达式，也就是，双大括号内支持运算。

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

在使用v-bind指令时，也可以使用JS表达式：

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

指令

这个概念在前面的博客中已经提到过了，也简单了解了例如v-on, v-bind, v-for等等一系列指令。

指令，采用统一格式：v-xxx。它的目的就是，当某些属性值改变时，与之相关的DOM需要作出改变。
例如：

<p v-if="seen">Now you see me</p>

此时，如果seen的值为true，那么p元素可见；否则p元素不可见。

1、指令的“参数”

某些指令可以接受一个可选值（就像函数的参数），用冒号与后面的插值隔开，例如v-bind指令后可以加一个html属性，用来对其作出修改：

<a v-bind:href="url"></a>

此时，a标签的href就和url变量绑定。

另一个栗子：v-on用来绑定DOM事件，它也可以接受一个可选值，就是绑定的事件名：

<a v-on:click="doSomething">

2、修饰符

在使用v-on绑定事件的时候，我们可以使用.来指定事件发生时的特殊方式。
例如：

<form v-on:submit.prevent="onSubmit"></form>

这样，在触发事件时，将会首先调用event.preventDefault()，阻止默认方法。

过滤器

过滤器由管道符号 “ | ” 表示，用作文本格式化；它可以被用在两个地方，双括号插值（mustaches，这个单词的意思是小胡子？第一个想到的人是乱世佳人里面的瑞德啊囧）和v-bind表达式（绑定html属性值时使用的指令）。
栗子：

<!-- in mustaches -->
{{ message | capitalize }}

<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>

如果想在其他地方使用文本格式化，请使用下一章将要介绍的计算属性。

过滤器函数将默认它前面的那个表达式的值作为第一个参数。并且过滤器可以穿连使用。
一个简单的过滤器栗子：

new Vue({
  // ...
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})

串联使用的过滤器：

{{ message | filterA | filterB }}

过滤器其实就是JS函数，因此也可以接受参数。不过它的第一个参数已经被占用，因此，填入的参数将作为第二个、第三个…参数。

缩写

1、v-bind

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

2、v-on

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