主頁 > 企業開發 > vue核心

vue核心

2023-05-15 07:46:05 企業開發

VUE簡介

  • vue--一套用于構建用戶界面的漸進式JavaScript框架

vue特點

  • 采用組件化模式--提高代碼復用率--讓代碼更好維護
  • 宣告式編程--讓編碼人員無需直接操作DOM--提高開發效率

vue安裝

vue2網址--https://v2.cn.vuejs.org/v2/guide/installation.html

下載開發版本

安裝之后--在vscode中引入vue

在瀏覽器內下載vue插件

使用vue2

準備一個容器

<!-- 準備一個容器 -->
    <div id="root">
        <h1>Hello</h1>
    </div>

創建一個vue實體--傳入一個配置物件

<script>
    //創建vue實體
    const x = new Vue({
        el:'#root',  //el用于指定當前vue實體為哪個容器服務--值通常為css選擇器字串
        data:{  //data中用于存盤資料--資料供el所指定的容器去使用--值暫且先寫成一個物件
            name:'liu'
        }
    });
</script>

root容器里的代碼依然符合html規范--只是寫入了一些特殊的vue語法

<div id="root">
        <!-- {{name}}--vue的插值語法 -->
        <h1>Hello {{name}}</h1>
    </div>

root容器里的代碼被稱為--vue模板

vue實體和容器是一一對應的

真實開發中只有一個vue實體--并且會配合組件一起使用

{{ }}--里面內容寫js運算式--且可以自動讀取到data中的所有屬性

一旦data中資料發生變化--頁面中用到該資料的地方也會自動更新

模板語法

插值語法--{{ }}

  • 用于決議標簽體的內容
  • 寫法--{{ }}--里面內容寫js運算式--且可以自動讀取到data中的所有屬性
<body>
    <div id="root">
        <h1>插值語法</h1>
        <hr>
        <p>你好，{{name}}</p>
    </div>
</body>
<script>
    new Vue({
        el: '#root',
        data: {
            name: 'hello'
        }
    })
</script>

指令語法-- v-???

  • 用于決議標簽--包括標簽屬性、標簽體內容、系結事件
  • vue有很多指令--形式都是 v-???
<body>
    <div id="root">
        <h1>指令語法</h1>
        <!-- v-bind: --指令語法--系結屬性 -->
        <a v-bind:href="https://www.cnblogs.com/Liu-h/archive/2023/05/14/url">百度1</a>
        <!-- v-bind: 的簡寫形式 : -->
        <a :href="https://www.cnblogs.com/Liu-h/archive/2023/05/14/url">百度2</a>
    </div>

</body>
<script>
    new Vue({
        el: '#root',
        data: {
            url: 'https://www.baidu.com'
        }
    })
</script>

為避免命名沖突--可寫多級結構

<body>
    <div id="root">
        <h1>插值語法</h1>
        <p>你好，{{name}}</p>
        <hr>
        <h1>指令語法</h1>
        <!-- v-bind: --指令語法--系結屬性 -->
        <a v-bind:href="https://www.cnblogs.com/Liu-h/archive/2023/05/14/school.url">{{school.name}}1</a>
        <!-- v-bind: 的簡寫形式 : -->
        <a :href="https://www.cnblogs.com/Liu-h/archive/2023/05/14/school.url">{{school.name}}2</a>
    </div>

</body>
<script>
    new Vue({
        el: '#root',
        data: {
            name: 'hello',
            //多級結構
            school: {
                name: '百度',
                url: 'https://www.baidu.com'
            }
        }
    })
</script>

資料系結

單向系結

v-band: --資料只能從data流向頁面

<body>
    <div id="root">
        單向資料系結:<input type="text" v-bind:value="https://www.cnblogs.com/Liu-h/archive/2023/05/14/name">
            //簡寫形式
        單向資料系結:<input type="text" :value="https://www.cnblogs.com/Liu-h/archive/2023/05/14/name">
    </div>
</body>
<script>
    new Vue({
        el: '#root',
        data: {
            name: 'single'
        }
    })
</script>

雙向系結

v-model:value --資料可以從data流向頁面，也能從頁面流向data

雙向系結一般應用在表單類元素上

可以簡寫為--v-model--因為v-model默認收集的就是value值

<body>
    <div id="root">
        雙向資料系結:<input type="text" v-model:value="https://www.cnblogs.com/Liu-h/archive/2023/05/14/name">
        //簡寫
        雙向資料系結:<input type="text" v-model="name">
    </div>
</body>
<script>
    new Vue({
        el: '#root',
        data: {
            name: 'single'
        }
    })
</script>

data與el的兩種寫法

el的兩種寫法

new Vue時配置el屬性

new Vue({
    //el寫法1
    el: '#root',
    data: {
    	name: 'single'
	}
})

