Vue.js簡單入門

這篇文章咱們將學習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>

大家學會了嗎?