首先实现简单的：hello Vue
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>hello Vue</title>
<script type="text/javascript">
document.addEventListener('plusready', function(){
//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"
});
</script>
<script type="text/javascript" src="vue.js" ></script>
</head>
<body>
<div id ="app">{{content}}</div>
<!--hello Vue-->
<script>
var app = new Vue({
el:'#app',
data:{content:'hello Vue'}
});//el限制dom的范围，data是数据对象。
//给app设置函数调用如下
setTimeout(function(){
app.$data.content='hello ';
},2000);
</script>
</body>
</html>下面是：v-model：双向绑定，页面，数据，一方变化，另一方也变化。v-on：模板指令，需要将指令方法写在methods:中
v-for:循环。 v-bind:是赋值。实现下面todolist：输入框输入内容，下面自动改变。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../vue.js" ></script>
</head>
<body>
<div id ="app">
<input type="text" v-model="inputValue"/>
<!--v-model指的是双向绑定，当text中数据变化时，data中
inputValue也在变化。
-->
<button v-on:click="handleBtnClick">提交</button>
<!--v-on:模板指令-->
<ul>
<!--<li v-for="item in list">{{item}}</li>-->
<!--v-for:item是 data里面list中的内容。-->
<!--<todo-item v-for="item in list"></todo-item>-->
<todo-item v-bind:content="item"
v-for="item in list">
</todo-item>
</ul>
</div>
<script>
//穿件全局组件,Name:todoItem,相当于<todo-item>,模板：template
/*Vue.component("TodoItem",{
props:['content'],
template:"<li>{{content}}</li>"//差池表达式
})*/
//也可以定义局部组件,但是要在Vue中说明
var TodoItem={
props:['content'],
template:"<li>{{content}}</li>"//差池表达式
}
var app =new Vue({
el:'#app',
components:{
TodoItem:TodoItem
},
data:{
list:[],
inputValue:''
},
methods:{
//负责v-on：中的方法写在这里
handleBtnClick:function(){
this.list.push(this.inputValue);
this.inputValue="";//双向绑定，数据消失，页面中数据也消失
}
}
})
</script>
</body>
</html>