H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【前端技术】鍒嗕韩Vue鐨勪竴浜涘疄鎴樺皬鎶€宸э紝璁╀綘浠g爜鏇翠紭闆呮洿鍙淮鎶?/a>

宸茬粡濂戒箙濂戒箙娌″啓杩囨枃绔狅紝涓婁竴娆″啓搴旇鏄勾鍓嶅惂锛屽彲鑳芥槸鍙樻噿浜嗗惂銆傛渶杩戦兘鍦ㄧ湅鍧戞壘鍧戯紝闂蹭笅鏉ユ湁鐐规棤鑱婏紝灏辨兂姘翠竴閬嶆枃绔狅紝鎵撳彂涓€涓嬫椂闂?..

鑳借浣犻娆″姞杞芥洿蹇殑璺敱鎳掑姞杞斤紝鎬庝箞鑳藉繕锛?/h1>

璺敱鎳掑姞杞藉彲浠ヨ鎴戜滑鐨勫寘涓嶉渶瑕佷竴娆℃妸鎵€鏈夌殑椤甸潰鐨勫姞杞借繘鏉ワ紝鍙姞杞藉綋鍓嶉〉闈㈢殑璺敱缁勪欢灏辫銆?/p>

涓句釜馃尠锛屽鏋滆繖鏍峰啓锛屽姞杞界殑鏃跺€欎細鍏ㄩ儴閮藉姞杞借繘鏉ャ€?/p>

