1. 程式人生 > >vue.js初級入門,hello world

vue.js初級入門,hello world

之前用的jQuery已經讓我感覺比js工作非常的順心,然而讓我認識了vue.js 之後我覺得,比jquey更先進,幾行程式碼可以代替jquery多行,更不用說了,所以說科技讓人進步,而進步是為了更簡化工作。

1例項:通過建立一個Vue 用el鎖定一個物件,這個物件是id 為app。就像json格式一樣。data的值有什麼。http://www.0517yy.com/rljs/ywlc/5981.html

[html] view plain copy  print?
  1. <divid="app">
  2.   <p>{{ message }}</p>
  3. </div
    >
  4. <script>
  5. new Vue({  
  6.   el: '#app',  
  7.   data: {  
  8.     message: 'Hello Vue.js!'  
  9.   }  
  10. })  
  11. </script>

2:例項

通過,html嵌入的形式,更好的進行非同步載入,我現在能想到的事讓頁面更流暢的執行。通過後期的ajax請求後臺,再複製給前臺。用到的事v-html

[html] view plain copy  print?
  1. <divid="app">
  2.     <divv-html="message"></div>
  3. </div>
  4. <script>
  5. new Vue({  
  6.   el: '#app',  
  7.   data: {  
  8.     message: '<h1>菜鳥教程</h1>'  
  9.   }  
  10. })  
  11. </script>


3:通過判斷folse或者是為true,如果選擇了checkbox 返回的class1 為true http://www.0517yy.com/rlbd/5980.html

[html] view plain copy  print?
  1. <divid="app">
  2.   <label>修改顏色</
    label><inputtype="checkbox"v-model="class1">
  3.   <br><br>
  4.   <divv-bind:class="{'class1': class1}">
  5.     directiva v-bind:class  
  6.   </div>
  7. </div>
  8. <script>
  9. new Vue({  
  10.     el: '#app',  
  11.   data:{  
  12.     class1: false  
  13.   }  
  14. });  
  15. </script>