vue.js入门教程之基础语法小结

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

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

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

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

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

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

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

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

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

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

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

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

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