Vue Hello world

现在我们来写一个vue的HelloWord

代码如下：

<div id="app">
	<!--绑定vue对象中的mesage对象-->
   <h1>{{message}}</h1>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js'></script>
<script type="text/javascript">
//定义一个vue对象
var vm = new Vue({
	//绑定Dom对象id
	el : '#app',
	data: {
		message : 'Hello world, I am Vue.js' //定义vm.message对象
	}
});
</script>

运行结果：Hello world, I am Vue.js

vm.message的值可以随着随着文本框中的值而改变，而无需我们手动去获取文本框的值到再赋值给vm.message对象。

代码如下：

<div id="app">
 <h1>Your input is {{ message }}</h1>
 <input type="text" v-model="message">   
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js'></script>
<script type="text/javascript"> 
var Message = Vue.extend({ 
	props : ['content'],
    template : '<h1>{{content}}</h1>' 
})

Vue.component('message', Message); 
var vm = new Vue({
	el : '#app',
})		
</script>

运行结果：

Your input is vue

vue