一、声明式渲染
声明式的将数据渲染进入DOM，通过名称app将VUe实例和div绑定起来，div中的message值跟随Vue实例中的数据message动态变化：即 Vue 控制 Dom
html:
<div id="app">
{{message}}
</div>
javascript:
var app=new Vue({
el:'#app',
data:{message:'Hello World!'}
})
测试：进入控制台，修改message的值，页面中显示的message也随之变化
二、条件与循环
1、v-if条件控制
语法：v-if={true|false}，在vue实例中给v-if后面的boolean变量赋值。这意味着Vue不仅可以动态绑定Dom的数值和特性，也可以动态的绑定结构。
html：
<div id=""app">
<p v-if="seen">
{{message}}
</p>
</div>
javascript:
var app=new Vue({
el:'#app',
data:{
message:'Hello World!',
seen:true
}
})
2、v-for循环
语法：v-for="todo in todos" 其中todo为Dom中对数组元素进行操作替代符号，todos为Vue实例中的数组数据。类似java代码中的加强for循环foreach(todo in todos)
html：
<div id=""app" >
<ol>
<li v-for="todo in messages">
{{ todo.text }}
</li>
</ol>
</div>
javascript:
var app=new Vue({
el:'#app',
data:{
messages:[
{text:'Hello World!'},
{text:'Hello China!'}
] }
})
--当messages添加数据之后，Dom也会响应添加
app.messages.push({ text: '新文字' })
由于js的限制，Vue中的数据用以下方式变动时，Dom不能检测：
1、用数组下标直接赋值： app.messages[1]=newValue
2、修改数组的长度：app.messages.length=newLength
可以改用以下方式对数据进行改动：
Vue.set(vm.items,indesofItem,newValue)和vm.set(app.message,1,{text:'new Hello World'})
三、监听事件
1、点击事件 v-on:click
语法：v-on:click="changeMessage()" v-on可以简写成@，即：@:click
被点击时调用changeMessage()方法，该方法写在vue的methods中
javascript:
var app=new Vue({
el:'#app',
data:{
messages:[
{text:'Hello World!'},
{text:'Hello China!'}
]
},
methods:{
changeMessage:function(){
alert("点击事件")
}
}
})
类似于以前html代码中的onClick="changeMEssage()"，和javascript中的changeMEssage()方法
2、按键修饰符
1.@keyup.enter=“submit()” 回车
2.@keyup.tab=“submit()” Tab键
同理：
delete：退格和删除
esc：退格
backspace：删除
space；空格
up：上
down：下
left：左
right：右
