Vue.js是一個構建數據驅動的web界面的庫。它的目標是通過盡可能簡單的API 實現響應的數據綁定和組合的視圖組件，今天我們就開始vue.js的學習。
vue的安裝及使用
一、vue的下載地址：http://vuejs.org/js/vue.js
二、vue的第一個例子：
項目的結構如下，引入vue.js
vue1.html的代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue1</title> <script type="text/javascript" src="../vue.js"></script> </head> <body> <div id="app"> <p>{{ message }}</p> <input type="text" name="message" v-model="message" /> </div> <script type="text/javascript" src="js/vue1.js"></script> </body> </html>
vue1.js的代碼：
var app = new Vue({ el: '#app', data: { message: "hello world" } });
運行的效果如下：
注意：
- el: '#app' 就是管理id為app的部分。
- vue1.js的引入在頁面代碼的后面，否則在某些瀏覽器上會出現找不到#app的元素的錯誤。
vue的簡單使用
以下的所有例子都是基於上述的例子的。這里只寫增加的代碼
一、列表的渲染：v-for的使用
在<div id="app">中加入以下代碼：
<ul>
<li v-for="person in persons">
{{ person.name }} loves {{person.love}}
</li>
</ul>
在vue1.js的data中加入以下代碼：
persons: [ {name: "huhx", love: "code"}, {name: "chenhui", love: "book"} ]
運行效果如下：
二、處理輸入： v-on:click的使用
在<div id="app">中加入以下代碼：
<button v-on:click="changeContent('huhx')">Click on!</button>
在vue1.js中加入以下代碼：
methods: { changeContent: function(element) { this.message = "I love " + element; } }
友情鏈接
- vue的官方教程：http://cn.vuejs.org/guide/index.html
- vue的官方api： http://cn.vuejs.org/api/