Vue.js入門文檔

隨筆記錄：

1. 導入vue.js文件

    <!--引入vue.js-->

    <script src="js/vue.js"></script>

    也可以地址引用，地址: https://cdn.jsdelivr.net/npm/vue/dist/vue.js
2.測試Vue對DOM的操作

<!--測試代碼 -->
    <div id="app">
      {{ message }}

    </div>

var app = new Vue({
        el: '#app',
        data: {
        message: 'Hello Vue!'
        }

    });

PS：通過Vue，對DOM進行操作，除了可以進行數據傳遞，還有對應的for循環以及if判斷，可以對數組列表等數據進行循環輸出。

3. 事件

<!--測試代碼-->
    <div id="app-2">
      <span v-bind:title="message">
        鼠標懸停幾秒鐘查看此處動態綁定的提示信息！
      </span>

    </div>

var app2 = new Vue({
      el: '#app-2',
      data: {
        message: '頁面加載於 ' + new Date().toLocaleString()
      }

    });

PS：Vue通過自己的屬性標籤進行事件操作，同時也可以進行邏輯判斷，循環操作。在Vue實例裏，也可以調用JS函數等其他函數等。

4.for循環和點擊事件+小函數

<!--測試代碼-->
    <div id="app-4">
      <ol>
        <li v-for="todo in todos">
          {{ todo.text }}
        </li>
      </ol>
    </div>
    
    <!--測試代碼-->
    <div id="app-5">
      <p>{{ message }}</p>
      <button v-on:click="reverseMessage">Reverse Message</button>

    </div>

var app4 = new Vue({
      el: '#app-4',
      data: {
        todos: [
          { text: 'Learn JavaScript' },
          { text: 'Learn Vue' },
          { text: 'Build something awesome' }
        ]
      }
    });
    var app5 = new Vue({
      el: '#app-5',
      data: {
        message: 'Hello Vue.js!'
      },
      methods: {
        reverseMessage: function () {
          this.message = this.message.split('').reverse().join('')
        }
      }

    });

5.Vue組件樹

PS：Vue強大的功能，告別以往HTML CSS 與JS混亂不堪的情況，對頁面組件進行高度解耦，實現頁面組件的高度複用，主要分爲全局組件以及局部組件，組件之間以單根繼承形式生成組件樹。

// 聲明全局組件

Vue.component('todo-item', {

      props: ['todo'],
      template: '<li>{{ todo.text }}</li>'

    })

// 調用

<ul id="app-8">
        <todo-item2></todo-item2>

</ul>

PS：雖然Vue可以讓我們以標籤的方式對全局組件進行調用，但必須是在Vue裏，否則是無效的。所以還需要進行實例化。

var app8 = new Vue({
        el:'#app-8'

    })

這樣就可以實現效果：

我們也可以通過Vue.component聲明多個全局組件進行調用。

    Vue.component('todo-item1', {
      template: '<li>test1</li>'
    })
    Vue.component('todo-item2', {
      template: '<li>test2</li>'
    })

    <!--測試代碼-->
    <ul id="app-8">
        <todo-item1></todo-item1>
        <todo-item2></todo-item2>

    </ul>

    var app8 = new Vue({
        el:'#app-8'

    })

效果：

至於new Vue({})內的各種函數就用時間積累吧。