【Vue】模板语法，事件处理器及综合案例、自定义组件、组件通信

news2024/11/22 19:27:45

一、事件处理器

我们之前事件监听可以使用v-on 指令

1、事件修饰符

在Vue中我们通过由点(.)表示的指令后缀来调用修饰符，比如：

  1.   .stop：阻止事件冒泡。当事件触发时，该修饰符将停止事件进一步冒泡到父元素。相当于调用了 event.stopPropagation()
  2.   .prevent：阻止默认事件。默认情况下，某些元素会有默认的事件行为，比如<a>标签的点击跳转，使用.prevent 可以阻止默认事件的触发。相当于调用了 event.preventDefault()。
  3.   .capture：使用事件捕获模式。默认情况下，事件是在冒泡阶段处理的（即从子元素到父元素）。使用 .capture 修饰符将事件处理移到事件捕获阶段（即从父元素到子元素）。
  4.   .self：只触发当前元素本身的事件。当事件绑定在子元素上时，该修饰符只允许事件在子元素上触发，而不会触发父元素上相同事件。
  5.   .once：：只触发一次事件。使用 .once 修饰符可以确保事件只被触发一次，之后该事件监听器会自动被移除。
  <!-- 阻止单击事件冒泡 -->
  <a v-on:click.stop="doThis"></a>
  <!-- 提交事件不再重载页面 -->
  <form v-on:submit.prevent="onSubmit"></form>
  <!-- 修饰符可以串联  -->
  <a v-on:click.stop.prevent="doThat"></a>
  <!-- 只有修饰符 -->
  <form v-on:submit.prevent></form>
  <!-- 添加事件侦听器时使用事件捕获模式 -->
  <div v-on:click.capture="doThis">...</div>
  <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
  <div v-on:click.self="doThat">...</div>
  <!-- click 事件只能点击一次 -->
  <a v-on:click.once="doThis"></a>

2、冒泡案例(.stop)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件处理器</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<style>
    .red {
        width: 400px;
        height: 400px;
        background-color: red;
    }

    .orange {
        width: 300px;
        height: 300px;
        background-color: orange;
    }

    .blue {
        width: 200px;
        height: 200px;
        background-color: blue;
    }

    .black {
        width: 500px;
        height: 500px;
        background-color: black;
    }
</style>
<body>
<!-- 定义边界 -->
<div id="app">
    <p>冒泡事件</p>
    <div class="black" @click="black">
        <div class="red" @click="red">
            <div class="orange" @click="orange">
                <div class="blue" @click="blue">
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    // 绑定边界	ES6具体体现
    new Vue({
        el: '#app',
        data() {
            return {
                f200: 'f200'
            };
        },
        methods: {
            red() {
                alert("red(红色)");
            },
            orange() {
                alert("orange（橙色）");
            },
            blue() {
                alert("blue（蓝色）");
            },
            black() {
                alert("black（黑色）");
            }
        }
    })
</script>

</html>

当我们加上了.stop修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件处理器</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<style>
    .red {
        width: 400px;
        height: 400px;
        background-color: red;
    }

    .orange {
        width: 300px;
        height: 300px;
        background-color: orange;
    }

    .blue {
        width: 200px;
        height: 200px;
        background-color: blue;
    }

    .black {
        width: 500px;
        height: 500px;
        background-color: black;
    }
</style>
<body>
<!-- 定义边界 -->
<div id="app">
    <p>冒泡事件</p>
    <div class="black" @click.stop="black">
        <div class="red" @click.stop="red">
            <div class="orange" @click.stop="orange">
                <div class="blue" @click.stop="blue">
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    // 绑定边界	ES6具体体现
    new Vue({
        el: '#app',
        data() {
            return {
                f200: 'f200'
            };
        },
        methods: {
            red() {
                alert("red(红色)");
            },
            orange() {
                alert("orange（橙色）");
            },
            blue() {
                alert("blue（蓝色）");
            },
            black() {
                alert("black（黑色）");
            }
        }
    })
</script>

</html>

3、触发案例(.once)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件处理器</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
    <p>点击</p>
    <input :value="msg"/>
    <button @click="dosub">提交</button>
</div>
</body>
<script type="text/javascript">
    // 绑定边界	ES6具体体现
    new Vue({
        el: '#app',
        data() {
            return {
                msg: '偶买噶'
            };
        },
        methods: {
            dosub() {
                alert(this.msg);
            }
        }
    })
</script>

</html>

