VUEノート1の基礎部分

VUEノート1の基礎部分

v-text=‘app’ ラベルv-html=‘app’ ラベルv-cloak サンプルはスクリーンフラッシュの を する v-bind:src=‘imgs.jpg’ :src=‘img/imgs/jpg’
v-model データバインドv-onceはv-modelを だけレンダリングする.Lazyはカーソルを ってデータv-modelを する.numberデジタル メカニズムv-model.trimスペース
ループ
v-for=‘i in list’v-for=’(i,v)in list’jsonループv-for=(‘item,key,index’):key(item.id)
v-on:click=‘add()’クリックイベント@click:=‘add()’
v-if v-show
けっていぶん

イベント
@click.stop='add()はイベントの => @clickを する.prevent='add()はデフォルトの をブロック@click.Capture='add()イベントキャプチャ び し => @click.self='add()は、 の で@clickをトリガーする があります.once=‘add()’は1 のみ @subimt.preventコミットデフォルトの をブロック
マウス
@click.left middle right クリック クリックトリガ@click ctrl alt shiftシステム
キーボード
@keyup.down up lef right を す.Enterがenterキーを すと、カスタムキーボードキーVueがトリガーされる.config,keyCodes.f1=112

    : ' ：'
class:     
    :class='a+" "+b'    
    :class=[a, b,bg:isFalse?"":bg]
   :class='{box:true,border:true,bg:false}'
   :class='{box:a==20,border:true,bg:false}'
style
    :style='{width:200px,height:200px}'




##        
{
    { vals |    }}
  
Vue.filter('  '，function(vals){
 return vals+     
})

  
filters: { //     
           fl1: function (value) {
               return value.charAt(0).toUpperCase() + value.slice(1)
           }
}

        
{
    { vals |    ("$","1")}}
Vue.filter('  '，function(vals,str='$',param=2){
 return str+(parseInt(vals).toFixed(param))
})

    

 
Vue.prototype.funColor = function (content, c = 'red') {
       return "" + content + ""
 }

## vue-resource
get
    this.$http.get(url,{a:0,b:1}).then(function(res){
    },function(err){
    })
post
   this.$http.post(url,{a:0,b:1},{emulateJSON:true}).then(function(res){
   },function(err){
   })
  
   this.$http.jsonp(url),{jsonp: 'jsonp'jsonpCallback:'      ' }.then(function(res)    {},function(err){})
   this.$http.jsonp(url),{pargrams:{wd,this.wd},jsonp: 'cb' }.then(function(res){},function(err){})

フック mounted
フック も に シーンがあります でトリガします でフック を び す はありませんライフサイクル beforeCreatevueオブジェクトも ばれますフック と なイベントを したばかりで、まだデータがありません. created vueオブジェクトは1 でデータと をロードしました. も く できるデータbeforeMonutはメモリコンパイルが してデータが されていません.ountedはdom メモリデータと のdomデータを させるフック データbeforeUpdate domで のdomにロードされていませんupdatedは domで を し、 のdom domと domデータの を き えました
vmインスタンスオブジェクト

vm.$el        
vm.#data   data
vm.info       
vm.$mount("#app")      

カスタム Vue.directive(「focus」,{bind:function(el){},css inserted:function(el){}を するには にjs })
カスタムコマンド パラメータ
hello Vue.directive("colors", { inserted: function (el, parem) { el.style.color = parem.value } })
プロパティ
computed:{ str:function(){ return ‘asd’ } }
ウォッチ
watch: { str() { strs = this.str + “@qq.com” this.useStr = strs } }
アニメーション(Animation)
.fade-enterが する に.fade-enter-active .fade-enter-to .fade-leaveが す にfade-leave-activeが れているとき.fade-leave-to し
animateプラグインenter-active-class leave-active-class
せいぎょじかん

ハーフタイム

  
            

   

  methods: {
            beforeEnter(el) {
                el.style.transform = 'translate(0,0)'
            },
            enter(el, noe) {
                el.offsetLeft
                el.style.transform = 'translate(150px,450px)'
                el.style.transition = 'all 2s ease'
                noe()                

            },
            afterEnter(el) {
                this.shows = !this.shows
            }
        }

のコンポーネントenter-active-class='bounceInUp'leave-active-class='bounceInDownはkeyをバインドする があります.
モードout-in out-in