这篇文章我们将学习vue.js的基础语法，对于大家学习vue.js具有一定的参考借鉴价值，有需要的朋友们下面来一起看看。
Vue.js是一个数据驱动的web界面库。Vue.js只聚焦于视图层，可以很容易的和其他库整合。代码压缩后只有24kb。
以下代码是Vue.js最简单的例子， 当 input 中的内容变化时，p 节点的内容会跟着变化。
<!-- html -->
<div id="demo">
<p>{{message}}</p>
<input v-model="message">
</div>
new Vue({
el: '#demo',
data: {
message: 'Hello 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表达式
|
1
2
3
|
{{ number + 1 }}{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
|
在{{}}中使用js语句
|
|
{{ 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指令
|
|
<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>
|
你们学会了吗?