添加.once之后只能点击一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件处理器</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
    <p>点击</p>
    <input :value="msg"/>
    <button @click.once="dosub">提交</button>
</div>
</body>
<script type="text/javascript">
    // 绑定边界	ES6具体体现
    new Vue({
        el: '#app',
        data() {
            return {
                msg: '偶买噶'
            };
        },
        methods: {
            dosub() {
                alert(this.msg);
            }
        }
    })
</script>

</html>

4、综合案例(表单)

需要注意的是复选框v-model="hobbyMax"中的hobbyMax使用数组来接收

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
    <label>姓名：</label><input v-model="username"/><br/>
    <label>密码：</label><input v-model="pwd" type="password"/><br/>
    <!-- 将用户的输入值转为 Number 类型 -->
    <label>年龄：</label><input v-model.number="age" type="number"/><br/>
    <label>性别：</label>
    <div v-for="s in sexMax">
        <input type="radio" v-model="sex" name="sex" v-bind:value="s.id"/>{{s.name}}<br/>
    </div>
    <label>爱好：</label>
    <div v-for="h in hobby">
        <input type="checkbox" v-model="hobbyMax" v-bind:value="h.id"/>{{h.name}}
    </div>
    <label>类别：</label>
    <select v-model="type">
        <option v-for="t in types" v-bind:value="t.id">{{t.name}}</option>
    </select><br/>
    <label>备注：</label>
    <!--    v-bind:value="info"-->
    <textarea v-model="info"></textarea><br/>
    确认<input type="checkbox" v-model="flag"/>
    <input type="submit" v-bind:disabled="show" v-on:click="doSubmit"/>
</div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                username: null,
                pwd: null,
                age: 10,
                sex: 1,
                sexMax: [{id: 1, name: "男"}, {id: 2, name: "女"}, {id: 3, name: "其他"}],
                hobby: [
                    {
                        id: 1,
                        name: '篮球'
                    },
                    {
                        id: 2,
                        name: '唱'
                    },
                    {
                        id: 3,
                        name: '跳'
                    },
                    {
                        id: 4,
                        name: 'rap'
                    }],
                hobbyMax: [],
                types: [
                    {
                        id: 1,
                        name: '职业人'
                    },
                    {
                        id: 2,
                        name: '学生'
                    },
                    {
                        id: 3,
                        name: '社会人'
                    }],
                type: null,
                info: '请输入你的个性签名',
                flag: false
            }
        },
        computed: {
            show: function () {
                return !this.flag;
            }
        },
        methods: {
            doSubmit: function () {
                var obj = {
                    username: this.username,
                    pwd: this.pwd,
                    age: this.age,
                    sex: this.sex,
                    hobbyMax: this.hobbyMax,
                    type: this.type,
                    info: this.info,
                }
                console.log(obj);
            }
        }

    })
</script>
</html>

效果演示

二、自定义组件

1、 vue组件

 1.1、组件简介

      组件(Component)是Vue最强大的功能之一

      组件可以扩展HTML元素，封装可重用的代码

      组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树

  1.2、 全局和局部组件

  • 全局组件：Vue.component(tagName, options)，tagName为组件名，options为配置选项。
  • 局部组件: new Vue({el:'#d1',components:{...}})

      注册后，我们可以使用以下方式来调用组件：

<tagName></tagName>

  1.3 props

      props是父组件用来传递数据的一个自定义属性。

父组件的数据需要通过props把数据传给子组件，子组件需要显式地用props选项声明 "prop"

   1：因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods

        以及生命周期钩子等。仅有的例外是像el这样根实例特有的选项。

   2：当我们定义这个 <button-counter> 组件时，你可能会发现它的data并不是像这样直接提供一个对象

  

      data: {

          count: 0

        }

        取而代之的是，一个组件的data选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：

        data: function () {

          return {

            count: 0

          }

        }

 

    3：定义组件名的方式有两种

         短横线分隔命名(建议使用)

         Vue.component('my-component-name', { /* ... */ })，

引用方式：<my-component-name>

         首字母大写命名

       

  Vue.component('MyComponentName', {  ...  })，
    引用方式： <my-component-name>和<MyComponentName>都是可接受的  

    4：HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，

         camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：

       

  props: ['postTitle'],<my-tag post-title="hello!"></my-tag>

    5：props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

         希望每个 prop 都有指定的值类型  

       props: {

           title: String,

           likes: Number,

           isPublished: Boolean,

           commentIds: Array,

           author: Object,

           callback: Function,

           contactsPromise: Promise // or any other constructor

         }

