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'})