Vue學習(一)基礎語法

剛開始寫key一直取不出來值,仔細看瞭看發現:

js中newVue對象時,Vue一定要大寫!

HTML代碼:

<script src="https://unpkg.com/vue/dist/vue.js"></script>  
<!--顯示數據-->  
<p id="app-1">  
  <p>{{ message }}</p>  
  <input v-model="message">  
</p>  
<!--鼠標放上-->  
<p id="app-2">  
  <span v-bind:title="message">  
   鼠標放上  
  </span>  
</p>  
<!--if判斷-->  
<p id="app-3">  
  <p v-if="see">  
  you can see  
  </p>  
</p>  
<!--遍歷-->  
<p id="app-4">  
<ol>  
<li v-for="msg in msgs">{{msg.text}}</li>  
</ol>  
</p>

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

發佈留言