<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Vue</title></head><body><hr/>声明式渲染1：<br/><br/><div id="app"> ???{{message}}</div><hr/>声明式渲染2：<br/><br/><div id="app2"> ???<span v-bind:title="message"> ???????鼠标悬停几秒钟查看此处动态绑定的提示信息！ ???</span></div><hr/>条件与循环1：<br/><div id="app3"> ???<p v-if="seen">现在你看到我了！</p></div><hr/>条件与循环2：<br/><div id="app4"> ???<ol> ???????<li v-for="todo in todos"> ???????????{{todo.text}} ???????</li> ???</ol></div><hr/>处理用户输入1：<br/><div id="app5"> ???<p>{{message}}</p> ???<button v-on:click="reverseMessage">逆转消息</button></div><hr/>处理用户输入2：<br/><div id="app6"> ???<p>{{message}}</p> ???<input v-model="message"></div><hr/>组件化应用构建：<br/><div id="app7"> ???<ol> ???????<todo-item ???????????v-for="item in language" ???????????v-bind:todo="item" ???????????v-key:id="item.id" ???????></todo-item> ???</ol></div></body><script src="https://unpkg.com/vue"></script><script type="application/javascript"> ???Vue.component(‘todo-item‘,{ ???????props:[‘todo‘], ???????template:‘<li>{{todo.text}}</li>‘ ???}); ???var app7 = new Vue({ ???????el:‘#app7‘, ???????data:{ ???????????language:[ ???????????????{ ???????????????????id:0, ???????????????????text:‘.NET‘ ???????????????}, ???????????????{ ???????????????????id:1, ???????????????????text:‘PHP‘ ???????????????}, ???????????????{ ???????????????????id:2, ???????????????????text:‘JAVA‘ ???????????????} ???????????] ???????} ???}); ???var app6 = new Vue({ ???????el:‘#app6‘, ???????data:{ ???????????message:"Hello World !" ???????} ???}); ???var app5 = new Vue({ ???????el:‘#app5‘, ???????data:{ ???????????message:‘Hello World !‘ ???????}, ???????methods:{ ???????????reverseMessage:function () { ???????????????this.message = this.message.split(‘‘).reverse().join(‘‘); ???????????} ???????} ???}); ???var app4 = new Vue({ ???????el:‘#app4‘, ???????data:{ ???????????todos:[ ???????????????{text:‘Hello‘}, ???????????????{text:‘World‘}, ???????????????{text:‘!‘} ???????????] ???????} ???}); ???var app3 = new Vue({ ???????el:‘#app3‘, ???????data:{ ???????????seen:true ???????} ???}); ???var app2 = new Vue({ ???????el:‘#app2‘, ???????data:{ ???????????message:‘页面加载于‘ + new Date().toLocaleString() ???????} ???}); ???var app ?= new Vue({ ???????el:‘#app‘, ???????data:{ ???????????message:‘Hello World !‘ ???????} ???});</script></html>Vue.js 基础实例
原文地址：http://www.cnblogs.com/drea/p/7857789.html