vue.js學習和實戰筆記

vue.js記錄

文章已同步個人github筆記 https://github.com/ymblog/blog，歡迎你們加star~~，加star後人生更加美好……

vue實例

生命週期

beforeCreate：不能訪問this.$el和this.$data用於初始化非響應式變量
created：能夠訪問this.$data，不能訪問到this.$el屬性，this.$refs內容，用於ajax請求，created裏賦值，data不用定義
beforeMount：this.$el和this.$data都初始化了，掛載前this.$el的值爲'虛擬'的元素節點，比較少使用
mounted：'虛擬'的Dom節點被真實的Dom節點替換，用於獲取VNode信息和操做，this.$refs能夠訪問
beforeupdate：響應式數據更新時調用，發生在虛擬DOM打補丁以前
updated：虛擬 DOM 從新渲染和打補丁以後調用，組件DOM已經更新，data數據變化時只會觸發update
beforeDestroy：實例銷燬以前調用。這一步，實例仍然徹底可用，this仍能獲取到實例，用於銷燬定時器、解綁全局事件、銷燬插件對象等操做
destroyed：實例銷燬後調用，調用後，Vue 實例指示的全部東西都會解綁定，全部的事件監聽器會被移除，全部的子實例也會被銷燬

指令

指令帶有 v- 前綴的特殊屬性

v-html

解釋：更新DOM對象的textContent,爲了輸出真正的 HTML
還有v-on、v-bind、v-model、v-for、v-if、v-else、v-else-if不展開說明
注意:v-if 與 v-for 一塊兒使用時，v-for 具備比 v-if 更高的優先級
v-if和v-show的區別：v-show適合很是頻繁地切換

修飾符

事件修飾符:

.stop 阻止冒泡，調用 event.stopPropagation()
.prevent 阻止默認行爲，調用 event.preventDefault()
.once事件只觸發一次

按鍵修飾符:
@keyup.enter……
表單修飾符:
.lazy、.number、.trim

key

推薦：使用 v-for 的時候提供 key 屬性，以得到性能提高
說明：使用 key，VUE會基於 key 的變化從新排列元素順序，而且會移除 key 不存在的元素,vue會複用已有元素，使用兩個input切換會共用，須要使用key讓其獨立
相同類型的元素之間切換，須要加入key防止出現問題

Class 與 Style 綁定

表達式的類型：字符串、數組、對象（重點）

//1
<div v-bind:class="{ 'active': true }"></div> ===> 解析後
<div class="active"></div>
//2
<div v-bind:class="[{ 'active': true }, 'errorClass']"></div> ===>解析後
<div class="active errorClass"></div>

組件

規範：定義組件名和組件文件名使用camelCase (駝峯命名法)，通用組件能夠加上base，父組件標籤使用kebab-case命名

props

規範：要定義類型要詳細，命名使用camelCase (駝峯命名法)

實戰注意點:若是設置默認值，不進行自定義傳參，須要直接定義爲:default: () => {return xxx},不然會報錯，緣由：props default 數組／對象的默認值應當由一個工廠函數返回

//使用prop來傳值:
//子組件html
<template>
    <header class="ly-header">
        <span>{{title}}</span>
    </header>
</template>
//js
props:['content','value']
進行驗證，type類型有：Number、String、Boolean、Array、Object
propA: {
     type: Number,
     default: 100
 }
//父組件html
<header :title="我是標題">

注意:父級組件<comp some-prop="1"></comp>1爲字符串，使用:some-prop="1"，1爲數字

經過事件向父級組件發送消息

推薦始終使用 kebab-case 的事件名
$emit方法並傳入事件的名字，來向父級組件觸發一個事件

//子級
<template>
    <div class="header" @click="$emit('say-event')">點擊我</div>
</template>
//父級
<template>
    <Header :content="content" @say-event="sayHanle"></Header>
</template>
<script>
    import Header from '@/components/header';
    export default{
    methods:{
            sayHanle(){
                console.log(222);
            }
        }
    }
</script>

動態組件-is

//currentTabComponent改變，組件也隨之改變
<component v-bind:is="currentTabComponent"></component>

插槽-slot

說明：vue2.6,父組件使用插槽的v-bind可以訪問子組件中的數據
注意：v-slot只能添加在一個<template> 上

//子級定義
<template>
    <div class="header">
        <slot name="header" v-bind:user="user"></slot>
    </div>
</template>
//父級
<Header>
    <template v-slot:header="data">
        <p>{{data.user.name}}</p>
    </template>
</Header>

keep-alive

主要用於保留組件狀態或避免從新渲染,include(只有名稱匹配的組件會被緩存),exclude(任何名稱匹配的組件都不會被緩存)
:max="10"(最多能夠緩存多少組件實例)
相對應的周期函數爲:activated(keep-alive 組件激活時調用),deactivated(組件停用時調用)

更便利的方式爲:路由設置元信息keepAlive: true，進行設置
<keep-alive v-if="$route.meta.keepAlive">
      <router-view></router-view>
</keep-alive>
<router-view v-else></router-view>

自定義指令

做用：進行DOM操做

//全局定義
Vue.directive('focus', {
    inserted: function (el) {
        el.focus()
    }
}

鉤子函數
bind：指令第一次綁定到元素時調用
inserted：被綁定元素插入父節點時調用
unbind：只調用一次，指令與元素解綁時調用

鉤子函數參數
el:指令所綁定的元素
第二個參數的binding的value爲指令的綁定值，值能夠是對象的字面量

過濾器

做用：文本數據格式化

//全局過濾器
<div>{{ dateStr | date }}</div>
<div>{{ dateStr | date('YYYY-MM-DD hh:mm:ss') }}</div>

<script>
Vue.filter('date', function(value, format) {
    // value 要過濾的字符串內容，好比：dateStr
    // format 過濾器的參數，好比：'YYYY-MM-DD hh:mm:ss'
})
</script>
//局部過濾器
filters: {
    filterName: function(value, format) {}
}

監視數據變化-watch

做用：當表達式的值發生變化後，會調用對應的回調函數完成響應的監視操做

watch:{
    info:function(val,oldVal){
         console.log('當前值爲：' + val, '舊值爲：' + oldVal)
    }
}

選項包括有三個
第一個是handler：其值是一個回調函數，即監聽到變化時應該執行的函數。
第二個是deep：其值是true或false，確認是否深刻監聽。（通常監聽時是不能監聽到對象屬性值的變化的，數組的值變化能夠聽到）
第三個是immediate：其值是true或false，確認是否以當前的初始值執行handler的函數。

混合(mixin)

定義：mixins:[mixin]
來分發 Vue 組件中的可複用功能

結束，撒花~~~

文章已同步個人github筆記 https://github.com/ymblog/blog，歡迎你們加star~~，加star後人生更加美好……