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小时内与您取得联系。

整合营销服务商