vue.js學習記錄

文章已同步我的github筆記https://github.com/ymblog/blog，歡迎大家加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

指令

指令帶有 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 更高的優先級

修飾符

事件修飾符:

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

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

key

推薦：使用 v-for 的時候提供 key 屬性，以獲得性能提升
說明：使用 key，VUE會基於 key 的變化重新排列元素順序，並且會移除 key 不存在的元素,vue會復用已有元素，使用兩個input切換會共用，需要使用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 text-danger"></div>

組件

prop

定義組件名kebab-case或者PascalCase(自己使用)

//使用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

說明：通過<slot></slot> 標簽指定內容展示區域

//子級定義
<template>
    <div class="header">
        <slot name="title"></slot>
        <slot name="desc"></slot>
    </div>
</template>
//父級
<Header>
    <p slot="desc" class="desc">我的描述</p>
</Header>

自定義指令

作用：進行DOM操作

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

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

過濾器

作用：文本數據格式化

//全局過濾器
<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的函數。

結束，撒花~~~

文章已同步我的github筆記https://github.com/ymblog/blog，歡迎大家加star~~

來源：https://segmentfault.com/a/1190000016551191

vue.js學習記錄