vue基礎編

21808 ワード
vue javascript
まとめは2.xバージョン.
vue-cli生成コマンドの使用:vue create demo
mvvm,m modelデータモデル,v,viewビュー,vm vueは2つのことをしました.1つ目はdom,2つ目はmodalデータとviewをバインドします.
 
1、オプション/ライフサイクルフック
     
beforeCreate:()=>{
 console.log('beforeCrearte')
  },
  created:()=>{
    console.log('created')
  },
  beforeMount:()=>{
 console.log('beforeMount')
  },
  mounted:()=>{
 console.log('mounted')
  },
  beforeUpdate:()=>{
 console.log('beforeUpdate')
  },
  updated:()=>{
 console.log('updated')
  },
 beforeDestroy:()=>{ //    
 console.log('beforeDestroy')
  },
  destroyed:()=>{ //    
 console.log('destroyed')
  },
  errorCaptured:(err, vm, info)=>{ //    
 console.log(err, vm, info)
  },

2、コマンド
mustache（  ）    {{}} 
                ｜            filters   
   filters:{
 nameFix(name){
      return name+'*'
    }
  },

 {{item|nameFix}}

*************
v-once 

 
{{msg}}
  //      

  
{{msg}}
 //     
*******************

v-bind             :

1,   bind   class ， vue          class    class   ，
               key              true    key     ，
 
demo


        ，   item         data    ，     method，  computed    
methods ：
demo

computed：  
demo
 

2，   bind   style， -         ，     method，  computed    

         ：  react    ， 
 
demo

         ： 

           ，              

 data:()=>{return {
    style1:{fontSize:'50px'},
    style2:{color:'lightblue'}

  }},


 
demo



*********************
v-on             @
     ： 
1，    ，           


 changeValue(e){
  console.log(e)
    },
2.     ，   
 

 changeValue(e){
  console.log(e)
    },
3，            ，      $event   ，          ，       



  changeValue(value,e){
  console.log(value,e)
    },

      ：

       
@click.stop

            
@:submit.prevent="onSubmit"

       
@click.stop.prevent


      
1，    

2，      



          ，  vue     
@click.native

      .once





********************


v-if  v-else  v-else-if 
           ；
        ，      ，      ，    diff     ，      key ，key    
        

********************

v-show       display
        
        
********************
v-for  

    
movies:['  ','  ','  '],

    
      
  • 
        {{item}}
        
    • 
    

v-for   key     ，key    ，     index，        ，                     


     
fighter:{
      name:'  ',
      age:'24',
      skill:'   '
    }
 
 
    
      
  • 
        {{value}}
        
    • 
    



********************



v-html  v-text          ，       
 


html     html   
 

text       


v-pre                   


v-cloak              。     {{}}        css

3， methods 和 computed 

method   是方法名字 动词  ， 在vue代码内调用 需要 （）， 渲染 会每次都调用

computed  计算属性 是名次， 在vue代码内调用不需要 （），渲染 只会调用一次  有缓存 

4， computed 的 setter和getter 

   computed:{
    classes:{
      get(){
        return this.styleName
      },
      set(style){
       this.styleName=style
      },
    }
  },


get     ，       get ，  set 


set     

methods:{
    changeValue(){
  this.classes='activeClass2'
    },

}

 
5,for ofとreduce
/*
* for of
*/

let arr = [1,2,3];

//        item   
for(let item of arr){
	console.log(item)
}


/*
* reduce 
*/

 let arr = [100,200,300];
      
      //       ，                 ，       item， 
      let result = arr.reduce((preValue,item)=>{
        return preValue + item
      })

console.log(result)

6,どの操作がvueのタイムリーな応答を満たすことができて、どれらができませんか?
次のことができます.
一、原生配列の操作はすべて可能です
二、または配列オブジェクト全体のアドレスを置き換える
できません:
配列の既存の下付き文字の値を変更して応答を引き起こすことはできません
 
    
      
  • 
        {{item}}
        
    • 
    


movies:['  ','  ','  '],

 changeValue(){
     this.movies[1] = 'k-dash'
    },

7,v-modelといくつかのformコントロールの組み合わせの使用
   v-model 
       v-on  v-bind     

     
