Vue-筆記-1-Vue實例

實例 new Vue({})

1. el

   • ‘#app’
   • document.getElementById(‘app’)
   • 在實例外用 vm.$mount('#app')

2. data

   const vm = new Vue({
       el: '#app',
       data: {
           input: '',
           todos: [
               '刷牙洗臉',
               '吃早餐',
               '整理服裝儀容',
               '確認今天該做的事'
           ]
       }
   });
   

   用this.todos取得data裡的todos陣列

3. computed

   <div id="app">
       <input type="number" v-model="a"/>
       +
       <input type="number" v-model="b"/>
       =
       <input type="number" v-model="sum"/>
   </div>
   <script>
   var vm = new Vue ({
       el: '#app',
       data: {
           a: 0,
           b: 0
       },
       computed: {
           sum() {
               return parseInt(this.a, 10) + parseInt(this.b, 10);
           }
       }
   });
   /*  sum() {...} 也可以寫成
       sum: {
           get() {
               return parseInt(this.a, 10) + parseInt(this.b, 10);
           },
           set(value) {
               this.b = parseInt(val, 10) - parseInt(this.a, 10);
           }
       }
       前面一般的函式寫法會等於物件寫法的get()，而另一個set(val)的功能是設定值，範例設定的是，當有a值和sum值時，會自動計算b值。
   */
   </script>
   

   回傳計算後的結果，可以用this.sum取得

4. methods

   <div id="app">
       <p>Reversed message: "{{ reverseMessage() }}"</p>
   </div>
   <script>
       var vm = new Vue({
           el: '#app',
           data: {
           message: 'Hello Vue!'
           },
           methods: {
               reverseMessage: function () {
               return this.message.split('').reverse().join('')
           }
       }
       })
   </script>
   

   • methods 和 computed 的差別是，computed只有在相依的data改變時才會重新計算，methods則是只要data有改變，不管有沒有在methods中用到都會重新計算。

   • methods 也可以直接寫在代換位置的地方，{% raw %}如上面的範例可以把{{ reverseMessage() }} 改成{{ message.split('').reverse().join('') }} {% endraw %}

5. filters

   <div id="app">
       <span>{{ text | toUpperCase }}</span>
   </div>
   <script>
   var vm = new Vue ({
       el: '#app',
       data: {
           text: 'hello vue'
       },
       filters: {
           toUpperCase(value) {
               return value.toUpperCase();
           }
       }
   });
   </script>
   

   • 可以用" | “符號串聯多個過濾器
   • 有點像computed，不過沒有cache，刷新頁面會重複計算，效能比較差。

6. watch

   <div id="app">
       <input v-model="input.a" />
   </div>
   <script>
   var vm = new Vue ({
       el: '#app',
       data: {
           input: {
               a: ''
           }
       },
       watch: {
           input:{
               handler(val, oldVal){
                   console.log(`${oldVal.a} -> ${val.a}`);
               },
               immediate: true,
               deep: true,
           }
       }
   });
   </script>
   

   • immediate 打開網頁時，立刻執行一次
   • deep 偵測物件或陣列中值的改變

7. components

   • 全域(global)

     <div id="app">
         <my-component></my-component>
     </div>
     <script>
         Vue.component('my-component', {
             template: '<div>this is my component</div>'
         });
         const vm = new Vue({
             el: '#app'
         });
     </script>
     

   • 本地(local)

   <div id="app">
       <my-component></my-component>
   </div>
   <script>
       const vm = new Vue({
           el: '#app',
           components: {
               'my-component': {
                   template: '<div>this is my component</div>'
               }
           }
       })
   </script>
   

   • 為了讓組件(component)可以重複利用，data必須是函式，回傳出不同的物件

       <script>
           Vue.component('my-component', {
               data(){
                   return {
                       count: 0
                   }
               },
               template: `
                   <div>
                       <h1>{{count}}</h1>
                       <button @click="count+=1">+1</button>
                   </div>
                   `
               })
       </script>
   

   組件管理很重要呦，後面會再介紹。

8. Lifecycle Hooks

   • 圖片上紅色的部分都可以進行操作
   • 通常AJAX的部分會放在mounted
   • 將實例Destroyed的話，已經存在的會保留，但不能再進行操作