標籤：
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" }});
啟動並執行效果如下：
注意：
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基礎---->VueJS的使用(一)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
