vue 學習總結

 //vue 內建指令  v-cloak vue編譯結束後移除通常配合[v-cloak]{ display:none;}
// v-once  使用只會渲染一次包括子元素
//css 繫結要使用駝峰camelCase 或者短橫幹 kebab-case   vue還會自動給特殊css增加字首如 transform
//v-for 可以遍歷物件屬性user{name:'張三'，age:'18'}  v-for='value in user' 可以迭代整數 v-for="n in 10" 遍歷物件和變數陣列都是兩個引數
//呼叫陣列的方法也會觸發vue重新渲染 但是部分方法不會比如filter，直接通過索引設定是不會觸發重新屬性的比如 app.books[3]={..}
有時候又一定要用name可以使用Vue.set();
//如果不希望元件複用 可以在元素上定義key 值必須唯一 key="onelyOne"
 //使用$refs 配合ref='domName' 來操作 不需要用jquery   this.$refs.domName.checked;
//v-pre 跳過編譯{{}}

 .//事件
   // stop防止冒泡
   // prevent、、
   // capture 捕獲事件
   //self，只有事件本身觸發才有效
   // once只觸發一次
   // 按鍵修飾符
   // 只有在按鍵值13的時候呼叫
   // @keyup.13=“”
   // 自定義按鍵
  //  vue.config.keyCodes.f1=112
   // 使用 @keyup.f1="xx"
  //  快捷鍵別名
  //  .enter
   // .tab
   // .delete   (刪除和 退格鍵)
   // .esc
   // .soace
   // .up
   // .down
   // .left
   // .right
  //  可以組合使用
   // .ctrl
   // .alt
   // .shift
   // .meta(mac command鍵 windows 視窗鍵)
   // 組合使用例子  @click.ctrl 滑鼠加按鍵
-------------
自定義事件之一  使用總控來操作
html
--------
<div id="app">
    {{msg}}
    <my-a></my-a>
</div>
-------
script
-------
 //元件通訊  使用空vue定義事件
    var b=new Vue({});

    Vue.component('my-a',{
        template:"<button @click='onEve'>元件按鈕</button>",
        methods:{
            onEve:function () {
                console.log("來自元件my-a的訊息")
                b.$emit("m","來自元件my-a的訊息");

            }
        }
    });
    var app=new Vue({
        el:"#app",
        data:{
            msg:"vue"
        },
        mounted:function () {
            var _this=this;
            b.$on("m",function (val) {
                console.log("bus自定義事件");
                _this.msg=val;
            })
        },

    })

---------------
元件
-----------
//推薦元件使用命名 小寫短橫槓命名kabab-case、
//在使用props的時候要用kevav-case命名
//is可以手動掛在元件 包括限制的元素內
//在元件上使用v-model="property"  元件可以用this.$emit("input",引數);來觸發自定義事件
例如：{{total}} <my-component v-model="total"></my-component>
//除了$emit 還有父鏈$parent 直接修改父級元件  this.$parent.message=xxx 
//$children 動態渲染時候子元件是不固定的所以不推薦使用 應該使用 子元件索引ref 和$refs組合使  要避免在計算屬性和dom中使用
//監聽自定義事件bus.$on('事件名',"引數");  觸發this.$emit("事件名","引數")

聊天交友/修仙練級群:709332479