先創建Vue實體--再通過vm.$mount('#root')指定el的值

const v = new Vue({
    data: {
    	name: 'single'
	}
})
//el寫法2
v.$mount('#root')

data兩種寫法

物件式

new Vue({
    el: '#root',
    data寫法1--物件式
    data: {
    	name: 'single'
	}
})

函式式

new Vue({
    el: '#root',
    //data寫法2--函式式--不能寫箭頭函式
    data: function () {
    	return {
        	name: 'single'
    	}
	},
    //簡寫
    data() {
    	return {
        	name: 'single'
    	}
	}
})

MVVM模型

M--模型（Model）--對應data中的資料

V--視圖（View）--模板

VM--視圖模板（ViewModel）--Vue實體物件

View中可以看到所有vue的屬性

data中所有的屬性--最后都出現在了vm

vm中所有的屬性及vue原型上的所有屬性--在vue模板中都可以直接使用

資料代理

Object.defineproperty方法

通過該方法添加的屬性--不能列舉、不能被修改也不能被洗掉

let person = {
    name: 'lhd',
    age: 18
}
Object.defineProperty(person, 'address', {
    value: 'henan'
});
console.log(person);
for (let i in person) {
    console.log(i);
}

通過以下屬性可以實作這些操作

let person = {
    name: 'lhd',
    age: 18
}
Object.defineProperty(person, 'address', {
    value: 'henan',
    enumerable: true,    //控制屬性是否可以列舉--默認值為false
    writable: true,      //控制屬性是否可以被修改--默認值是false
    configurable: true   //控制屬性是否可以被洗掉--默認值是false
});
console.log(person);
for (let i in person) {
    console.log(i);
}

get,set方法

let address = '河南'
    let person = {
        name: 'lhd',
        age: 18,

    }
    Object.defineProperty(person, 'address', {
        //當讀取person的age屬性時--會呼叫get函式--回傳值是age的值
        get() {
            return address;
            //當修改person的age屬性時--會呼叫get函式--會收到修改的具體值
        },
        set(value) {
            address = value;
        }
    });
    console.log(person);

資料代理

資料代理--通過一個物件代理對另一個物件中的屬性的操作

let obj1 = { x: 100 };
let obj2 = { y: 200 };
Object.defineProperty(obj2, 'x', {
    get() {
        return obj1.x;
    },
    set(value) {
        obj1.x = value;
    }
})

vue中的資料代理

  • 通過vm物件來代理data物件中屬性的操作--讀/寫
  • vue中資料代理的好處--更方便的操作data中的資料
  • 基本原理
    • 通過Object.defineProperty( )把data物件中所有屬性添加到vm上
    • 為每個添加到vm上的屬性--都指定一個getter/setter
    • 在getter/setter內部去操作(讀/寫)data中對應的屬性

事件處理

使用v-on:xxx 或@xxx 系結事件-- xxx是事件名

<div id="root">
    <button v-on:click="showInfo1">點擊回應事件1</button>
    <button @click="showInfo2">點擊回應事件2</button>
</div>

事件的回呼需要配置在methods物件中--最侄訓在vm上

const vm = new Vue({
    el: '#root',
    methods: {
        showInfo1() {
            alert('有品');
        },
        showInfo2() {
            alert('蟑螂');
        }
    }
})

methods中配置的函式--不要使用箭頭函式--否則this指向的不是vm

methods: {
    showInfo1() {
        console.log(this);
    },
    showInfo2: () => {
        console.log(this);
    },
}

method中配置的函式--都是被vue所管理的函式--this指向的是vm或組件實體物件

@click = 'demo' 和 @click= 'demo($event)' 效果一致--但后者可以傳參

<body>
    <div id="root">
        <button v-on:click="showInfo1">點擊回應事件1</button>
        <button @click="showInfo2($event,'張郎')">點擊回應事件2</button>
    </div>
</body>
<script>
    const vm = new Vue({
        el: '#root',
        methods: {
            showInfo1() {
                alert('有品');
            },
            showInfo2(event, string) {
                console.log(event, string);
                alert('蟑螂');
            },
        }
    });

事件修飾符

pervent--阻止默認事件

<body>
    <div id="root">
        <a href="https://www.baidu.com" @click.prevent="showInfo">點擊提示資訊</a>
    </div>
</body>
<script>
    new Vue({
        el: '#root',
        methods: {
            showInfo() {
                alert('今天周五啦！');
            }
        }
    })
</script>

stop--阻止事件冒泡

<body>
    <div id="root">
        <div  @click="showInfo2">
            <button @click.stop="showInfo2">點擊提示資訊</button>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: '#root',
        methods: {
            showInfo2() {
                alert('明天就周六啦！');
            }
        }
    })

once--事件只觸發一次

