SOURCE

//文本渲染{{message}}
app=new Vue({
	el: '#app',
	data: {
		message: 'hello world!'
	}
})
//绑定指令v-bind:title="message"
app2=new Vue({
	el: '#app-2',
	data: {
	message: '页面加载于 ' + new Date().toLocaleString()
}
})

//条件绑定v-if="seen"
new Vue({
	el: '#app-3',
	data: {
		seen: true
	}
})
//循环绑定v-for="todo in todos"
new Vue({
	el: '#app-4',
	data: {
		todos:[{text: '学习'},{text: '赚钱'},{text: '养家'}]
	}
})

//用v-on指令添加一个事件监听器
new Vue({
	el: '#app-5',
	data: {
		message: 'hello world!'
	},
	methods: {
		reverseMessage:function(){
			this.message=this.message.split('').reverse().join('');
		}
	}
})

//v-model指令,实现表单输入和应用状态之间的双向绑定。
new Vue({
	el: '#app-6',
	data: {
		message: 'v-model'
	}
})

<div id="app">
	{{message}}
</div>
<div id="app-2">
	<span v-bind:title='message'>鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>
</div>

<div id="app-3">
	<p v-if="seen">现在你看到我了</p>
</div>

<div id="app-4">
	<ol>
		<li v-for="todo in todos">{{todo.text}}</li>
	</ol>
</div>

<div id="app-5">
	<p>{{message}}</p>
	<button v-on:click="reverseMessage">逆转消息</button>
</div>

<div id="app-6">
	<input type="text" v-model="message" />
	<p>{{message}}</p>
</div>