.lazy                       
.number     ，  input type=number  
.trim        



*************************
select 

  

 selectValue:'  ',


   

 
  
   ：
    {{selectValues}}
  

 movies:['  ','  ','  '],
    selectValues:['  '],
*************************
radio



    


  
   ：
    {{selectValues}}
  


 movies:['  ','  ','  '],
    selectValues:'  ',

**************************
checkbox checkbox v-model             



    


  
   ：
    {{selectValues}}
movies:['八神','火神','雷神'],
selectValues:['八神'],
8,runtime-compilerとruntime-onlyの違い
templateテンプレートを使用する場合はruntime-compilerを使用します
使用のみvueファイルの場合runtime-onlyを使用
9、グローバルコンポーネントとローカルコンポーネント
//          vue         ，         vue       
 const comp  =  Vue.extend({  // extend     vue   
   template:`
demo
`,
   data:{
     a:222
   }
 })
Vue.component('cpn',comp);
 //    
Vue.component('cpn',{  // extend     vue   
   template:`
demo
`,
   data:{
     a:222
   }
 });



//     components                   ，       
 const comp1  =  Vue.extend({
   template:`
demo
`,
   data:{
     a:222
   }
 })
const app1 = new Vue({
   template:`
demo
`,
   data:{
     a:222
   },
   components:[comp1]
})
//    

const app1 = new Vue({
   template:`
demo
`,
   data:{
     a:222
   },
   components:{
    comp1 : {
   template:`
demo
`,
   data:{
     a:222
   }
 }
}
})

10,templateテンプレート分離書き方:
1， script     


 <div>demo</div>


Vue.component('cpn',{
  template:'#cpn'
})


2， template   

Vue.component('cpn',{
  template:'#cpn'
})

11、親子アセンブリ伝達パラメータ:
父子
1，       props  （bind    :,           -     ），   props    

 props        
 1,     props: ["hero"，"des"]
             
2，          
  props: {
      hero:Array,
      des:String
  }
3，            ts    
 props: {
      des:{
        type:String,
        default:'aaa'
}
  }

     

  data:()=>{
    return {
    hero:['11','22','333'],
    des:'demo'
}
  },

    




export default {
  name: 'Demo',
  data:()=>{
    return { 
  }
  },
  props: {
      hero:Array,
      des:String
  }
}

子が父に伝わる
2，       $emit                 

          @       bind：     

   
  

methods:{
    childClick(e){
      console.log(e)
    }
    
  },

    

 

 methods:{
      btnClick(e){
          this.$emit('cpmClick',e)
      }
  },

         watch   
  watch:{
      nameDemo(newValue){
          this.nameDemo= newValue;
          this.$emit('cpmClick',newValue+'watchValue')
      }
  }

12、親子アクセスコンポーネント方式
    
1， $children           
2， $refs  reference       -----        




     
1, $parent       





     
$root

 
13,スロットslot
スロットの役割は、共通コンポーネントの共通部分を抽象的に使用することです.具体的には、
1，                             

   
 
     
    

   

   


                

2，                        ，        slot       ，   span

    


   


3， slot    

            ，                   
    slot      :data='nameDemo'
      template slot-scope="slot"

14,routerの基本使用
router/index.js 


import VueRouter from 'vue-router';
import Vue from 'vue'
//      
//1，      
//2.              
let home =()=>import ('../components/HelloWorld.vue');
let about =()=>import ('../components/About.vue');


// 1,   router 
Vue.use(VueRouter);

//   router
const routes= [
    {
        path:'',
        redirect:'/home'
    },
    {
        path:'/home',
        component: home
    },
    {
        path:'/about',
        component: about
    }
]

const router = new VueRouter({
    routes
});

//    router
export default router

********************
// main.js 

import Vue from 'vue'
import App from './App.vue'
import router from './router/index'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')


********************
// App.vue



export default {
  name: 'App',
  data(){
    return {}
  },
  methods:{

  },
 
  errorCaptured:(err, vm, info)=>{ //    
 console.log(err, vm, info)
  },
 
}

15, router-link  router-view  



1, router-link    

       
tag      a ，             