<body>
    <div id="root">
        <button @click.once="showInfo2">點擊提示資訊</button>
    </div>
</body>
<script>
    new Vue({
        el: '#root',
        methods: {
            showInfo2() {
                alert('明天就周六啦！');
            }
        }
    })

capture--使用事件的捕獲模式

<body>
    <div id="root">
        <div  @click.capture="showInfo3(1)">
            <button @click="showInfo3(2)">點擊提示資訊</button>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: '#root',
        methods: {
            showInfo3(number) {
                console.log(number);
            }
        }
    })

self--只有event.target是當前操作的元素時才觸發

<body>
    <div id="root">
        <div  @click.self="showInfo4">
            <button @click="showInfo4">點擊提示資訊</button>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: '#root',
        methods: {
            showInfo4(e) {
                console.log(e.target);
            }
        }
    })

passive--事件的默認行為立即執行--無需等待事件回呼執行完畢

<body>
    <div id="root">
        <!-- scroll-滾動條滾動 -->
        <!-- wheel-滑鼠的滾輪滾動 -->
        <ul @wheel.passive="showInfo5">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
</body>
<script>
    new Vue({
        el: '#root',
        methods: {
            showInfo5() {
                for (let i = 0; i < 100000; i++) {
                    console.log('#');
                }
                console.log('累死了');
            }
        }
    })

事件修飾符可以連用-- @click.prevent.stop="showInfo"--先阻止默認事件再阻止冒泡

鍵盤事件

  • 常用按鍵別名
    • 回車--> enter 洗掉-->delete(捕獲'洗掉'和'退格'鍵) 退出-->esc 空格-->space
    • 換行-->tab 上-->up 下-->down 左-->left 右-->right
  • vue未提供別名的按鍵--可以使用按鍵原始的key值去系結--但注意要轉為kebak-case(短橫線命名)
  • 系統修飾按鍵(特殊用法)--ctrl、alt、shift、meta(win鍵)
    • 配合keyup使用--按下修飾鍵的同時--再按下其他鍵--隨后釋放其他鍵--事件才被觸發
    • 配合keydown使用--正常觸發事件
  • 可以使用keyCode去指定具體的按鍵--不推薦
  • Vue.config.keyCodes.自定義鍵名 = 鍵碼 -- 可以去制定按鍵別名

計算屬性

  • 定義--要使用的屬性不存在--需通過已有屬性計算的來
//computed--計算屬性
computed: {
    fullName: {
        /*
        get何時呼叫
            初次讀取fullname時
            所依賴的資料發生變化時
        vue將get的this指向了vm
        */
        get() {
            return this.firstName + '-' + this.lastName;
        },
        // set何時呼叫--fullname的值被修改時
        set(value) {
            const arr = value.split('-');
            firstName = arr[0];
            lastName = arr[1];
        }
    }
}
  • 原理--借助了Object.defineproperty方法提供的getter和setter
  • get函式何時執行
    • 初次讀取時會執行一次
    • 當依賴的資料發生改變時會被再次呼叫
  • 優勢--與methods相比--內部有快取機制--效率更高，除錯方便
  • 計算屬性最侄訓出現在vm上--直接讀取使用即可
  • 若計算屬性要被修改--必須寫set函式的回應修改--且set中要引起計算時所依賴的資料發生變化

監視屬性

new Vue({
    el: '#root',
    data: {
        isHot: true
    },
    computed: {
        info() {
            return this.isHot ? '炎熱' : '涼爽';
        }
    },
    methods: {
        changeWeather() {
            this.isHot = !this.isHot;
        }
    },
    watch: {
        isHot: {
            //在isHot發生變化時--handler呼叫
            handler(newValue, oldValue) {
                console.log(newValue, oldValue);
            }
        }
    }
});
//監視的另一種方式
vm.$watch('info', {
        handler(newValue, oldValue) {
            console.log(newValue, oldValue);
        }
    })

深度監視

  • vue中的watch默認不監測物件內部值的改變--配置deep:true可以監測物件內部值的改變
  • vue自身可以監測物件內部值的改變--但vue提供的watch默認不可以
  • 使用watch時根據資料的具體結構--決定是否采用深度監視
watch: {
    //深度監視
    number: {
        deep: true,
        handler() {
            console.log('number的值改變了');
        }
    }
}

簡寫形式--只有handler配置項時才可以簡寫

watch: {
   isHot(newValue, oldValue){
		console.log(newValue, oldValue);
        }
}

watch對比computed

  • cpmouted能完成的功能--watch都可以完成
  • watch能完成的功能--computed不一定能完成
  • 所有被vue管理的函式--最好寫成普通函式--這樣this的指向才是vm或組件實體物件
  • 所有不被vue所管理的函式(定時器的回呼函式、ajax的回呼函式)--最好寫成箭頭函式--這樣this的指向才是vm或組件實體物件

