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 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑,应当使用计算属性。