[js]vue小結

vueベース

- vue        
vue       (    )
components(    )
vue-router(    )
vuex      (    )
vuecli    (    )

-     
      jQuery,           ，
       vue,           ，       ，      
-    ( forEach，        ) vs    (for     )

vue応答型データ変化

Object.defineProperty  ，       set  

obj = {};
Object.defineProperty(obj, 'name', {
    get(){
        return value
    },
    set(val){
        console.log("111111");
        value = val
    }
});

obj.name = "maomao";
console.log(obj.name);

Object.definePropertyによるデータハイジャック
vueのdataはvmインスタンス、例えばvmにエージェントされる.nameはテンプレートで使用する変数であれば、vmで定義し、前に宣言しなければならない.

  vue        template  

-   
     push ， ok (    template    )
  value             ，  ok 。arr.length--

-   
value     ，    key     ， ok 
value     ，        ，  ok ，           

vueプロパティ

vm.$el
      dom
       template      id html

vm.$options
    components: {}
    data: ƒ mergedInstanceDataFn()
    directives: {}
    el: "#app"
    filters: {}
    render: ƒ anonymous( )
    staticRenderFns: []


vm.$nextTick(): vm      ，template      ，          
    vm.arr = [4,5,6];
    console.log(vm.$el.innerHTML); //template   arr     

      dom
    vm.$nextTick  
    
    vm.msg = "maotai";
    vm.arr = [4, 5, 6];
    vm.$nextTick(() => {console.log(vm.$el.innerHTML)});

vm.$set()  value          
    data: {info: {name: "maotai"},}
    vm.$set(vm.info,'age','22');   //vm         
            ，  vm.info.age = 22                。
        vue   vue.$set      ，     

vm.$watch
          ，      ，       
               1 ，     
    vm.$watch('msg', function (newVal, oldVal) { console.log(newVal,oldVal); });
    vm.msg = 'xxx';
    vm.msg = '12';




template  {{}}     
      
               ，       ： {{ {name:1} }}
      
        {{1+1}}
        {{'hello'+'world'}}
      
        {{flag?''ok':'no'}}

vue命令v-once: template

{{msg}}

vm.msg = '' // ， v-html innerHtml div ⚠️ xss ， v-if dom - ( )

a

b

c

2 ， div ， div ， template 2 ， template

bb

eg: v-if , i :key , , , v-show css template v-for vue2.5 v-for key : dom , , .

{{fruit}} - {{index}}

div ， template 3 - div

{{i}}

{{i}}

: div - template key vue ， ， key dom , vue dom , , input , , , span ， innerText， input ， key ， key ⚠️

{{i}}

// ， ， v-bind index key, ， ， 2 ， dom ， v-model input data input input， fn data , this , data this window input vue input @click ， ， $event data: { msg: "hello", fn: function (e) { console.log(e); //e.target.value } } ， $event data: { msg: "hello", fn: function (e, name) { console.log(e); //e.target.value } } , $event, e . data: { msg: "hello", fn: function (name) { console.log(name); } } v-model :value+@input data: { msg: "hello", fn: function (e) { this.msg=e.target.value } } select {{value.name}} data: { selectValue:"0", menu:[ {name:"m1",id:1}, {name:"m2",id:2}, {name:"m3",id:3}, ] }, multipule select {{value.name}} data: { selectValue:[], menu:[ {name:"m1",id:1}, {name:"m2",id:2}, {name:"m3",id:3}, ] }, radio: v-model ： ：
{{radioValue}} checkbox ， .number .number.lazy lazy .trim .enter.ctrl.keyCode @keyup.enter.esc @keyup.13 @keyup.f1 @ .stop stopPropagation,cancelBubble=true; @ .capture xxx.addEventListener('click',fn,true) @ .prevent preventDefault,returnValue=false @ .once on('click') off('click') @ .self e.srcElement&&e.target ( ) @click @input v-mode(:value+@input ) @change select @keyup @keyup @keyup.13 , @keyup.esc , esc