系結樣式

系結class樣式

字串寫法--適用于--樣式的類名不確定--需要動態指定

<div id="root"  : @click="changeMood">{{name}}</div>

<script>
    new Vue({
        el: '#root',
        data: {
            name: 'lhd',
            mood: 'normal'
        },
        methods: {
            changeMood() {
                const arr = ['happy', 'sad', 'nomal'];
                this.mood = arr[Math.floor(Math.random() * 3)];

            }
        },
    })
</script>

陣列寫法--適用于--要系結的樣式個數不確定、名字也不確定

<div  :>{{name}}</div>
data: {
    name: 'lhd',
    arr: ['l1', 'l2', 'l3'],
},

物件寫法--適用于--要系結的樣式個數確定、名字確定、但動態決定是否使用

<div  :>{{name}}</div>
data: {
    name: 'lhd',
    obj: {
        l1: true,
        l2: true
    }
}

系結style樣式

物件寫法

<div  :style="styleObj">{{name}}</div>
data: {
    name: 'lhd',
    styleObj: {
        fontSize: '30px',
        color: 'teal'
    }
},

陣列寫法

<div  :style="styleArr">{{name}}</div>
data: {
    name: 'lhd',
    styleArr: [
        {
            backgroundColor: 'tomato'
        },
        {
            border: '10px solid orange'
        }
    ]
},

條件渲染

v-show

  • 寫法--v-show='運算式'
  • 適用于00切換頻率較高的場景
  • 特點--不展示的DOM元素未被移除--僅僅是樣式隱藏掉
  • 使用v-if時--元素可能無法獲取到--但使用v-show一定可以獲取到
<div id="root">
    <h1 v-show="false">{{name}}</h1>
</div>

new Vue({
    el: '#root',
    data: {
        name: 'vue2東西好多呀！'
    }
})

v-if

  • 寫法
    • v-if='運算式'
    • v-else-if='運算式'
    • v-else='運算式'
  • 適用于--切換頻率較低的場景
  • 特點--不展示的DOM元素直接被移除
  • v-if可以和v-else-if、v-else一起使用--但要求結構不能被打斷
<div id="root">
    <h1 v-show="false">{{name}}</h1>
    <h2>{{n}}</h2>
    <h2 v-if="n === 1">vue</h2>
    <h2 v-else-if="n === 2">react</h2>
    <h2 v-else-if="n === 3">angular</h2>
    <h2 v-else>前端框架</h2>
    <button @click="n++">點擊n+1</button>
</div>

new Vue({
    el: '#root',
    data: {
        name: 'vue2東西好多呀！',
        n: '0'
    },
})

串列渲染

v-for指令

  • 用于展示串列資料
  • 語法--v-for='(item,index) in xxx' :key='yyy'
  • 可遍歷--陣列、物件、字串(用的很少)、指定次數(用的很少)
<body>
    <div id="root">
        <h2>遍歷陣列</h2>
        <ul>
            <li v-for="(p, index) in persons" :key="p.id">
                {{p.name}}-{{p.age}}
            </li>
        </ul>
        <hr>
        <h2>遍歷物件</h2>
        <ul>
            <li v-for="(value,key) of animal" :key="key">
                {{value}}-{{key}}
            </li>
        </ul>
        <hr>
        <h2>遍歷字串</h2>
        <ul>
            <li v-for="(char,index) of str" :key="index">
                {{char}}-{{index}}
            </li>
        </ul>
        <hr>
        <h2>遍歷指定次數</h2>
        <ul>
            <li v-for="(number,index) of 5" :key="index">
                {{number}}-{{index}}
            </li>
        </ul>
    </div>
</body>
<script>
    new Vue({
        el: '#root',
        data: {
            persons: [
                { id: '001', name: '張三', age: 18 },
                { id: '002', name: '李四', age: 19 },
                { id: '003', name: '王五', age: 20 }
            ],
            animal: {
                type: 'cat',
                age: 3,
                color: '漸變金'
            },
            str: 'hello'
        }
    })
</script>

key的作用與原理

串列過濾

vue.set

vue.set(target,key,val)--vue.set(添加屬性的物件名，需添加的屬性，屬性值)

另一種寫法--vm.$set(target,key,val)

vue.set()--物件不能是vue實體或vue實體的根資料物件

<button @click="addSex">點擊添加性別</button>
<h3 v-if="student.sex">性別:{{student.sex}}</h3>

methods: {
    addSex() {
        Vue.set(this.student, 'sex', '女');
    }
},

