vue子組件點擊修改父組件的值

lt;!DOCTYPE html>

<html>

<head>

<title>vue子組件點擊修改父組件的值</title>

</head>

<body>

</div>

</div>

</template>

const cpn={

template: '#cpn',

methods:{

jia(){

this.$emit('jia')

jian(){

this.$emit('jian')

}

const app=new Vue({

el: '#app',

data:{

num : 0,

methods:{

jia(){

this.num +=1

jian(){

this.num -=1

}

components:{

cpn

}

})

</script>

</body>

</html>

、基本概念

基本概念：transform 屬性向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換；該屬性允許我們對元素進行旋轉(zhuǎn)、縮放、移動或傾斜。

這兩點是Transform的概念和應(yīng)用場景，重點在于2D和3D的轉(zhuǎn)換，那么呢？2D和3D的轉(zhuǎn)換是有一定的數(shù)學(xué)基礎(chǔ)的，為什么這么說呢？我們需要了解兩個概念

第一個：透視投影

從某一點發(fā)射出去的光線，是互不平行的，然后就會有一個近大遠小的效果。比如：家里的燈泡，我們把一個東西離得燈泡越近，那么它的影子就越大，離得越遠，影子就越小。

與之對應(yīng)的：正交投影

正交投影的投影線垂直于投影平面，里面的光線是互相平行的；比如生活中的太陽發(fā)出的光都是平行光。

CSS的坐標(biāo)系統(tǒng)：它的坐標(biāo)系是一個左手坐標(biāo)系，綠色的是x軸的方向也就是屏幕的方向，向右正方向；紅色的是y軸，向下是正方向；藍色是z軸，屏幕向外是正方向。（如下圖所示）

CSS變換都是基于左手坐標(biāo)系和透視投影。

常用屬性主要有：Transform-origin（基準(zhǔn)點），基于哪一個點來做變換，Transform-style（元素呈現(xiàn)方式2D還是3D），Rotate（旋轉(zhuǎn)-度數(shù)），Scale（縮放-大小），Skew（傾斜-左右），Translate（移動-x/y軸），Perspective（透視）。

2、瀏覽器的兼容

完全支持Transform第一個瀏覽器版本

完全支持Transform-origin第一個瀏覽器版本

完全支持Transform-style第一個瀏覽器版本

3、Rotate（旋轉(zhuǎn)，分為2D旋轉(zhuǎn)和3D旋轉(zhuǎn)）

rotate(angle)，2D旋轉(zhuǎn)

transform: rotate(45deg);

rotateX(angle)，沿X軸3D旋轉(zhuǎn)

transform: rotate(45deg);

rotateY(angle) ，沿 Y 軸3D旋轉(zhuǎn)

transform: rotate(45deg);

rotateZ(angle) ，沿 Z 軸3D旋轉(zhuǎn)

transform: rotate(45deg);

rotate3d(x, y, z, angle) ， 3D旋轉(zhuǎn)；接收四個參數(shù)，x y z 介于0-1之間，確定三維空間唯一坐標(biāo)點，angle圍繞原點與x y z 坐標(biāo)點連線的旋轉(zhuǎn)角度。
元素圍繞著xyz在空間中確定的唯一坐標(biāo)點和原點之間的連線旋轉(zhuǎn)指定的角度，這就是rotate3D。

transform: rotate3d(1,1,1,45deg);

4、Scale（縮放，同樣分為2D縮放和3D縮放）

scale(x[, y]) ，2D 縮放

transform: scale(2);

scaleX(x) ，沿 X 軸縮放

transform: scaleX(2);

scaleY(y) ，沿 Y 軸縮放

transform: scaleY(2);

scaleZ(z) ，沿 Z 軸縮放 - 單獨使用時沒有任何效果

transform: scaleZ(2);

scale3d(x, y, z) ，定義每個方向上的縮放， Z方向單獨使用時沒有任何效果

transform: scale(2,2,2);

5、Skew（傾斜）

skewX(angle) - 沿 X 軸的 2D 傾斜

transform: skewX(45deg);

skewY(angle) - 沿 Y 軸的 2D 傾斜

transform: skewY(45deg);

skew(angle-x, angle-y) - 沿 X Y 軸的 2D 傾斜

transform: skewY(45deg, 45deg);

6、Translate（移動）

translateX(x) ，沿 X 軸位移

transform: translateX(20px);

translateY(y) ，沿 Y 軸位移

transform: translateY(20px);

translateZ(z) ，沿 Z 軸位移，需要配合perspective屬性一起使用

transform: translateZ(20px);

translate(x, y) ，沿 X Y 軸位移

transform: translate(20px,20px);

translate3d(x, y, z) ，沿 X Y Z 軸位移

 transform: translate(20px, 20px, 20px);

7、Perspective，定義的是視覺和元素在3D空間Z平面之間的距離

transform: perspective(200px);

8、Transform-origin（基準(zhǔn)點）

在前面的例子里，旋轉(zhuǎn)和傾斜都是基于中心位置，也就是基準(zhǔn)點的默認(rèn)值：50% 50% 0；Transform-origin接收三個參數(shù)，x-axis y-axis z-axis；

在x的方向上可以指定：left、center、right、length和%；在y軸的方向上可以指定：top、center、bottom、length和%；在y軸的方向上只可以指定：length。

transform-origin: x-axis y-axis z-axis;

9、Transform-style（三維空間的展現(xiàn)形式）

主要有兩個值：float - 2D形式和preserve-3d - 3D形式。

本篇文章主要分享了Transform的基本概念，簡要介紹了CSS3坐標(biāo)系統(tǒng)與透視原理, 重點介紹了Transform常用的Rotate(旋轉(zhuǎn))、Scale(縮放)、Skew(傾斜)、Translate(移動)、Perspective(透視)屬性。

現(xiàn)代前端開發(fā)中，回調(diào)函數(shù)是一種非常重要的概念。它們允許我們在特定的時刻執(zhí)行代碼，常用于處理異步操作，例如事件監(jiān)聽、網(wǎng)絡(luò)請求等。在本文中，我將通過幾個例子來深入探討回調(diào)函數(shù)的使用。

什么是回調(diào)函數(shù)？

回調(diào)函數(shù)（Callback）是一個作為參數(shù)傳遞給另一個函數(shù)的函數(shù)，這個回調(diào)函數(shù)將在外部函數(shù)的內(nèi)部被執(zhí)行。在JavaScript中，由于其事件驅(qū)動和異步的特性，回調(diào)函數(shù)應(yīng)用非常廣泛。

示例1：事件監(jiān)聽回調(diào)

下面是一個簡單的HTML按鈕點擊事件的例子，我們將為按鈕元素添加一個點擊事件監(jiān)聽器，并傳遞一個回調(diào)函數(shù)來處理點擊事件。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>回調(diào)函數(shù)示例：事件監(jiān)聽</title>
</head>
<body>
    <button id="clickMeBtn">點擊我</button>

    <script>
        document.getElementById('clickMeBtn').addEventListener('click', function() {
            alert('按鈕被點擊了！');
        });
    </script>
</body>
</html>

在這個例子中，我們定義了一個匿名函數(shù)作為addEventListener方法的第二個參數(shù)。當(dāng)用戶點擊按鈕時，這個匿名函數(shù)就會被調(diào)用。

示例2：異步操作回調(diào)

異步操作，如網(wǎng)絡(luò)請求，是回調(diào)函數(shù)的另一個常見用例。以下是使用XMLHttpRequest對象發(fā)起網(wǎng)絡(luò)請求的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>回調(diào)函數(shù)示例：異步操作</title>
</head>
<body>
    <script>
        function requestData(url, callback) {
            var xhr=new XMLHttpRequest();
            xhr.open('GET', url, true);
            xhr.onreadystatechange=function() {
                if (xhr.readyState===4 && xhr.status===200) {
                    callback(null, xhr.responseText);
                } else if (xhr.readyState===4) {
                    callback(new Error('請求失敗'));
                }
            };
            xhr.send();
        }

        requestData('https://api.example.com/data', function(error, data) {
            if (error) {
                console.error('發(fā)生錯誤:', error);
            } else {
                console.log('接收到的數(shù)據(jù):', data);
            }
        });
    </script>
</body>
</html>

在這個例子中，我們定義了一個名為requestData的函數(shù)，它接收一個URL和一個回調(diào)函數(shù)作為參數(shù)。requestData函數(shù)內(nèi)部創(chuàng)建一個XMLHttpRequest對象，并在請求完成時調(diào)用回調(diào)函數(shù)，傳遞錯誤對象或響應(yīng)數(shù)據(jù)。

示例3：定時器回調(diào)

JavaScript定時器函數(shù)setTimeout和setInterval也使用回調(diào)函數(shù)。以下是一個使用setTimeout的例子。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>回調(diào)函數(shù)示例：定時器</title>
</head>
<body>
    <script>
        function delayLog(message, delay) {
            setTimeout(function() {
                console.log(message);
            }, delay);
        }

        delayLog('3秒后的消息', 3000);
    </script>
</body>
</html>

在這個例子中，delayLog函數(shù)接收一個消息和一個延遲時間（毫秒）作為參數(shù)。它使用setTimeout來延遲執(zhí)行一個匿名函數(shù)，該函數(shù)將在指定的延遲后輸出消息。

結(jié)論

回調(diào)函數(shù)是JavaScript編程的基石之一，它們提供了一種處理異步操作和事件的強大手段。理解并正確使用回調(diào)函數(shù)對于任何前端工程師來說都是至關(guān)重要的。通過本文的例子，我們可以看到回調(diào)函數(shù)在實際編程中的多種應(yīng)用場景，希望這些例子能幫助你更好地理解回調(diào)函數(shù)的工作原理和使用方法。

在線咨詢

上一篇：強固耐用，極速雷電，LaCie PSSD移動固態(tài)硬盤
下一篇：java中講講FileOutputStream的用法

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商