const router = new VueRouter({
  routes:[
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

鎵€浠ワ紝搴旇閬垮厤涓婇潰鐨勫啓娉曪紝灏介噺浣跨敤鎳掑姞杞?/p>

鎳掑姞杞藉啓娉?缁撳悎webpack鐨刬mport椋熺敤

const router = new VueRouter({
  routes:[
    {
      path: '/',
      name: 'Home',
      component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue')
    },
    {
      path: '/about',
      name: 'About',
      component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
    }
  ]
})

浣犳槸鍚﹁繕璁板緱鏈変竴涓彨Object.freeze鐨勬柟娉曪紵

搴旇鎵€鏈夊悓瀛﹂兘鐭ラ亾锛寁ue鍒濆鍖栫殑鏃跺€欎細灏哾ata閲岄潰鐨勬暟鎹兘鎼炴垚鍝嶅簲寮忔暟鎹惂銆備絾鏄紝鎴戜滑鍦ㄥ啓涓氬姟閫昏緫鐨勬椂鍊欎細鏈変簺鏁版嵁涓€鍒濆鍖栧氨姘歌繙涓嶄細鏀瑰彉锛屽畠鏍规湰灏变笉闇€瑕佽vue鍋氭垚鍝嶅簲寮忔暟鎹紝鍥犳鎴戜滑搴旇灏嗚繖浜涗笉鐢ㄦ敼鍙樼殑鏁版嵁閫氳繃Object.freeze鏂规硶鍐荤粨瀹冿紝閬垮厤vue鍒濆鍖栫殑鏃跺€欙紝鍋氫竴浜涙棤鐢ㄧ殑鎿嶄綔銆?/p>

馃尠

export default {
  data:()=>({
    list:Object.freeze([{title:'鎴戞案杩滀笉闇€瑕佹敼鍙橈紝鎴戜笉闇€瑕佸搷搴斿紡'}])
  })
}

寮傛缁勪欢閭d箞寮猴紝浣犳槸涓嶆槸娌$敤杩囷紵

寮傛缁勪欢鍙互璁╂垜浠湪闇€瑕佷竴浜涚粍浠舵椂鎵嶅皢瀹冨姞杞借繘鏉ワ紝鑰屼笉鏄竴鍒濆鍖栧氨鍔犺浇杩涙潵锛岃繖璺熻矾鐢辨噿鍔犺浇鏃朵竴涓蹇点€?/p>

馃尠

export default {
  components:{
    AsyncComponent:()=>import(/* webpackChunkName: "AsyncComponent" */ './Async')
  }
}

棣栨鍔犺浇鐨勫寘鏄笉鍖呭惈鏀圭粍浠朵唬鐮佺殑

image.png

褰撶偣鍑昏Е鍙戞煇绉嶈涓哄紩杩涚殑鍖呮槸杩欐牱鐨?/p>

image.png

寮傛缁勪欢杩樻湁涓€绉嶆瘮杈冨畬鍠勭殑鍐欐硶

馃尠

export default {
  components:{
    AsyncComponent:()=>({
      component:import(/* webpackChunkName: "AsyncComponent" */ './Async'),
      delay:200, // 寤惰繜鍑犳绉掞紝榛樿200
      timeout:3000, // 鍔犺浇鍑犳绫充箣鍚庡氨瓒呮椂锛岃Е鍙慹rror缁勪欢
      loading:LoadingComponent, // 缁勪欢鏈姞杞藉洖鏉ュ墠鏄剧ず
      error:ErrorComponent // 缁勪欢瓒呮椂鏃舵樉绀?    })
  }
}

浣犳槸涓嶆槸杩樺湪computed涓娇鐢╰his锛?/h1>

鎴戠寽杩樻湁寰堝鍚屽锛屽湪computed灞炴€т腑閫氳繃this.xxx鍘绘嬁data閲岄潰鐨勬暟鎹紝鍜宮ethods閲岄潰鐨勬柟娉曞惂锛屾垨璁歌繕浼氶€氳繃this.$store鍘绘嬁vuex鐨剆tate,鍜宑ommit绛夛紝鐢氳嚦锛岃繕浼氶€氳繃this.$route鍘昏幏鍙栬矾鐢遍噷闈㈢殑鏁版嵁鍚с€傚叾瀹烇紝鎴戜滑鍙互閬垮厤杩欎簺涓戦檵鐨則his,瀹冪敋鑷充細缁欐垜浠甫鏉ョ湅涓嶈鐨勬€ц兘闂銆傚疄鐜颁笂锛屾垜浠€氳繃this鑳借闂埌鐨勬暟鎹紝鍦╟omputed鐨勭涓€涓弬鏁颁笂閮借兘缁撴瀯鍑烘潵銆?/p>

馃尠

export default {
   haha({$attrs,$route,$store,$listeners,$ref}){
     // 杩樿兘缁撴瀯寰堝灞炴€э紝鍙嚜琛屾墦鍗板悍搴?     return 
   }
}

濡備綍閬垮厤v-if鍜寁-for涓€璧蜂娇鐢紵

涓轰粈涔堣閬垮厤v-if鍜寁-for鍦ㄥ悓涓€涓厓绱犱笂鍚屾椂浣跨敤鍛紵鍥犱负鍦╲ue鐨勬簮鐮佷腑鏈変竴娈典唬鐮佹椂瀵规寚浠ょ殑浼樺厛绾х殑澶勭悊锛岃繖娈典唬鐮佹槸鍏堝鐞唙-for鍐嶅鐞唙-if鐨勩€傛墍浠ュ鏋滄垜浠湪鍚屼竴灞備腑涓€璧蜂娇鐢ㄤ袱涓寚浠わ紝浼氬嚭鐜颁竴浜涗笉蹇呰鐨勬€ц兘闂锛屾瘮濡傝繖涓垪琛ㄦ湁涓€鐧炬潯鏁版嵁锛屽啀鏌愮鎯呭喌涓嬶紝瀹冧滑閮戒笉闇€瑕佹樉绀猴紝褰搗ue杩樻槸浼氬惊鐜繖涓?00鏉℃暟鎹樉绀猴紝鍐嶅幓鍒ゆ柇v-if锛屽洜姝わ紝鎴戜滑搴旇閬垮厤杩欑鎯呭喌鐨勫嚭鐜般€?/p>

涓嶅ソ鐨勷煂?/p>

    <h3 v-if="status" v-for="item in 100" :key="item">{{item}}</h3>

濂界殑馃尠

    <template v-if="status" >
        <h3 v-for="item in 100" :key="item">{{item}}</h3>
    </template>

閭d箞寮虹殑.sync淇グ绗︿綘涓轰粈涔堜笉鐢?

濡傛灉浣犳兂瑕佸湪鐖剁粍浠舵帶鍒朵竴涓瓙缁勪欢鐨勬樉绀洪殣钘忥紝鏄笉鏄繕鍦ㄤ紶涓€涓猵rop鍜屼竴涓嚜瀹氫箟鏂规硶锛岃繖鏍蜂細寰堥夯鐑︼紝涓嶅Θ璇曚竴璇晄ync淇グ绗︺€?/p>

馃尠


 // 鐖剁粍浠? 
 template>
  <div>
    <Toggle :show.sync = 'show'></Toggle>
  </div>
</template>

//Toggle 缁勪欢

<template>
  <div>
    <div v-if="show">
    灞曠ず鍜岄殣钘忕粍浠?  </div>
  <button @click="test">闅愯棌缁勪欢</button>
  </div>
</template>
<script>

export default {
  props:['show'],
  methods: {
    test(){
      this.$emit('update:show',false)
    }
  }
}
</script>

&dollar;attr鍜?amp;dollar;listeners璁╀綘灏佽缁勪欢濡傞奔寰楁按锛?/h1>

&dollar;attr鍜?amp;dollar;listeners鍙兘寰堝鍚屽娌℃€庝箞鍘讳娇鐢紝鍏跺疄瀹冧滑璁╂垜浠涓€浜涚粍浠跺簱鐨勭粍浠朵簩娆″皝瑁咃紝闈炲父濂界敤鐨勩€?/p>

绠€鍗曚粙缁嶄竴涓嬪畠浠袱涓細

&dollar;attr:濡傛灉涓€涓粍浠朵笉浣嗕紶浜唒rop闇€瑕佺殑灞炴€э紝杩樹紶浜唒rop涔嬪鐨勫叾浠栧睘鎬э紝閭d箞杩欎簺灞炴€ч兘浼氳鏀堕泦鍒?amp;dollar;attr閲岄潰銆?/p>

&dollar;listeners锛氬鏋滀竴涓粍浠朵紶浜嗚嚜瀹氫箟浜嬩欢锛屼絾瀛愮粍浠舵病鏈夐€氳繃emit瑙﹀彂锛岄偅涔堣繖浜涜嚜瀹氫箟鏂规硶閮戒細琚敹闆嗗埌&dollar;listeners閲岄潰銆?/p>

杩欓噷涓句竴涓ElementUI鐨凾abel缁勪欢绠€鍗曠殑浜屾灏佽鐨勷煂?/p>

<el-table 
   v-bind="$attrs"
   v-on="$listeners">
   <template v-for="item in column">
    <el-table-column v-bind="item" />
   </template>
</el-table>
<script>
export default {
  props:{
      column:{
        type:Array,
        required:true
      }
   }
}
<script>

v-model杩樻湁杩欎箞濂界殑淇グ绗︼紒

v-model涓婃湁3涓瘮杈冨ソ鐢ㄧ殑淇グ绗︿笉鐭ュ埌澶у鏈夋病鏈夌敤杩囷紝涓€涓槸lazy,涓€涓槸number,涓€涓槸trim銆?/p>

lazy:鍙互灏咢input浜嬩欢鍙樻垚@blur浜嬩欢

number锛氬彧鑳借緭鍏ユ暟瀛楀€?/p>

trim:娓呯┖涓よ竟鐨勭┖鏍?/p>

馃尠

   //lazy
   <input v-model.lazy="msg" />
   //number
   <input v-model.number="msg" />
   //trim
   <input v-model.trim="msg" />

浣犳槸鍚︾煡閬搗-model杩樿兘鑷畾涔夊睘鎬э紵

濡傛灉鎯冲湪涓€涓嚜瀹氫箟鐨処nput缁勪欢涓婁娇鐢╲-model锛岄偅涔堝氨瑕佸湪瀛愮粍浠讹紝浠嬬粛涓€涓獀alue锛屽拰瑙﹀彂input浜嬩欢锛寁-model鐨勯粯璁よ娉曠硸灏辨槸杩欎袱涓笢瑗跨殑缁勫悎銆?/p>

馃尠

// 鐖剁粍浠?<template>
  <div>
    <CustomInput v-model='msg' />
  </div>
</template>

//CustomInput

<template>
  <div>
    <input type="text" :value="value" @input="test">
  </div>
</template>
<script>
export default {
  props:['value'],
  methods: {
    test(e){
      this.$emit('input',e.target.value)
    }
  },
}
</script>

浣嗘槸锛屽鏋滅粍浠堕噷闈笉鏄痠nput,鑰屾槸涓€涓猚heckbox鎴栬€呬竴涓猺adio鍛?鎴戜笉鎯虫帴鍙椾竴涓獀alue鍜宨nput浜嬩欢锛屾垜鎯虫帴鏀朵竴涓洿鍔犺涔夊寲鐨刢hecked鍜宑hange浜嬩欢锛岄偅璇ユ€庝箞鍔烇紵

馃尠

// 鐖剁粍浠朵笉闇€鏀瑰彉
...
//CustomInput
<template>
  <div>
    <input type="checkbox" :checked="checked" @change="test">
  </div>
</template>
<script>
 props:['checked'],
 model:{
    props:'checked',
    event:'change'
  },
  methods: {
    test(e){
      this.$emit('change',e.target.checked)
    }
  }
}
</script>

浣犺繕鍦ㄧ敤娴忚鍣ㄧ殑scrollTop婊氬姩浣犵殑椤甸潰鍚楋紵

鏈変簺鏃跺€欐垜浠湪鎿嶄綔涓€涓嬮〉闈㈢殑婊氬姩琛屼负锛岄偅涔堟垜浠涓€鏃堕棿灏变細鎯冲埌scrollTop銆傚叾瀹炴垜浠繕鏈夌浜屼釜閫夋嫨灏辨槸VueRouter缁欐垜浠彁渚涚殑scrollBehavior閽╁瓙銆?/p>

馃尠


const router = new VueRouter({
  routes:[...] ,
  scrollBehavior(to,from,position){
      // position鍙傛暟鍙嚜琛屾墦鍗板悍搴凤紝鐐瑰嚮娴忚鍣ㄥ乏鍙崇澶翠細瑙﹀彂
      return{
          // 杩欓噷鍙互杩斿洖寰堝鍙傛暟锛屼笅闈㈢畝鍗曞垪灏卞嚑涓紝璇︽儏鑷繁搴峰悍瀹樼綉
          x:100,
          y:100,
          selector:#app,
          offset:200,
          //绛夌瓑
      }
  }
})

浣犲湪瀛愮粍浠朵笂瀹氫箟鐨勫師鐢熶簨浠朵笉鐢熸晥锛?/h1>

鏈夋椂鍊欐垜浠兂鍦ㄥ瓙缁勪欢涓婇潰鐩戝惉涓€浜涗簨浠讹紝姣斿click锛屼絾鏄笉璁轰綘鎬庝箞鐐癸紝瀹冮兘娌″弽搴旓紝涓轰粈涔堝憿锛?/p>

馃尠

<template>
    <div>
        <Child @click="test"></Child>
    </div>
</template>
<script>
    methods:{
        test(){}
    }
</script>

鍥犱负杩欐牱鍐檝ue浼氳涓猴紝浣犺嚜瀹氫箟浜嗕竴涓猚lick浜嬩欢锛岃鍦ㄥ瓙缁勪欢閫氳繃$emit(‘click’)瑙﹀彂鎵嶈銆傚鏋滄垜灏辨槸瑕佸湪鐖剁粍浠惰Е鍙戝憿锛熼偅灏辫鐢ㄥ埌native淇グ绗︿簡銆?/p>

馃尠

<template>
    <div>
        <Child @click.native="test"></Child>
    </div>
</template>
<script>
    methods:{
        test(){}
    }
</script>

鐢╧eep-alive缂撳瓨涓€涓嬩綘鐨勯〉闈㈢姸鎬佸惂锛?/h1>

keep-alive鍙互甯姪鎴戜滑鍦ㄥ垏鎹㈢粍浠剁殑鏃跺€欙紝淇濈暀涓婁竴涓粍浠朵笉琚攢姣侊紝瀹冨湪绠$悊鍚庡彴绯荤粺涓瘮杈冨父鐢ㄣ€?/p>

馃尠

<keep-alive>
    <router-view></router-view>
</keep-alive>

本文地址:H5W3 » 【前端技术】鍒嗕韩Vue鐨勪竴浜涘疄鎴樺皬鎶€宸э紝璁╀綘浠g爜鏇翠紭闆呮洿鍙淮鎶?/a>

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址