vue監視資料

  • vue會監視data中所有層次的資料
  • 監測物件中的資料
    • 通過setter實作監視--要在new Vue時就傳入要監測的資料
      • 物件中后追加的屬性--vue默認不做回應式處理
      • 若需要給后添加的屬性做回應式--可使用如下API
        • Vue.set(target,key,val)--vue.set(添加屬性的物件名，需添加的屬性，屬性值)
        • vm.$set(target,key,val)
  • 監測陣列中的資料
    • 通過包裹陣列更新元素的方法實作--本質做了兩件事
      • 呼叫原生對應的方法對陣列進行更新
      • 重新決議模板--進行更新頁面
    • vue修改陣列中的某個元素--使用如下方法
      • 使用API--push()、pop()、unshift()、shift()、splice()、sort()、reverse()
      • Vue.set()或vm.set()
  • 注--Vue.set()和vm.set()不能給vm或vm的根物件添加屬性
<body>
    <div id="root">
        <h2>學生</h2>
//若運算式簡單--可直接使用
        <button @click="student.age++">年齡+1</button>
        <button @click="addSex">添加性別</button>
        <button @click="student.sex = '男'">修改性別</button>
        <button @click="addFriend">在串列首位添加一個朋友</button>
        <button @click="alterName">修改第一個朋友的名字</button>
        <button @click="addHobby">添加一個愛好</button>
        <button @click="alertHobby">修改第一個愛好</button>
        <h3>姓名:{{student.name}}</h3>
        <h3>年齡:{{student.age}}</h3>
        <h3 v-if="student.sex">性別:{{student.sex}}</h3>
        <h3>愛好</h3>
        <ul>
            <li v-for="(h, index) in student.hobby" :key="index">
                {{h}}
            </li>
        </ul>
        <h3>朋友</h3>
        <ul>
            <li v-for="(f,index) in student.friends" :key="index">
                {{f.name}}--{{f.age}}
            </li>
        </ul>

    </div>
</body>
<script>
    new Vue({
        el: '#root',
        data: {
            student: {
                name: 'lhd',
                age: '21',
                hobby: ['看電影', '吃飯', '睡覺'],
                friends: [
                    {
                        name: 'zs',
                        age: 22
                    },
                    {
                        name: 'ls',
                        age: 23
                    }
                ]
            }
        },
        methods: {
            addSex() {
                //通過vue.set()--添加物件
                Vue.set(this.student, 'sex', '女');
            },
            addFriend() {
                //通過unshift--添加陣列物件
                this.student.friends.unshift({ name: 'ww', age: 18 });
            },
            alterName() {
                //陣列物件有setter--可直接修改
                this.student.friends[0].name = 'zl';
            },
            addHobby() {
                //通過push--添加陣列
                this.student.hobby.push('學習');
            },
            alertHobby() {
                //通過splice()--修改陣列
                this.student.hobby.splice(0, 1, '看綜藝');
                // Vue.set(this.student.hobby, 0, '看綜藝');
            }
        },
    })
</script>

內置指令

  • 前面學過

    • v-bind -- 單向系結決議運算式--簡寫為 :xxx
    • v-model -- 雙向資料系結
    • v-for -- 遍歷陣列/物件/字串
    • v-on -- 系結事件監聽--簡寫為@
    • v-if -- 條件渲染 -- 動態控制節點是否存在
    • v-else -- 條件渲染 -- 動態控制節點是否存在
    • v-show -- 條件渲染 -- 動態控制節點是否展示

  • v-text -- 向其所在節點中渲染文本內容 -- 會替換掉節點中的內容

<body>
    <div id="root">
        <h2 v-text="name"></h2>
    </div>
</body>
<script>
    new Vue({
        el: '#root',
        data: {
            name: '你好'
        }
    })
</script>

  • v-html -- 向指定節點渲染包含html結構的內容

    • 會替換掉節點中的所有內容
    • 可以識別html結構
    • 有安全性問題
      • 在網站上動態渲染任意HTML是非常危險的--容易導致xss攻擊
      • 一定在可信的內容上使用v-html--不要在用戶提交的內容上使用

  • v-cloak -- 沒有值

    • 本質是一個特殊的屬性 -- vue實體創建完畢并接管容器后 -- 會刪掉v-cloak屬性
    • 使用css配合v-vloak可以解決網速慢時頁面展現出{{xxx}}的問題
<style>
        [v-cloak] {
            display: none;
        }
</style>
    
<body>
    <div id="root">
        <h2 v-cloak>{{name}}</h2>
    </div>
    <script src="https://www.cnblogs.com/Liu-h/archive/2023/js/vue.js"></script>
</body>
<script>
    new Vue({
        el: '#root',
        data: {
            name: '你好'
        }
    })
</script>
  • v-once -- 所在的位元組在初次動態渲染后，就視為靜態內容 -- 以后資料的改變不會引起v-once所在結構的更新
