vue階段一

描述

該階段是對vue的一個初步認識。
這個階段的沒有用到vue-cli腳手架，
而是通過js引入的方式實現。

在該階段不會設計到複雜的操作，
只是對於基本指令的熟悉。

問題記錄

1. 問題：methods中試圖直接使用資料，失敗
   解決：this.資料來呼叫vue資料，也可以作為函式的形參傳遞
2. 問題：使用雙擊事件沒效果
   解決：雙擊事件是dblclick，不要忘了l

3.  .coral{background-color: coral;}
    
    <p v-html='message_4' :class='{"color":true}'>message_4</p>
   
    data:{
        message_4:'<b>this had been bold</b>',
        isshow:true,
        color:'coral'
    },
    
   

   這裡錯誤的認為true則返回color的值，然而事實是直接返回了color本身,所以要把color改成coral
   所以class屬性的表示方式:
   • 'color'
   • '"coral"'
   • 'isshow?color:""'
   • 'isshow?color:""'
   • '{coral:isshow}'
   • 'func()' 注意，這裡的()不能省略,因為這裡如果去掉它無法區別是否為變數
   • '["coral"]'或者'[color]'
   • 組合寫法
     對於style
   • :style='{"border":color+" 1px solid"}' 用物件的模式，書寫
   • :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }" 多重置優先匹配前至後
   • :style="[baseStyles, overridingStyles]" 將樣式物件繫結到樣式

    data: {
        styleObject: {
            color: 'red',
            fontSize: '13px'
        }
    }
   

4. v-for 如果帶index，index一定是在後側，否則順序會反過來，並且是用小括號括起來
5. :class物件方式作為值時，在console進行app.test2.bold=true賦值是無效的，不能產生get和set
   但是貌似程式碼編寫更改會有效，對於陣列形式app.test2.push('bold')是生效的
6. console修改陣列元素，不能用[]方式，vue.set方法不存在，應該是vue.$set方法，有$符號，set方法同樣適用於class的物件寫法修改
7. Vue.component()全域性,components:{}. 作為元件的data是以方法的形式寫的，並且需要return!父元件的方法子元件不能直接取到
8. 作為props傳遞，屬性名字不能有-，因為如果有-，之後變數要用的話變數名帶有-，出現變數名不能-的問題，當然強制有-的話，以abcDef命名方式接收
9. props,[]傳遞，內容要加''號，{}傳遞，不需要加''
10. $emit傳值時，新增事件的元素必須時其元件的根，不能是兄弟元件接收，這不是父子關係，接收元件資訊時，用$event接收即可
11. 對於transition動畫時，如果擁有keep-alive，結構必須為transition>keep-alive>component
12. filter過濾器只能用於{{}}或者v-bind