一、聲明式渲染

聲明式的將數(shù)據(jù)渲染進(jìn)入DOM，通過(guò)名稱app將VUe實(shí)例和div綁定起來(lái)，div中的message值跟隨Vue實(shí)例中的數(shù)據(jù)message動(dòng)態(tài)變化：即 Vue 控制 Dom

html:
<div id="app">
{{message}}
</div>

javascript:
var app=new Vue({
el:'#app',
data:{message:'Hello World!'}
})

測(cè)試：進(jìn)入控制臺(tái)，修改message的值，頁(yè)面中顯示的message也隨之變化

二、條件與循環(huán)

1、v-if條件控制

語(yǔ)法：v-if={true|false}，在vue實(shí)例中給v-if后面的boolean變量賦值。這意味著Vue不僅可以動(dòng)態(tài)綁定Dom的數(shù)值和特性，也可以動(dòng)態(tài)的綁定結(jié)構(gòu)。

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循環(huán)

語(yǔ)法：v-for="todo in todos" 其中todo為Dom中對(duì)數(shù)組元素進(jìn)行操作替代符號(hào)，todos為Vue實(shí)例中的數(shù)組數(shù)據(jù)。類似java代碼中的加強(qiáng)for循環(huán)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!'}
    ]   }
})


--當(dāng)messages添加數(shù)據(jù)之后，Dom也會(huì)響應(yīng)添加
app.messages.push({ text: '新文字' })

由于js的限制，Vue中的數(shù)據(jù)用以下方式變動(dòng)時(shí)，Dom不能檢測(cè)：
1、用數(shù)組下標(biāo)直接賦值： app.messages[1]=newValue
2、修改數(shù)組的長(zhǎng)度：app.messages.length=newLength
可以改用以下方式對(duì)數(shù)據(jù)進(jìn)行改動(dòng)：
Vue.set(vm.items,indesofItem,newValue)和vm.set(app.message,1,{text:'new Hello World'})

三、監(jiān)聽事件

1、點(diǎn)擊事件 v-on:click

語(yǔ)法：v-on:click="changeMessage()" v-on可以簡(jiǎn)寫成@，即：@:click
被點(diǎn)擊時(shí)調(diào)用changeMessage()方法，該方法寫在vue的methods中

javascript:
var app=new Vue({
el:'#app',
data:{
    messages:[
    {text:'Hello World!'},
    {text:'Hello China!'}
    ]
    },
methods:{
    changeMessage:function(){
        alert("點(diǎn)擊事件")
        }
    }
})

類似于以前html代碼中的onClick="changeMEssage()"，和javascript中的changeMEssage()方法

2、按鍵修飾符

1.@keyup.enter=“submit()” 回車
2.@keyup.tab=“submit()” Tab鍵
同理：
delete：退格和刪除
esc：退格
backspace：刪除
space；空格
up：上
down：下
left：左
right：右