<body>
    <div id="root">
        <h2 v-once>初始n值:{{n}}</h2>
        <h2>當前n值:{{n}}</h2>
        <button @click="n++">點擊n+1</button>
    </div>
</body>
<script>
    new Vue({
        el: '#root',
        data: {
            n: '1'
        }
    })
</script>

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

<body>
    <div id="root">
        <h2 v-pre>n</h2>
        <h2>當前n值:{{n}}</h2>
        <button @click="n++">點擊n+1</button>
    </div>
</body>
<script>
    new Vue({
        el: '#root',
        data: {
            n: '1'
        }
    })
</script>

自定義指令

定義語法

區域指令

new Vue({
	directives:{指令名：配置物件}
})

new Vue({
	directives:{指令名：回呼函式}
})

全域指令

Vue.directives(指令名，配置物件)

Vue.directives(指令名，回呼函式)

配置物件中常用三個回呼

  • bind--指令與元素成功系結時呼叫
  • inserted--指令所在元素被插入頁面時呼叫
  • update--指令所在模板被重新決議時呼叫

注意

  • 指令定義時--不加v- -- 使用時加v-
  • 指令名若是多個單詞--使用kebab-case命名方法--不能用camelCase命名
<body>
    <div id="root">
        n的值：<h2 v-text="n"></h2>
        n擴大10倍的值：<h2 v-big="n"></h2>
        <button @click="n++">點擊n+1</button>
        <input type="text" v-fbind="n">
    </div>
</body>
<script>
    new Vue({
        el: '#root',
        data: {
            n: '1'
        },
        directives: {
            //big函式何時呼叫--指令與元素成功系結時 --- 指令所在模板被重新決議時
            big(element, binding) {
                element.innerText = binding.value * 10;
            },
            fbind: {
                //指令與元素成功系結時
                bind(element, binding) {
                    element.value = https://www.cnblogs.com/Liu-h/archive/2023/05/14/binding.value;
                },
                //指令所在元素被插入頁面時
                inserted(element, binding) {
                    element.focus();
                },
                //指令所在模板被重新決議時
                update(element, binding) {
                    element.value = binding.value;
                }
            }
        }
    })
</script>

生命周期

  • 稱為--生命周期回呼函式、生命周期函式、生命周期鉤子
  • 是Vue在關鍵時刻幫我們呼叫的一些特殊名稱的函式
  • 生命周期函式的名字不可更改--但函式的具體內容是程式員根據需求撰寫的
  • 生命周期函式中的this指向是vm或組件實體物件
<body>
    <div id="root">
        <h2 :style="{opacity}">{{name}}</h2>
    </div>
</body>
<script>
    const vm = new Vue({
        el: '#root',
        data: {
            name: 'vue學習指南',
            opacity: 1
        },
        //mounted()--vue完成模板的決議并把初始的真實DOM元素放入頁面后（掛載完畢）呼叫mounted
        mounted() {
            setInterval(() => {
                this.opacity -= 0.01;
                if (this.opacity <= 0) {
                    this.opacity = 1;
                }
            }, 16);
        }
    });

</script>

生命周期鉤子

  • beforeCreate -- 資料監測、資料代理創建之前
  • created
  • beforeMount -- 掛載之前 -- 頁面呈現的是未經Vue編譯的DOM結構
  • mounted
  • beforeUpdate -- 頁面更新之前 -- 資料是新的 -- 頁面是舊的
  • updated
  • beforeDestroy -- 銷毀之前 -- vm中所有的data、methods、指令等都處于可用狀態 （但使用完不在頁面中顯示結果）-- 馬上要銷毀
  • destroyed

常用生命周期鉤子

  • mounted -- 發送ajax請求、啟動定時器、系結自定義事件、訂閱訊息等 -- 初始化操作
  • beforeDestroy -- 清除定時器、解綁自定義事件、取消訂閱訊息等 -- 收尾作業

銷毀vue實體

  • 銷毀后借助vue開發者工具看不到任何資訊
  • 銷毀后自定義事件會失效 -- 但原生DOM事件依然有效
  • 一般不會在beforeDestroy操作資料 -- 即使操作資料 -- 也不會再觸發更新流程

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/552438.html

標籤：其他

上一篇：mockjs

下一篇：返回列表

