vue.js初級入門,hello world
阿新 • • 發佈:2019-02-04
之前用的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?- <divid="app">
- <p>{{ message }}</p>
-
</div
- <script>
- new Vue({
- el: '#app',
- data: {
- message: 'Hello Vue.js!'
- }
- })
- </script>
2:例項
通過,html嵌入的形式,更好的進行非同步載入,我現在能想到的事讓頁面更流暢的執行。通過後期的ajax請求後臺,再複製給前臺。用到的事v-html
[html] view plain copy print?- <divid="app">
-
<divv-html="message"></div>
- </div>
- <script>
- new Vue({
- el: '#app',
- data: {
- message: '<h1>菜鳥教程</h1>'
- }
- })
- </script>
3:通過判斷folse或者是為true,如果選擇了checkbox 返回的class1 為true http://www.0517yy.com/rlbd/5980.html
[html] view plain copy print?- <divid="app">
-
<label>修改顏色</
- <br><br>
- <divv-bind:class="{'class1': class1}">
- directiva v-bind:class
- </div>
- </div>
- <script>
- new Vue({
- el: '#app',
- data:{
- class1: false
- }
- });
- </script>