2、案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
    <!-- 定义组件不能用驼峰命名 -->
    <!-- 需求是：当引用一个myButton，也页面上一个独特标记按钮 -->
    <my-img></my-img>
    <my-button m="卡拉米"></my-button>

    <!-- <button onclick=""></button> -->
</div>
</body>
<script type="text/javascript">
    Vue.component('my-button', {
        // props是定义组件中的变量的
        props: ['m'],
        // template代表了自定义组件在页面上显示的类容
        template: '<button v-on:click="incrn">我被{{m}}点击{{n}}次</button>',
        data: function () {
            return {
                n: 1
            }
        },
        methods: {
            incrn() {
                this.n++;
            }
        }
    });
    Vue.component('my-img', {
        // template代表了自定义组件在页面上显示的类容
        template: '<img style="width: 100px;height: 100px;" src="https://ts1.cn.mm.bing.net/th/id/R-C.b0ea268fa1be279d112489ce83ad4696?rik=qItsh%2fBiy33hlg&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140303%2f1-140303215009.jpg&ehk=S6PLWamt%2bMzQV8uO9ugcU5d5M19BpXtCpNz2cRJ7q9M%3d&risl=&pid=ImgRaw&r=0">',
    });
    // 绑定边界	ES6具体体现
    new Vue({
        el: '#app',
        data() {
            return {};
        }
    })
</script>

</html>

三、组件通信

1. 自定义事件

  1.    监听事件：$on(eventName)
  2.    触发事件：$emit(eventName)

   1.1、Vue自定义事件是为组件间通信设计  

        vue中父组件通过prop传递数据给子组件，而想要将子组件的数据传递给父组件，则可以通过自定义事件的绑定

  1.         父Vue->子Vue，通过prop传递数据
  2.         子Vue->父Vue，通过事件传递数据

   1.2、事件名

        不同于组件和prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。

        建议使用“短横线分隔命名”

2、案例

2.1、父传子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通信</title>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
    <h3>父传子1</h3>
    <my-button m="牛马"></my-button>
    <h3>父传子2</h3>
    <my-button m="小卡拉米" n="2"></my-button>
</div>
</body>
<script>
    // 定义全局组件的方式
    Vue.component('my-button', {
        props: ['m', 'n'],
        template: '<button v-on:click="MyButton">{{m}}被点了{{n}}次</button>',
        data: function () {
            return {
                n: 1
            };
        },
        methods: {
            MyButton: function () {
                this.n++;
            }
        }
    })
    var vm = new Vue({
        el: "#app",
        data: {
            msg: "999"
        }
    });
</script>
</html>

2.2、子传父

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通信</title>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app2">
    <h3>子传父</h3>
    <!-- 使用自定义组件my-button的时候进行传值(相当于jsp标签往助手类中传值的概念) -->
    <my-buttons m="666" @getBut="getXx"></my-buttons>
</div>
</body>
<script>
    // 定义全局组件的方式
    Vue.component('my-buttons', {
        props: ['m'],
        template: '<button v-on:click="MyButton">{{m}}被点了</button>',
        methods: {
            MyButton: function () {
                let id = 123;
                let name = "天才";
                this.$emit('getbut', id, name);
            }
        }
    })
    var vm = new Vue({
        el: "#app2",
        data: {
            msg: "666"
        },
        methods: {
            getXx: function (a, b) {
                console.log(a);
                console.log(b);
            }
        }
    });
</script>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1024836.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

CoreData 在新建或更新托管对象中途发生错误时如何恢复如初？

CoreData 在新建或更新托管对象中途发生错误时如何恢复如初？

问题现象 在 CoreData 支持的 App 中，当我们新建或更新托管对象到一半突然出现错误时，应该禁止任何已发生的改变被写入内存或数据库中。不过，有时仍会出现始料未及的“意外”： 从上面的演示可以看到：即使在 Item 对象新建和更新途中出现错误后不执行后续的保存操作，但界…
阅读更多...
决策树（中）：数据挖掘十大算法之一

决策树（中）：数据挖掘十大算法之一

⭐️⭐️⭐️⭐️⭐️欢迎来到我的博客⭐️⭐️⭐️⭐️⭐️ &#x1f434;作者&#xff1a;秋无之地 &#x1f434;简介&#xff1a;CSDN爬虫、后端、大数据领域创作者。目前从事python爬虫、后端和大数据等相关工作&#xff0c;主要擅长领域有&#xff1a;爬虫、后端、大数据…
阅读更多...
多通道振弦数据记录仪隧道中安全监测应用方案

