Vue学习（一）基础语法

点击这里测试

刚开始写key一直取不出来值，仔细看了看发现：

js中new Vue对象时，Vue一定要大写！

HTML代码：

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!--显示数据-->
<div id="app-1">
<p>{{ message }}</p>
<input v-model="message">
</div>
<!--鼠标放上-->
<div id="app-2">
<span v-bind:title="message">
鼠标放上
</span>
</div>
<!--if判断-->
<div id="app-3">
<p v-if="see">
you can see
</p>
</div>
<!--遍历-->
<div id="app-4">
<ol>
<li v-for="msg in msgs">{{msg.text}}</li>
</ol>
</div>

JS代码：
var app1= new Vue({
el: '#app-1',
data: {
//这里的message就是页面中取值的key
message: 'Hello Vue js!'
}
})

var app2=new Vue({
el: '#app-2',
data:{
message: 'you load page:'+new Date()
}
})

var app3=new Vue({
el: '#app-3',
data:{
see:true
}
})

var app4=new Vue({
el: '#app-4',
data:{
msgs:[
{text:'msg1'},
{text:'msg2'},
{text:'msg3'}
]
}
})
//app4指的是声明的Vue对象的名
app4.msgs.push({text:'msg new'})