replace   to    pushstate，  replace   replacestate，          
 
activeClass             

       
 home 
    
     
  router/index.js    linkActiveClass     
const router = new VueRouter({
    routes,
    mode: 'history',
    linkActiveClass:'red'
});



2， router-view                        


3，     
this.$router.push('/home');
this.$router.repalce('/home');

16、hashとhistoryを切り替えます
/router/index.js    mode    
const router = new VueRouter({
    routes,
    mode: 'history',
});

17,ネストルーティング
// router/index.js        /

  {
        path:'/about',
        component: about,
        children:[
            {
                path:'message',
                component: message
            },
            {
                path:'detail',
                component: detail  
            }
        ]
    }

// About.vue 


            message
            detail

18,routerとrouteの違い
router
ルーティング構成メタ情報を含むグローバルメソッドとオブジェクトが配置されています
*********
route
現在のヒットのルーティング属性
19,ルート上部パラメータ
//     


// 1， restful  path   

const routes= [
    {
        path:'',
        redirect:'/home'
    },
    {
        path:'/home',
        component: home
    },
    {
        path:'/about/:names',
        component: about
    }
]


//   
 goAbout(){
      this.$router.push('/about/xiaoming');
    }

//  about     /about/:names ，names   

 computed:{
        names(){
         return this.$route.params.names
        }
    }
// 2 ，query   

   ：       
 goAbout(){
      this.$router.push(
        {
        path:'/about', 
        query: {
          names:'xiaoming',
          age:12
          }
      }
      );
    }

   ：   bind   
 about

//      query 


 computed:{
        names(){
            console.log(this.$route)
         return this.$route.query.names
        }
    }

20、ルートガード
    ： before        next  ， after    
1，    

  title

const routes= [
    {
        path:'',
        redirect:'/home'
    },
    {
        path:'/home',
        component: home,
        meta:{
            title:'  '
        }
    },
    {
        path:'/about',
        component: about,
        meta:{
            title:'  '
        },
        children:[
            { 
                path:'',
                redirect:'message'

            },
            {
                path:'message',
                component: message,
                meta:{
                    title:'  '
                },
            },
            {
                path:'detail',
                component: detail,
                meta:{
                    title:'  '
                },
            }
        ]
    }
]

router.beforeEach((to, from, next) => {
      // meta    
    document.title = to.meta.title ? to.meta.title : to.matched[0].meta.title
     next()
  })


2，           route 

 {
        path:'/about',
        component: about,
        meta:{
            title:'  '
        },
        beforeEnter: (to, from, next) => {
            document.title = to.meta.title ? to.meta.title : to.matched[0].meta.title
            next()
          },

}

3，                   
 beforeRouteEnter (to, from, next) {
          console.log(this) //      ，         this
            next(vm => {
                console.log(vm)
            //    `vm`       
        })
  },
    beforeRouteUpdate (to, from, next) {
    // just use `this`
    this.name = to.params.name
    next()
    },
    beforeRouteLeave (to, from, next) {
    const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
    if (answer) {
        next()
    } else {
        next(false)
    }
    },

21、ルーティングコンポーネントkeep-aliveは、一般的にルーティングがアンインストールされると破棄され、この属性を加えると破棄されず、コストを節約する
  
exclude            ，

22,vuex  
 1，        

import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex);

let store = new Vuex.Store({  //   Store    
    state:{ //         
        count:1000
    },
    mutations:{  //         ，                 ，    mutations
        add(state,{payload}){
            //state.count++
            state.count+=payload;
        }
    },
    actions:{ //          mutations   

    },
    getters:{ //   computed

    },
    modules:{  //      state 

    }
}) 

export default  store;

 2，   main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router/index'
import store from './store/global'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')



3, state  //         
        

{{$store.state.count}}



4， mutations
 
     commit   

    mutations:{  //         ，                 ，    mutations
        add(state,payload){
            //state.count++
            state.count+=payload;
        }
    },

  methods:{
        add(){
           // 1，commit          ，
          //  this.$store.commit('add')
           this.$store.commit('add',2) //       
          // 2. commit      react diapatch      
        //    this.$store.commit({ 
        //        type:'add',
        //        payload:2
        //    })
        }
    }


   mutations                