多通道振弦数据记录仪隧道中安全监测应用方案

多通道振弦数据记录仪隧道中安全监测应用方案 近年来&#xff0c;随着城市化进程的加速推进&#xff0c;隧道建设越来越普遍。然而&#xff0c;隧道建设也带来了一系列安全问题&#xff0c;如地质灾害、水文灾害、交通事故、火灾等。因此&#xff0c;对隧道的安全监测非常重要…
阅读更多...
20230920研发面经整理

20230920研发面经整理

1.cpp中的虚函数和虚函数表 C中的虚函数的作用主要是实现了多态的机制。关于多态&#xff0c;简而言之就是用父类型别的指针指向其子类的实例&#xff0c;然后通过父类的指针调用实际子类的成员函数 虚函数表是指在每个包含虚函数的类中都存在着一个函数地址的数组。当我们用…
阅读更多...
免费好用bpm平台，实现生产管理系统

免费好用bpm平台，实现生产管理系统

1.什么是生产管理系统 生产制造管理系统主要是以生产制造管理为核心&#xff0c;其管理功能包括产品结构设置&#xff08;BOM&#xff09;生产计划、加工、领料、质检、库存、成本核算等。通过信息化解决行业管理问题&#xff0c;满足各企业科学管理的需求&#xff0c;并为制造…
阅读更多...
Ubuntu上线一个JAVA环境微服务架构的系统

Ubuntu上线一个JAVA环境微服务架构的系统

项目背景： 项目目的： 项目架构： 配置环境： 流程： 1、系统安装 更改root密码 sudo passwd root 设置root密码123 切换用户 su root 输入root密码123 2、开启root远程ssh 编辑配置文件 vi /etc/ssh/sshd_config 更改以下行 #PermitRootLogin prohibit-passwor…
阅读更多...
【BeanTrimUtil】通过反射去除JavaBean中String类型数据的空格：一行代码搞定整个Bean的字符串去空！

【BeanTrimUtil】通过反射去除JavaBean中String类型数据的空格：一行代码搞定整个Bean的字符串去空！

【原文地址】 https://blog.csdn.net/qq_36170500/article/details/107250282 简化不必要的代码逻辑纯原生环境亦可运行 import java.lang.reflect.Field; import java.lang.reflect.Method;/*** author zhoudeshui v1.1* Desc 版权声明&#xff1a;本文为CSDN博主「一个人的编…
阅读更多...
公众号迁移线上公证靠谱吗？

公众号迁移线上公证靠谱吗？

公众号账号迁移的作用是什么&#xff1f;只能变更主体吗&#xff1f;微信公众平台的帐号迁移功能可将原公众号的粉丝、文章素材、违规记录、留言功能、名称等迁移至新的公众号。通过迁移可以实现公众号的公司主体变更、粉丝转移、开通留言功能、服务号转为订阅号等作用。因此不…
阅读更多...
电脑剪切板在哪？4个方法教你提高效率！

电脑剪切板在哪？4个方法教你提高效率！

“我在电脑上复制了一些图像&#xff0c;电脑显示已经保存在了剪切板&#xff0c;但是我找了好久都不知道电脑的剪切板在哪。有朋友可以指点一下吗&#xff1f;” 电脑剪切板是计算机操作中一个常用且强大的工具&#xff0c;它允许你复制、剪切和粘贴文本、图像、文件等。无论是…
阅读更多...
期权佣金是如何收取的？成交手续费是怎么计算的？

期权佣金是如何收取的？成交手续费是怎么计算的？

现在期权新开户佣金1.7元/张&#xff0c;超优惠活动&#xff01; 期权佣金是默认在6元一张收取的&#xff0c;可以申请调低的&#xff0c;证券公司可以结合运营成本制定合理的期权佣金优惠费率&#xff0c;但是不同的客户&#xff0c;不同的实际情况&#xff0c;都可能会影响期…
阅读更多...
UML六大关系总结

UML六大关系总结

UML六大关系有&#xff1a;继承、关系、聚合、组合、实现、依赖。分为通过图和代码总结这些关系。 1、继承 class Bird&#xff1a;Animal { } 说明&#xff1a;一段都是子类继承父类&#xff0c;在子类的后面用一个冒号表示&#xff0c;冒号后面跟着父类的名字。继承只能继…
阅读更多...
【前端知识】Three 学习日志（十二）—— WebGL渲染器设置(锯齿模糊)

