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 屬性向元素應用 2D 或 3D 轉換；該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。

這兩點是Transform的概念和應用場景，重點在于2D和3D的轉換，那么呢？2D和3D的轉換是有一定的數學基礎的，為什么這么說呢？我們需要了解兩個概念

第一個：透視投影

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

與之對應的：正交投影

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

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

CSS變換都是基于左手坐標系和透視投影。

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

2、瀏覽器的兼容

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

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

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

3、Rotate（旋轉，分為2D旋轉和3D旋轉）

rotate(angle)，2D旋轉

transform: rotate(45deg);

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

transform: rotate(45deg);

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

transform: rotate(45deg);

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

transform: rotate(45deg);

rotate3d(x, y, z, angle) ， 3D旋轉；接收四個參數，x y z 介于0-1之間，確定三維空間唯一坐標點，angle圍繞原點與x y z 坐標點連線的旋轉角度。
元素圍繞著xyz在空間中確定的唯一坐標點和原點之間的連線旋轉指定的角度，這就是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（基準點）

在前面的例子里，旋轉和傾斜都是基于中心位置，也就是基準點的默認值：50% 50% 0；Transform-origin接收三個參數，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（三維空間的展現形式）

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

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

現代前端開發中，回調函數是一種非常重要的概念。它們允許我們在特定的時刻執行代碼，常用于處理異步操作，例如事件監聽、網絡請求等。在本文中，我將通過幾個例子來深入探討回調函數的使用。

什么是回調函數？

回調函數（Callback）是一個作為參數傳遞給另一個函數的函數，這個回調函數將在外部函數的內部被執行。在JavaScript中，由于其事件驅動和異步的特性，回調函數應用非常廣泛。

示例1：事件監聽回調

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>回調函數示例：事件監聽</title>
</head>
<body>
    <button id="clickMeBtn">點擊我</button>

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

在這個例子中，我們定義了一個匿名函數作為addEventListener方法的第二個參數。當用戶點擊按鈕時，這個匿名函數就會被調用。

示例2：異步操作回調

異步操作，如網絡請求，是回調函數的另一個常見用例。以下是使用XMLHttpRequest對象發起網絡請求的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>回調函數示例：異步操作</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('發生錯誤:', error);
            } else {
                console.log('接收到的數據:', data);
            }
        });
    </script>
</body>
</html>

在這個例子中，我們定義了一個名為requestData的函數，它接收一個URL和一個回調函數作為參數。requestData函數內部創建一個XMLHttpRequest對象，并在請求完成時調用回調函數，傳遞錯誤對象或響應數據。

示例3：定時器回調

JavaScript定時器函數setTimeout和setInterval也使用回調函數。以下是一個使用setTimeout的例子。

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

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

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

結論

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

在線咨詢

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

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商