vue.js入门教程之基础语法小结
前言
Vue.js是一个数据驱动的web界面库。Vue.js只聚焦于视图层，可以很容易的和其他库整合。代码压缩后只有24kb。
以下代码是Vue.js最简单的例子，当input中的内容变化时，p节点的内容会跟着变化。
<!--html-->
<divid="demo">
<p>{{message}}</p>
<inputv-model="message">
</div>
newVue({
el:'#demo',
data:{
message:'HelloVue.js!'
}
})
vue.js的基础语法
插入文本
<span>Message:{{text}}</span>
插入html格式的文本，在页面显示为html的格式
<span>Message:{{{html}}}</span>
内容不跟随data的变化
<span>Message:{{*text}}</span>
属性上绑定数据
<divid="item-{{id}}"></div>
在{{}}中使用js表达式
{{number+1}}
{{ok?'YES':'NO'}}
{{message.split('').reverse().join('')}}
在{{}}中使用js语句
{{vara=1}}
{{if(ok){returnmessage}}}
if指令
<pv-if="greeting">Hello!</p> 这里v-if指令将根据表达式greeting值的真假删除/插入<p>元素。
href指令
<av-bind:href="url"></a>
或者
<ahref="{{url}}"></a>
click指令
<av-on:click="doSomething">
回车指令
<inputv-model="newTodo"v-on:keyup.enter="addTodo">
缩略写法
v-bind
<!--完整语法--> <av-bind:href="url"></a> <!--缩写--> <a:href="url"></a> <!--完整语法--> <buttonv-bind:disabled="someDynamicCondition">Button</button><!--缩写--> <button:disabled="someDynamicCondition">Button</button>
v-on
<!--完整语法--> <av-on:click="doSomething"></a> <!--缩写--> <a@click="doSomething"></a>
总结
模板中表达式非常便利，但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么Vue.js将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑，应当使用计算属性。小编会在后面给更新如何使用计算属性。感兴趣的朋友们请继续关注毛票票。