Vue 事件處理事件修飾符表單處理表單修飾符雙向綁定生命週期鈎子函數詳情 - 數據,事件處理,修飾符,Html,CSS,前端開發 wx638422bd63072 博客

1-事件處理

1.1-事件綁定

通過v-on:事件名稱="事件處理函數"綁定事件

<button v-on:事件名稱="事件處理函數">按鈕</button>

1.2-事件傳參

通過事件處理函數後的()傳遞參數即可

<button v-on:事件名稱="事件處理函數(參數)">按鈕</button>

1.3-事件對象

無需給事件處理函數傳遞額外參數

系統會自動注入事件對象, 直接在事件處理函數定義的位置通過形參接受即可

const vm=new Vue({
     el:'#app',
     data:{

     },
     methods:{
         // 鍵盤事件處理函數, e是系統自動注入的事件對象
         checkUser(e){
             console.log(e.target.value);
         }
     }
 });

需要給事件處理函數傳遞額外參數

$event是一個系統變量, 代表事件對象

<input type="text" placeholder="請輸入用户名" @keyup="checkUser($event,'hello')"/>
<script>
 const vm=new Vue({
        el:'#app',
        data:{
            // 錯誤提示信息
            tips:''
        },
        methods:{
            // 鍵盤事件處理函數, e是系統自動注入的事件對象
            checkUser(e,msg){
                // 系統已經存在的用户名
                const users=['admin','jack','tom','rose'];
                const username=e.target.value.trim();
                if(username===''){
                    return  this.tips='請輸入用户名';
                }
                if(users.indexOf(username)===-1){
                    // 更新tips: 用户名可以
                    return this.tips='恭喜你, 用户名可用';
                }
                this.tips='用户名不可用';
            }
        }
    });
</script>

1.4-事件修飾符

作用: 限制事件觸發的條件
語法

@事件名稱.事件修飾符="事件處理函數"

1.4.1-stop

作用: 阻止事件冒泡

<div id="app">
    <div class="wrap" @click="wrapClick">
        <!-- 使用事件修飾符stop, 阻止事件冒泡 -->
        <div class="box" @click.stop="boxClick"></div>
    </div>
</div>

1.4.2-prevent

作用: 阻止默認行為

<a href="http://baidu.com" @click.prevent="handle">a標籤</a>

1.4.3-once

作用: 限定事件只執行一次

<!--使用事件修飾符once, 限制事件只執行一次-->
<button @click.once="handle">按鈕</button>

1.4.4-self

作用: 限定事件只能被自己觸發(不能被冒泡行為觸發)

<!-- self是限定事件只能由元素自己觸發, 不能被冒泡行為觸發 -->
<div class="wrap" @click.self="wrapClick">
    <div class="box" @click="boxClick"></div>
</div>

1.4.5-capture

作用: 修改事件觸發的順序(事件觸發順序變成由外向內)

<div class="wrap" @click.capture="wrapClick">
     <div class="box" @click="boxClick"></div>
</div>

1.5-按鍵修飾符

作用: 修飾鍵盤事件, 限制鍵盤事件的觸發時機
語法

@事件名稱.按鍵修飾符="事件處理函數"

系統內置的按鍵修飾符

.enter
.tab
.delete (捕獲“刪除”和“退格”鍵)
.esc
.space
.up
.down
.left
.right

2-表單處理

2.1-v-model指令

作用: 實現雙向數據綁定(數據層<=>視圖層)
注意: v-model指令只能在表單元素上使用

Vue 事件處理事件修飾符表單處理表單修飾符雙向綁定生命週期鈎子函數_數據

<div id="app">
    <!-- v-model: 可以將用户的輸入自動同步到數據層 -->
    <h1>{{keywords}}</h1>
    <hr>
    <input type="text" placeholder="請輸入搜索關鍵詞" v-model="keywords">
    <button @click="search">搜索</button>
</div>
<script>

    const vm = new Vue({
        el: '#app',
        data: {
            keywords:''
        },
        methods: {
            search(){
                console.log(this.keywords);
            }
        }
    });
</script>

2.2-常見表單元素雙向數據綁定

<div id="app">
    <!-- v-model: 可以將用户的輸入自動同步到數據層 -->
    <div>
        <input type="text"  v-model="user.name" placeholder="姓名">
    </div>
    <div>
        <input type="radio" value="男" v-model="user.sex">男
        <input type="radio" value="女" v-model="user.sex">女
    </div>
    <div>
        <input type="checkbox" value="學習" v-model="user.hobby">學習
        <input type="checkbox" value="讀書" v-model="user.hobby">讀書
        <input type="checkbox" value="彈鋼琴" v-model="user.hobby">彈鋼琴
    </div>
    <div>
        <!-- multiple:實現多選 -->
        <select  v-model="user.language" multiple>
            <option value="vue">vue</option>
            <option value="react">react</option>
            <option value="angular">angular</option>
        </select>
    </div>
    <div>
        <textarea  v-model="user.introduce" cols="30" rows="2" placeholder="個人簡介"></textarea>
    </div>
    <div>
        <button @click="submit">立即提交</button>
    </div>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            user:{
                name:'',
                hobby:[],
                sex:'',
                language:[],
                introduce:''
            }
        },
        methods: {
            submit(){
                // 獲取用户輸入
                console.log(this.user);
            }
        }
    });
</script>

2.2-表單修飾符

2.2.1-書寫位置

