Vue.js基础语法小结

Vue.js是一个数据驱动的web界面库。Vue.js只聚焦于视图层，可以很容易的和其他库整合。代码压缩后只有24kb。

以下代码是Vue.js最简单的例子， 当 input 中的内容变化时，p 节点的内容会跟着变化。

1 2 3 4 5 6 7 8 9 10 11

<!-- html --> <div id="demo">  <p>{{message}}</p>  <input v-model="message"> </div> new Vue({  el: '#demo',  data: {  message: 'Hello Vue.js!'  } })

vue.js的基础语法

插入文本

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

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

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

内容不跟随data的变化

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

属性上绑定数据

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

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

1 2 3

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

在{{}}中使用js语句

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

if指令

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

href指令

1 2 3

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

click指令

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

回车指令

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

缩略写法

v-bind

1 2 3 4 5 6 7

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

v-on

1 2 3 4

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

总结

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