【前端知识】Three 学习日志（十二）—— WebGL渲染器设置(锯齿模糊)

Three 学习日志&#xff08;十二&#xff09;—— WebGL渲染器设置(锯齿模糊) 一、设置抗锯齿 const renderer new THREE.WebGLRenderer({antialias:true, });二、效果对比 设置前&#xff1a; 设置后&#xff1a; 三、查看并设置设备像素比 // 不同硬件设备的屏幕的设…
阅读更多...
乐划锁屏推出“屏上看展”，用创意“解锁”艺术新体验

乐划锁屏推出“屏上看展”，用创意“解锁”艺术新体验

在移动互联网时代,手机不仅是重要的通讯工具,作为点亮屏幕后的“第一眼”,手机锁屏也为人们提供了更加集成、更加多元的信息接收渠道。为了满足人们的碎片化消遣需求,加速信息传播,OPPO依托锁屏点亮即触达的特点,将锁屏壁纸作为探索碎片化娱乐的新通道,推出了乐划锁屏。 在乐划…
阅读更多...
成集云 | 用友NC集成聚水潭ERP（用友NC主管库存）| 解决方案

成集云 | 用友NC集成聚水潭ERP（用友NC主管库存）| 解决方案

源系统成集云目标系统 方案介绍 用友NC是用友NC产品的全新系列&#xff0c;是面向集团企业的世界级高端管理软件。它以“全球化集团管控、行业化解决方案、全程化电子商务、平台化应用集成”的管理业务理念而设计&#xff0c;采用J2EE架构和先进开放的集团级开发平台…
阅读更多...
VMware Esxi 7.0.3用户名密码都对，网页却无法登录问题解决

VMware Esxi 7.0.3用户名密码都对，网页却无法登录问题解决

Esxi 7.0.3安装完成&#xff0c;重启之后&#xff0c;下面就是esxi的界面&#xff1a; 之后通过网页管理esxi&#xff0c;输入网址&#xff0c;出现一个问题&#xff1a; &#xff08;esxi已连接上&#xff0c;所以拿其他网段举例&#xff09;连接不上&#xff0c;无法访问此页…
阅读更多...
MVVM模式理解

MVVM模式理解

链接&#xff1a; MVVM框架理解及其原理实现 - 知乎 (zhihu.com) 重点&#xff1a; 1.将展示的界面窗口和创建的构件是数据进行分离 2.利用一个中间商进行数据的处理&#xff0c;所有的数据通过中间商进行处理
阅读更多...
Python 数独求解器

Python 数独求解器

文章目录 使用回溯算法在Python中解决数独总结 Sudoku&#xff08;数独&#xff09;是一种基于逻辑的数字填充谜题游戏&#xff0c;最受喜爱的是那些热爱逻辑和推理的人。解决数独谜题有助于提高集中注意力和逻辑思维能力。 本文介绍了如何使用Python解决数独谜题。 使用回溯算…
阅读更多...
0.UML

0.UML

1.图 1.1类图含义 第一层显示类的名称,如果是抽象类,则就用斜体显示。第二层是类的特性,通常就是字段和属性。第三层是类的操作,通常是方法或行为。注意前面的符号, ,表示public,-,表示private,#,表示protected。 1.2接口图 与类图的区别主要是顶端有<< interface >…
阅读更多...
回收站清空文件恢复？恢复文件，就看这4种方法！

回收站清空文件恢复？恢复文件，就看这4种方法！

电脑回收站对于大部分经常误删文件的用户来说&#xff0c;确实帮了大忙。但有时&#xff0c;用户可能会有定期清空回收站的习惯。回收站清空后文件还能恢复吗&#xff1f;这确实是个烦人的问题。比如下面这个用户所遇到的问题&#xff1a; “大家快帮帮我吧&#xff01;昨天看电…
阅读更多...
淘宝/天猫API 获得淘宝app商品详情原数据（优惠券详情）

淘宝/天猫API 获得淘宝app商品详情原数据（优惠券详情）

item_get_app-获得淘宝app商品详情原数据 taobao.item_get_app 公共参数 名称类型必须描述keyString是调用key&#xff08;必须以GET方式拼接在URL中&#xff09;获取Key和secret接入secretString是调用密钥api_nameString是API接口名称&#xff08;包括在请求地址中&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023