一般是個v-model指令結合起來使用

2.2.2-語法規範

v-model.表單修飾符="數據對象"

trim

作用: 自動去除用户輸入內容的首位空格

number

作用: 將用户輸入內容自動轉換成數值類型, 對於無法轉換成數值的內容, 不會處理

lazy

作用: 延遲數據同步, 當失去焦點的時候, 再將數據同步到數據層(v-model默認會實時同步數據)

3-vm.$set

vm.$set(操作的數組或者對象,數組下標或者對象屬性名,值): vm代表vue實例對象

通過數組下標操作(新增/更新)數組元素, 不會觸發視圖的刷新;

通過賦值的方式給對象動態添加屬性, 不會觸發視圖的更新;

使用$set方法添加的數組元素或對象屬性可以觸發視圖的更新;

3.1-作用

通過下標添加或者修改數組元素(傳統賦值方式無法觸發視圖更新)
給對象動態添加元素(傳統賦值方式無法觸發視圖更新)

3.2-別名

Vue.set(操作的數組或者對象,數組下標或者對象屬性名,值);

4-vue核心原理

4.1-雙向數據綁定(數據劫持)

通過Object.defineProperty(所屬的對象,屬性名,{get(){},set(){}})定義的數據的讀取和賦值, 都可以被監聽到

<body>
    <h1>Object.defineProperty()實現數據劫持</h1>
    <hr>
    <h1 id="h1"></h1>
</body>
<script>
    // Object.defineProperty(所屬的對象,屬性名,{get(){},set(){}})定義數據的另外一種方式
    // 定義了一個全局變量msg
    Object.defineProperty(window,'msg',{
        get(){
            //get訪問器: 當讀取數據msg的時候, 會被觸發
            console.log('get');
            // 需要在此處指定變量的值
            return 'msg的初始值';
        },
        // value是一個系統自動注入的參數, 代表的是msg最新的賦值
        set(value){
            // set訪問器: 當對數據msg進行二次賦值的時候, 會被觸發
            // 應用場景: 通過視圖更新(vue底層會在此處觸發模板的重新編譯)
            console.log('set',value);
            // 通知視圖更新
            document.querySelector('#h1').innerHTML=value;
        }
    });
    // console.log(msg);    // 讀取數據, 會自動觸發get方法的執行
    // msg='hello';     // 重新賦值, 會自動觸發set方法的執行
    // 頁第一加載的時候,輸出的內容
    const h1=document.querySelector('#h1');
    h1.innerHTML=msg;

</script>

4.2-模板編譯(正則替換)

模板編譯底層主要是通過正則替換來實現的

class Vue{
    // 系統方法, 自動執行, 進行數據初始化
    // props={el:'#app',data:{},methods:{}}
    constructor(props){
        // 將data中的數據,掛載到this上
        for(let key in props.data){
            this[key]=props.data[key];
        }
        // 將methods中的方法,掛載到this上
        for(let key in  props.methods){
            this[key]=props.methods[key];
        }
        // 將模板對應的選擇器掛載到this上, 方便在其他方法中獲取
        this.$el=props.el;
        // 調用一次渲染方法
        this.render();
    }

    // 渲染方法(模板編譯)
    render(){
        // 獲取對應的dom對象
        const app=document.querySelector(this.$el);
        // 編寫正則表達式
        const reg=/\{\{(\w+)\}\}/g;
        const html=app.innerHTML.replace(reg,(a,b)=>{
            // a:是整個正則表達式匹配到的結果
            // b:是()子表達式匹配到的結果
            return this[b]
        });
        // 刷新視圖
        app.innerHTML=html;
    }
}

5-生命週期鈎子函數

Vue 事件處理事件修飾符表單處理表單修飾符雙向綁定生命週期鈎子函數_事件處理_02

本質: 一種特殊的函數, 會在vue實例創建, 運行,銷燬階段的不同時期自動觸發
注意: 鈎子函數是vue 在完成特定操作之後, 通知我們的一種方式
寫書位置: 和data,methods平級

5.1-創建階段

特點

只執行一次

鈎子函數

beforeCreate: 創建前(還沒有完成數據和方法的創建, 數據和方法還不能使用)
created: 創建後(完成數據和方法的創建,可以調用數據和方法)
boforeMount: 掛載前(還沒有完成視圖的渲染)
mounted: 掛載後(已經完成了視圖的渲染)

博客 / 詳情

Vue 事件處理 事件修飾符 表單處理 表單修飾符 雙向綁定 生命週期 鈎子函數

1-事件處理

1.1-事件綁定

1.2-事件傳參

1.3-事件對象

1.4-事件修飾符

1.4.1-stop

1.4.2-prevent

1.4.3-once

1.4.4-self

1.4.5-capture

1.5-按鍵修飾符

2-表單處理

2.1-v-model指令

2.2-常見表單元素雙向數據綁定

2.2-表單修飾符

2.2.1-書寫位置

2.2.2-語法規範

3-vm.$set

3.1-作用

3.2-別名

4-vue核心原理

4.1-雙向數據綁定(數據劫持)

4.2-模板編譯(正則替換)

5-生命週期鈎子函數

5.1-創建階段

特點

鈎子函數

5.2-運行階段

特點

鈎子函數

5.3-銷燬階段

特點

鈎子函數

發佈 評論

Vue 事件處理事件修飾符表單處理表單修飾符雙向綁定生命週期鈎子函數

發佈評論