vuejs语法

上篇文章 介绍了如何通过vue.js实现响应用户的操作，这篇文章我们将学习vue.js的基础语法。

• 插入文本

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

• 插入html格式的文本，在页面显示为html的格式

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

• 内容不跟随data的变化

 <span>Message: {{ * text }}</span>

• 属性上绑定数据

<div id="item-{{ id }}"></div>

• 在{{}}中使用js表达式

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

• 在{{}}中使用js语句

{{ var a = 1 }}
{{ if (ok) { return message } }}

• if指令

<p v-if="greeting">Hello!</p>
这里 v-if指令将根据表达式 greeting值的真假删除/插入 <p>元素。

• href指令

<a v-bind:href="url"></a>
或者
<a href="{{url}}"></a>

• click指令

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

• 回车指令

<input v-model="newTodo" v-on:keyup.enter="addTodo">

• 缩略写法
  • v-bind

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

• v-on

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

模板中表达式非常便利，但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑，应当使用计算属性。下一篇将学习如何使用计算属性。