Vue2基礎

系結事件@

@click="add($event,xxx)"//傳多個引數時候$event表示事件物件
@keyup.enter="add"//滑鼠抬起或者enter鍵觸發，括號不傳參可寫可不寫

系結資料：

Vue會決議引號里的運算式、此時這個值的型別就為Number

:value="18"

運算式 = 有回傳值的陳述句、在插值里都可以使用、vm身上的東西也可以寫入插值語法

1、1+1、add()、a?a:b

事件修飾符

可以連續使用、其他還有按鍵碼和其別名

• .stop阻止冒泡（常用）
• .prevent阻止默認事件（常用）
• .once只觸發一次（常用）
• .self只有e.target是當前操作元素才觸發事件
• .capture捕獲模式
• .passive在scroll事件使用
• native組件系結原生事件

v-model的修飾符

• .lazy - 取代 input 監聽 change 事件、焦點丟失的時候觸發
• .number - 輸入字串轉為有效的數字
• .trim - 輸入首尾空格過濾

動態切換class

可以實作排他思想，樣式切換，在回圈的li里系結樣式和事件

:class="{active:isCur===idx}"

當點擊的時候，在點擊事件里寫入

this.isCur = idx;

動態系結style

如字體大小等都可以讓Vue來監聽，系結一個物件

:style="obj"

物件里寫的CSS屬性

obj:{
	fontSize:16px;
}

計算屬性computed

計算屬性有 getter和setter，setter、完整寫法：

computed: {
    fullName: {
        // getter獲取時呼叫
        get() {
            return this.firstName + ' ' + this.lastName
        },
        // setter修改時呼叫
        set(newValue) {
            const names = newValue.split(' ')
            this.firstName = names[0]
            this.lastName = names[names.length - 1]
        }
    }
}

簡寫成函式、默認只有getter🧡：

computed:{
    fullName() {//不用寫在data里了，插值語法直接使用
        return this.firstName + ' ' + this.lastName
    }
}

偵聽器watch

相比computed可以執行異步操作、完整寫法：

watch: {
    isHot: {
        deep:true,//監測多層值的改變
        immediate:true,//一開始執行一次
        handler(newValue,oldValue){
            ...
        }
    }
},

簡寫成函式🧡：

watch: {
    isHot(){
        ...
    },
    deep: true//這樣也可以
},

Vue監測物件、陣列的改變

Vue監測物件是通過getter和setter

如果在物件里新增一個屬性，則視圖不會更新，此時需要使用Vue.set()

Vue監測陣列必須使用這幾個Vue維護的方法(因為沒有getter和setter)、不能使用中括號操作、否則視圖不會更新

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

Vue.set()、this.$set()

如果在物件里新增一個屬性，則視圖不會更新，此時需要使用Vue.set()

向回應式物件中添加一個 property，并確保這個新 property 同樣是回應式的，且觸發視圖更新，

Vue.set（target, propertyName/index, value）全域方法

this.$set(target, propertyName/index, value)區域方法🧡

過濾器filter

Vue.js 允許你自定義過濾器，可被用于一些常見的文本格式化，過濾器可以用在兩個地方：雙花括號插值和 v-bind 運算式

區域過濾器🧡

{{ message | capitalize }}
filters: {
    capitalize: function (value) {
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
    }
}

全域過濾器

Vue.filter('capitalize', function (value) {})

組件的使用

步驟

1. 定義組件
2. 注冊組件
3. 使用組件（寫組件標簽）

全域注冊和區域注冊

區域注冊：靠new Vue的時候傳入components選項🧡

全域注冊：靠Vue.component(‘組件名’，組件)

Vue指令

常見指令：

• v-text替換文本不能決議標簽

• v-html替換文本，可以決議標簽，有安全問題，注意XSS跨站攻擊、http-only欄位的cookie除了在http中使用，不能在別的地方使用，所以是安全的

• v-once初次動態渲染后，就視為靜態內容

• v-cloak解決網速慢出現{{xxx}}的問題

  [v-clok]:{display:none;}
  

• v-pre跳過所在節點編譯程序、利用它跳過沒有使用指令語法、插值語法的節點來加快編譯

自定義指令：自定義指令

有的情況下，仍然需要對普通 DOM 元素進行底層操作

// 全域在用的時候注冊一個全域自定義指令 `v-focus`
Vue.directive('focus', {//第二個引數可以簡寫成函式
    // 當被系結的元素插入到 DOM 中時……
    inserted: function (el) {
    // 聚焦元素
    el.focus()
    }
})
//自己用注冊區域指令
directives: {
    focus: {
    // 指令的定義
        inserted: function (el) {
          el.focus()
        }
    }
}

Scoped

作用：區域樣式，防止沖突

App.vue里一般不用scoped

在JS里可以使用require引入樣式