標籤雲
其他(159032) Python(38129) JavaScript(25421) Java(18034) C(15226) 區塊鏈(8265) C＃(7972) AI(7469) 爪哇(7425) MySQL(7184) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5871) 数组(5741) R(5409) Linux(5340) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4572) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2433) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) .NET技术(1972) 功能(1967) Web開發(1951) HtmlCss(1936) python-3.x(1918) C++(1915) 弹簧靴(1913) xml(1889) PostgreSQL(1876) .NETCore(1860) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • IEEE1588PTP在數字化變電站時鐘同步方面的應用

    IEEE1588ptp在數字化變電站時鐘同步方面的應用 京準電子科技官微——ahjzsz 一、電力系統時間同步基本概況 隨著對IEC 61850標準研究的不斷深入，國內外學者提出基于IEC61850通信標準體系建設數字化變電站的發展思路。數字化變電站與常規變電站的顯著區別在于程序層傳統的電流/電壓互 ......

    uj5u.com 2020-09-10 03:51:52 more
  • HTTP request smuggling CL.TE

    CL.TE 簡介 前端通過Content-Length處理請求，通過反向代理或者負載均衡將請求轉發到后端，后端Transfer-Encoding優先級較高，以TE處理請求造成安全問題。 檢測 發送如下資料包 POST / HTTP/1.1 Host: ac391f7e1e9af821806e890 ......

    uj5u.com 2020-09-10 03:52:11 more
  • 網路滲透資料大全單——漏洞庫篇

    網路滲透資料大全單——漏洞庫篇漏洞庫 NVD ——美國國家漏洞庫 →http://nvd.nist.gov/。 CERT ——美國國家應急回應中心 →https://www.us-cert.gov/ OSVDB ——開源漏洞庫 →http://osvdb.org Bugtraq ——賽門鐵克 →ht ......

    uj5u.com 2020-09-10 03:52:15 more
  • 京準講述NTP時鐘服務器應用及原理

    京準講述NTP時鐘服務器應用及原理京準講述NTP時鐘服務器應用及原理 安徽京準電子科技官微——ahjzsz 北斗授時原理 授時是指接識訓通過某種方式獲得本地時間與北斗標準時間的鐘差，然后調整本地時鐘使時差控制在一定的精度范圍內。 衛星導航系統通常由三部分組成：導航授時衛星、地面檢測校正維護系統和用戶 ......

    uj5u.com 2020-09-10 03:52:25 more
  • 利用北斗衛星系統設計NTP網路時間服務器

    利用北斗衛星系統設計NTP網路時間服務器 利用北斗衛星系統設計NTP網路時間服務器 安徽京準電子科技官微——ahjzsz 概述 NTP網路時間服務器是一款支持NTP和SNTP網路時間同步協議，高精度、大容量、高品質的高科技時鐘產品。 NTP網路時間服務器設備采用冗余架構設計，高精度時鐘直接來源于北斗 ......

    uj5u.com 2020-09-10 03:52:35 more
  • 詳細解讀電力系統各種對時方式

    詳細解讀電力系統各種對時方式 詳細解讀電力系統各種對時方式 安徽京準電子科技官微——ahjzsz，更多資料請添加VX 衛星同步時鐘是我京準公司開發研制的應用衛星授時時技術的標準時間顯示和發送的裝置，該裝置以M國全球定位系統（GLOBAL POSITIONING SYSTEM,縮寫為GPS）或者我國北 ......

    uj5u.com 2020-09-10 03:52:45 more
  • 如何保證外包團隊接入企業內網安全

    不管企業規模的大小，只要企業想省錢，那么企業的某些服務就一定會采用外包的形式，然而看似美好又經濟的策略，其實也有不好的一面。下面我通過安全的角度來聊聊使用外包團的安全隱患問題。 先看看什么服務會使用外包的，最常見的就是話務/客服這種需要大量重復性、無技術性的服務，或者是一些銷售外包、特殊的職能外包等 ......

    uj5u.com 2020-09-10 03:52:57 more
  • PHP漏洞之【整型數字型SQL注入】

    0x01 什么是SQL注入 SQL是一種注入攻擊，通過前端帶入后端資料庫進行惡意的SQL陳述句查詢。 0x02 SQL整型注入原理 SQL注入一般發生在動態網站URL地址里，當然也會發生在其它地發，如登錄框等等也會存在注入，只要是和資料庫打交道的地方都有可能存在。 如這里http://192.168. ......

    uj5u.com 2020-09-10 03:55:40 more
  • [GXYCTF2019]禁止套娃

    git泄露獲取原始碼 使用GET傳參，引數為exp 經過三層過濾執行 第一層過濾偽協議，第二層過濾帶引數的函式，第三層過濾一些函式 preg_replace('/[a-z,_]+\((?R)?\)/', NULL, $_GET['exp'] (?R)參考當前正則運算式，相當于匹配函式里的引數 因此傳遞 ......

    uj5u.com 2020-09-10 03:56:07 more
  • 等保2.0實施流程

    流程 結論 ......

    uj5u.com 2020-09-10 03:56:16 more
最新发布
  • vue核心

    VUE簡介 vue--一套用于構建用戶界面的漸進式JavaScript框架 vue特點 采用組件化模式--提高代碼復用率--讓代碼更好維護 宣告式編程--讓編碼人員無需直接操作DOM--提高開發效率 vue安裝 vue2網址--https://v2.cn.vuejs.org/v2/guide/ins ......

    uj5u.com 2023-05-15 07:46:05 more
  • mockjs

    開始 mock一個用于攔截ajax請求，并回傳模擬資料的庫。主要讓前端獨立于后端進行開發，通過 pnpm add mockjs 來進行安裝 基礎 初窺門徑 var data = https://www.cnblogs.com/ProCheng/archive/2023/05/13/Mock.mock({ // 屬性 list 的值是一個陣列，其中含有 1 到 10 個元素 'list|1-10': [ ......

    uj5u.com 2023-05-14 08:25:23 more
  • mockjs

    開始 mock一個用于攔截ajax請求，并回傳模擬資料的庫。主要讓前端獨立于后端進行開發，通過 pnpm add mockjs 來進行安裝 基礎 初窺門徑 var data = https://www.cnblogs.com/ProCheng/p/Mock.mock({ // 屬性 list 的值是一個陣列，其中含有 1 到 10 個元素 'list|1-10': [ ......

    uj5u.com 2023-05-14 08:25:10 more
  • 記錄--9個封裝Vue組件的小技巧

    這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 組件是前端框架的基本構建塊。把它們設計得更好會使我們的應用程式更容易改變和理解。在這節課中，分享一下在過去幾年中作業中學到的 9 個技巧。 1. 你可能不需要創建一個組件 在創建一個組件之前，看看它是為了可重用性和為某些UI添加一個狀態， ......

    uj5u.com 2023-05-13 08:50:11 more
  • 關于前端vue打包專案以及靜態網站部署專案到阿里云ECS云服務器初

    準備作業： 1.首先進入https://ecs.console.aliyun.com/ 領取或者購買一臺簡單的ECS云服務器。 進入網站注冊登錄后拉到頁面最下面或者頂部搜索免費云服務器領取立即試用 ,當然富哥花錢買一臺服務器也行。 創建完了以后可以進入云服務ECS作業臺，然后就是以下界面 點擊右邊的 ......

    uj5u.com 2023-05-13 08:49:54 more
  • 一文讓你搞懂javascript如何實作繼承

    一、本文想給你聊的東西包含一下幾個方面：（僅限于es6之前的語法哈，因為es6里面class這關鍵字用上了。。） 1.原型是啥？原型鏈是啥？ 2.繼承的通用概念。 3.Javascript實作繼承的方式有哪些？ 二、原型是啥？原型鏈是啥？ 1.原型是函式本身的prototype屬性。 首先js和ja ......

    uj5u.com 2023-05-12 09:33:07 more
  • web游覽器的標簽頁仿 ios mac 蘋果的墓碑機制 (js代碼)

    背景： 本來專案開發系統防掛機功能，在其余游覽器中均可以使用。但是呢在蘋果的safair游覽器中會出現幾率失效，最后經過排查發現是蘋果的墓碑機制導致。即：此標簽頁活躍，其他標簽頁假死。然后就導致防掛機失效了。 原理： 假如當前游覽器中有3個標簽頁分別是A,B,C，每個標簽頁都有倒計時。正常情況下，每 ......

    uj5u.com 2023-05-12 09:33:01 more
  • 記錄--Vue3+TS(uniapp)手擼一個聊天頁面

    這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 Vue3+TS(uniapp)手擼一個聊天頁面 前言 最近在自己的小程式中做了一個智能客服，API使用的是云廠商的API，然后聊天頁面...嗯，找了一下關于UniApp(vite/ts)版本的好像不多，有一個官方的但其中的其他代碼太多了， ......

    uj5u.com 2023-05-12 09:32:47 more
  • JavaScript全決議——this指向

    本系列內容為JS全決議，為千鋒教育資深前端老師獨家創作 致力于為大家講解清晰JavaScript相關知識點，含有豐富的代碼案例及講解。如果感覺對大家有幫助的話，可以【點個關注】持續追更~ this指向（掌握） this 是一個關鍵字，是一個使用在作用域內的關鍵字 作用域分為全域作用域和區域作用域（私 ......

    uj5u.com 2023-05-12 09:32:37 more
  • 深淺拷貝，溫故知新

    1、深拷貝 1.1、概念 物件的深拷貝是指其屬性與其拷貝的源物件的屬性不共享相同的參考（指向相同的底層值）的副本。 因此，當你更改源或副本時，可以確保不會導致其他物件也發生更改；也就是說，你不會無意中對源或副本造成意料之外的更改。 在深拷貝中，源和副本是完全獨立的。深拷貝與其源物件不共享參考，所以對 ......

    uj5u.com 2023-05-12 09:32:33 more

Copyright © 2010-2020 有解無憂