现在我们来写一个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 |