深度選擇器，可改UI組件庫的樣式（不一定生效）

/deep/ 類名{}

ref屬性🧡

也可以子傳父，在下面自定義事件舉例

1. 可以獲取元素的真實DOM、如果放在組件標簽身上，則是組件實體物件（vc）
2. 使用方式

//打標識:
<h1 ref="xxx">
//獲取:
this.$refs.xxx

props屬性（父傳子、也可以子傳父）🧡

子傳父 需要 父組件傳一個函式到子組件 子組件呼叫這個函式并傳參

傳資料<Demo name="xxx">

接收資料：

1. 方式一（只接收）：props:['name']
2. 方式二（限制型別）：props:{name:Number}
3. 方式三（限制型別，限制必要性，指定默認值）：

props:{
    name:{
        type:String,//型別
        required:true,//必要性
        default:'老王'//默認值
    }
}

使用：this.name

備注：props在data前、props是只讀的，如果要修改，就復制一份內容到data中，data中寫name:this.name

mixin混入🧡

功能：可以把多個組件共用的配置提取成一個混入物件

第一步，定義混合，如：

export const xxx = {
	data(){...},
	methods:{...}
}

第二步使用混入，如：

import xxx from xxx
//1. 全域混入
Vue.mixin(xxx)
//區域混入
mixins:['xxx']

插件💛

功能：增強Vue

本質：包含install方法的一個物件，install的第一個引數是Vue，第二個以后的引數是插件使用者傳遞的資料

定義插件：

obj.install = function (Vue,options){
//1. 添加全域過濾器
    Vue.filter(...)
//2. 添加全域指令
    Vue.directive(...)
//3. 配置全域混入
    Vue.mixin(...)
//4. 添加實體方法💚
    Vue.prototype.$myMethod = function(){...}
    Vue.prototype.$myProperty = xxx
}
export default obj;//或者export default{install(Vue){}}

使用插件：Vue.use()

$emit組件自定義事件(子傳父)🧡

📢注意：

在子組件里this.$emit接收

在組件標簽身上寫@click也是自定義事件，只有組件使用this.$emit("click",引數)使用

通過this.$refs.xxx.$on('atguigu',回呼)系結自定義事件時，注意回呼this指向，可以使用箭頭函式

系結時自定義事件：

1. <Demo @atguigu="test"/>

2. <Demo ref="demo"/>
   ...
   mounted(){
       this.$refs.xxx.$on('atguigu',this.test)
   }
   

3. 若想讓自定義事件只觸發一次，可以使用once修飾符號，或$once方法

觸發自定義事件：this.$emit('atguigu',資料)

解綁自定義事件：this.$off('atguigu')，解綁多個可以陣列、或空括號

組件上也可以系結原生DOM事件、使用native修飾符

全域事件總線EventBus(任意組件通信)

$on定義事件、$emit使用事件并傳參、bus就是一個中間人

1. 定義全域事件總線：

   //方式一
   new Vue({
   	...
       beforeCreate(){
       	Vue.prototype.$bus = this//安裝全域事件總線
       }
       ...
   })
   //方式二、新建一個bus.js檔案
   import Vue from 'vue';
   const bus = new Vue();
   export default bus;
   //然后在mian.js中
   import bus from './bus'
   Vue.prototype.$bus = bus;
   

2. 使用：

   接收資料$on：A組件想接收資料，則在A組件中給$bus系結自定義事件，事件的回呼留在A組件自身

   methods(){
   	demo(data){...}
   }
   mounted(){
   	this.$bus.$on('xxxx',this.demo)//注意這個方法的this，注意this.demo后面不要括號
   }
   

   提供資料$emit

   this.$bus.$emit('xxx',資料)
   

   📣注意：最好在beforeDestroy鉤子中，用$off去解綁當前組件所用到的事件

小知識點

template標簽和v-if搭配、嵌在外層渲染到頁面的時候不會渲染多余標簽

v-for in 和v-for of都可以用于遍歷

插值語法如果是{{undefined}}、則不Vue不渲染

收集表單資料系結一個:value值和v-modal

一個組件實體物件就是一個Vuecomponent和vm基本相同

main.js比app.vue先執行

拆分組件的原則：一個功能一個組件、this.$destroy()銷毀組件

key值使用nanoid三步：npm i nanoid、import nanoid from ‘nanoid’、nanoid()

把一些方法掛載到Vue建構式的prototype上，組件里通過this就可以使用（Vue.prototype）

使用場景

1. 組件用相同配置時候，使用區域混入mixins:['xxx']
2. computed能完成的就不用watch
3. 過濾器，過濾文本使用區域filters
4. DOM底層操作使用ref和directive、ref拿節點、directive實作進入頁面聚焦輸入框
5. 常用的只有兩個生命周期，mounted發請求，拿資料等、beforeDestroy清除訂閱，清除定時器等