export default {
    'add':'add'
}
import mutationsType from './mutationsType'

[mutationsType.add](state,payload){
            //state.count++
            state.count+=payload;
        }



5， actions


 fetchSth(){
             this.$store.dispatch('fetchSth')
        }

  fetchSth(context){  // context     store      
            setTimeout(() => {
                //   commit         
                context.commit(mutationsType.add,1);
            }, 1000);
        }


//   promise          

  fetchSth(context){  // context     store      
            setTimeout(() => {
                //   commit         
                context.commit(mutationsType.add,1);
                
            }, 2000);
            return new Promise((resolve,reject)=>{
                resolve('    ');
                reject('')
            })
        }

this.$store.dispatch('fetchSth').then(res=>{
                 console.log(res)
             })


6， getters


{{$store.getters.powerCount}}


getters:{ //   computed
        powerCount(state){
            return state.count*500;
        }

    },

     

 getters:{ //   computed
        powerCount(state){
            return (params)=>{
               return state.count+params
            }
        }

    },

 
getters

        
{{$store.getters.powerCount(500)}}


7， modules

  state         ，             ，             

let moduleA = {
    state:{
        age:1111111
    }
}

 modules:{  //      state 
        moduleA
    }


{{$store.state.moduleA.age}}





8，store       

   modules       ， 
   state

23, promise 
1,promiseの関数は地獄の問題を解決して回復するためです
2,promiseは2つの関数をパラメータresolve,rejectとして受信する
3、このいくつかの方法はpromiseに分解することもできます.resolve(),promise.reject()もう一つpromise.allは複数のリクエストを受信し、成功した.thenは1つの配列に2つのリクエストを配置した結果を得て、同時リクエストを処理します.
    4,.then対応resolve  .catchはrejectに対応し、最後にfinallyもあります.catch後に続行する.then 
    5,.継続する必要があるならthen下りてコールバックして直接return resすればいいです.彼はpromiseです.resolve()またはnew Promise(resolve)の略語
  
24,axios  
1，     

import axios from 'axios';

axios({
  url:'http://123.207.32.32:8000/home/multidata',
  method:'get'
}).then(res=>{
  console.log(res)
})

axios.get('http://123.207.32.32:8000/home/multidata').then(res=>{
  console.log(res)
})

axios({
  url:' http://123.207.32.32:8000/home/data',
  params:{
    type:'sell',
    page:1
  }
}).then(res=>{
  console.log(res)
})

2，       
axios.all([
  axios({
  url:'http://123.207.32.32:8000/home/multidata',
  method:'get'
}),
axios({
  url:' http://123.207.32.32:8000/home/data',
  params:{
    type:'sell',
    page:1
  }
})]).then(res=>{
  console.log(res)
})

3，     

axios.defaults.baseURL = 'http://123.207.32.32:8000';
axios.defaults.timeout = 5000

axios({
  url:'/home/multidata',
  method:'get'
}).then(res=>{
  console.log(res)
})

4，    

let request = axios.create({
  baseURL:'http://123.207.32.32:8000',
  timeout: 5000
})
request({
  url:'/home/multidata',
}).then(res=>{
  console.log(res)
})


5，     

let request = (config)=>{
   let instance = axios.create({
    baseURL:'http://123.207.32.32:8000',
    timeout: 5000
   })
   //       promise
   return instance(config);
}
request({
  url:'/home/multidata',
}).then(res=>{
  console.log(res)
})



6，    

let request = (config)=>{
   let instance = axios.create({
    baseURL:'http://123.207.32.32:8000',
    timeout: 5000
   })
   //！！！！！               config
   //               
   instance.interceptors.request.use(
     config=>{
       console.log('      ')
       return config
     },
     err=>{
      console.log('      ')
      return err
     }
     )
   //              
   instance.interceptors.response.use(
    config=>{
      console.log('      ')
      return config
    },
    err=>{
     console.log('       ')
     return err
    }
    )
   //       promise
   return instance(config);
}

 
 
 
リンクチェック方法のまとめ
Redisの基本データ構造、基本操作