vue-cli $nextTick()峰伙、$forceUpdate()方法 疗疟、自定義指令和自定義插件

一、$nextTick()瞳氓、$forceUpdate()方法

<template>
 <input type="text" v-model="carName" />
    <button @click="addCar">添加汽車</button>
    <ul ref="list">
      <li v-for="item in cars" :key="item.id">
        <input type="text" :value="item.name" />
      </li>
    </ul>
 <hr />
    <div>
      <button @click="employe.name='蔡依林'">修改姓名</button>
      <button @click="addSex">添加性別</button>
      <div>{{ employe.name }}---{{ employe.age }}</div>
    </div>
</template>

<script>
 methods: {
    addCar() {
      let car = {
        id: Date.now(),
        name: this.carName,
      };
      this.cars.push(car);
      this.carName = "";
      // $nextTick方法策彤,需要傳一個(gè)回調(diào)函數(shù)
      // 回調(diào)函數(shù)里面的代碼在DOM更新完成后執(zhí)行
      this.$nextTick(() => {
        // 讓最后一個(gè)li元素獲取焦點(diǎn)
        this.$refs.list.lastChild.lastChild.focus();
      });
    },
    addSex() {
      // this.$set(this.employe,'sex','男')
      this.employe.sex = "男";
      this.$forceUpdate();
      console.log(this.employe);
    },
  },
</script>

二、局部自定義指令

<template>
  <div class="two">
    <div v-red>好好學(xué)習(xí)</div>
    <div v-html="car" v-color="'blue'"></div>
    <div v-myhtml="car" v-color="'green'"></div>
  </div>
</template>
<script>
export default {
  name: "Two",
  //定義局部指令匣摘,所有的指令背后都是在操作DOM店诗,稱之為:造輪子
  //自定義局部指令,就是一個(gè)方法,有個(gè)參數(shù)叫el,就是這個(gè)指令所在的DOM元素音榜,就是這個(gè)div
  directives: {
    red: function (el) {
      el.style.color = "red";
    },
    //指令方法的第二個(gè)參數(shù)庞瘸,是指令的值,可寫可不寫囊咏,也可自定義
    myhtml: function (el, bind) {
      el.innerHTML = bind.value;
    },
  },
  data() {
    return {
      car: "<h2>瑪莎拉蒂</h2>",
    };
  },
};
</script>

三恕洲、全局自定義指令

// 創(chuàng)建全局自定義指令
// 1、directive文件夾的index文件中先引入vue
import Vue from 'vue'
//color是自定義指令的名字梅割,使用的時(shí)候前面加上v-
Vue.directive('color',function(el,bind){
    //自定義局部指令,就是一個(gè)方法霜第,有個(gè)參數(shù)叫el,就是這個(gè)指令所在的DOM元素,就是這個(gè)div
    //指令方法的第二個(gè)參數(shù)户辞,是給指令綁定的值泌类,可寫可不寫,bind也可自定義
    el.style.color=bind.value
})

2、然后去main.js中去注冊(cè)

import index from './directive/index'

3刃榨、使用 v-color=" 'green' " "green"是變量 "'green'"是表達(dá)式弹砚,要加上單引號(hào)

 <div v-myhtml="car" v-color="'green'"></div>

四、自定義插件

 <button @click="sayHello">sayhello</button> |
   <button @click="showPlane">showPlane</button>
  <div v-bgcolor="'lightblue'">我是背景色</div>

混入只能寫數(shù)據(jù)枢希、方法和生命周期桌吃,插件的功能比混入更為強(qiáng)大,插件是擴(kuò)展vue的功能

//插件本質(zhì)上是一個(gè)對(duì)象
export default {
    // 該對(duì)象中必須包含install()方法
    // install()方法第一個(gè)參數(shù)是Vue,第二個(gè)是配置對(duì)象
    //install()方法會(huì)在use的時(shí)候執(zhí)行vue.use(插件)苞轿,這里的vue會(huì)作為install方法的第一個(gè)對(duì)象
    install: function (Vue, options) {
        // 可以給vue直接添加方法
        Vue.sayHi = function () {
            console.log('大家好茅诱,我是vue');
        },
        //可以添加屬性
        Vue.msg="歡迎使用插件",
        // 可以在vue的原型上添加方法
        Vue.prototype.sayHello = function () {
            console.log('我是vue原型上的方法');
        },
        Vue.mixin({  //混入只能寫數(shù)據(jù) 方法 和生命周期
            data() {
                return {
                    plane:{
                        name:'波音747',
                        price:'1000w'
                    }
                }
            },
            methods: {
                showPlane(){
                    console.log(this.plane.name,this.plane.price);
                }
            },
        }),
        // 注冊(cè)全局組件
        Vue.component('b-box',{
           render(h) {
               return h('div',this.$slots.default)
           },
        }),
        // 注冊(cè)全局指令
        Vue.directive('bgcolor',function(el,bind){
            el.style.backgroundColor=bind.value
        })
       
        
    }

}

2、在main.js 里面導(dǎo)入

import myPlugin from './plugins'
Vue.use(myPlugin)
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末搬卒,一起剝皮案震驚了整個(gè)濱河市瑟俭,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌契邀,老刑警劉巖摆寄,帶你破解...
    沈念sama閱讀 222,729評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異坯门,居然都是意外死亡微饥,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門田盈,熙熙樓的掌柜王于貴愁眉苦臉地迎上來畜号,“玉大人,你說我怎么就攤上這事允瞧〖蛉恚” “怎么了?”我有些...
    開封第一講書人閱讀 169,461評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵述暂,是天一觀的道長痹升。 經(jīng)常有香客問我,道長畦韭,這世上最難降的妖魔是什么疼蛾? 我笑而不...
    開封第一講書人閱讀 60,135評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮艺配,結(jié)果婚禮上察郁,老公的妹妹穿的比我還像新娘。我一直安慰自己转唉,他們只是感情好皮钠,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,130評(píng)論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著赠法,像睡著了一般麦轰。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,736評(píng)論 1 312
  • 那天款侵,我揣著相機(jī)與錄音末荐,去河邊找鬼。 笑死新锈,一個(gè)胖子當(dāng)著我的面吹牛甲脏,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播壕鹉,決...
    沈念sama閱讀 41,179評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼剃幌,長吁一口氣:“原來是場噩夢(mèng)啊……” “哼!你這毒婦竟也來了晾浴?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,124評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤牍白,失蹤者是張志新(化名)和其女友劉穎脊凰,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體茂腥,經(jīng)...
    沈念sama閱讀 46,657評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡狸涌,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,723評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了最岗。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片帕胆。...
    茶點(diǎn)故事閱讀 40,872評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖般渡,靈堂內(nèi)的尸體忽然破棺而出懒豹,到底是詐尸還是另有隱情,我是刑警寧澤驯用,帶...
    沈念sama閱讀 36,533評(píng)論 5 351
  • 正文 年R本政府宣布脸秽,位于F島的核電站,受9級(jí)特大地震影響蝴乔,放射性物質(zhì)發(fā)生泄漏记餐。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,213評(píng)論 3 336
  • 文/蒙蒙 一薇正、第九天 我趴在偏房一處隱蔽的房頂上張望片酝。 院中可真熱鬧,春花似錦挖腰、人聲如沸雕沿。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽晦炊。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間断国,已是汗流浹背贤姆。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評(píng)論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留稳衬,地道東北人霞捡。 一個(gè)月前我還...
    沈念sama閱讀 49,304評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像薄疚,于是被迫代替她去往敵國和親碧信。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,876評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容