-恰饭第一名-
-恰饭第一名-

vue.js学习笔记七

一、父子组件的访问方式：$children

  • 有时候我们需要父组件直接访问子组件，子组件直接访问父组件，或者是子组件访问根组件
  • 父组件访问子组件：使用$chilren或$refs reference（引用）
  • 子组件访问父组件：使用$parent

  • 我们先来看下$children的访问
  • this.$children是一个数组类型，它包含所有子组件对象
  • 我们这里通过一个遍历，取出所有子组件的message状态
<body>
    <div id="app">
        <cpn>cpn>
        <cpn>cpn>
        

        <cpn ref="aaa">cpn>
        <button @click="btnClick">按钮button>
    div>

    <template id="cpn">
      <div>我是子组件div>
    template>
    <script src="../js/vue.js">script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message: "你好啊"
            },
            methods: {
                btnClick() {
                    // 1.$children
                    // console.log(this.$children);
                    // for (let c of this.$children) {
                    //     console.log(c.name);
                    //     c.showMessage();
                    // }
                    // console.log(this.$children[2].name);

                    // 2. $refs => 对象类型， 默认是一个空的对象 ref = "bbb"
                    console.log(this.$refs.aaa.name);
                }
            },
            components: {
                cpn: {
                    template: "#cpn",
                    data() {
                        return {
                            name: "我是子组件的name"
                        }
                    },
                    methods: {
                        showMessage() {
                            console.log("showMessage");
                        }
                    }
                },
            }
        })
    script>


二、父子组件的访问方式：$refs

  • $children的缺陷
  • 通过$children访问子组件时，是一个数组类型，访问其中的子组件必须通过索引值
  • 但是当子组件过多，我们需要拿到其中一个时，往往不能确定它的索引值，甚至还可能会发生变化
  • 有时候，我们想明确获取其中一个特定的组件，这个时候就可以使用$refs
  • $refs的使用
  • $refs和ref指令通常是一起使用的
  • 首先，我们通过ref给某一个子组件绑定一个特定的ID
  • 其次，通过this.$refs.ID就可以访问到该组件了
<child-cpn1 ref="child1">child-cpn1>
    <child-cpn2 ref="child2">child-cpn2>
    <button @click="showRefsCpn">通过refs访问子组件button>
    <script>
      showRefsCpn(){
        console.log(this.$refs.child1.message);
        console.log(this.$refs.child2.message);
      }
      
    script>


三、父子组件的访问方式：$parent

  • 如果我们想在子组件中直接访问父组件，可以通过$parent
  • 注意事项：
  • 尽管在Vue开发中，我们允许通过$parent来访问父组件，但是在真实开发中尽量不要这样做
  • 子组件应该尽量避免直接访问父组件的数据，因为这样耦合度太高了
  • 如果我们将子组件放在另外一个组件之内，很可能该父组件没有对应的属性，往往会引起问题
  • 另外，更不好做的是通过$parent直接修改父组件的状态，那么父组件中的状态将变得飘忽不定，很不利于调式和维护
    <div id="app">
        <parent-cpn>parent-cpn>
    div>

    <template id="parentCpn">
      <child-cpn>child-cpn>
    template>

    <template id="childCpn">
      <button @click="showParent">显示父组件信息button>
    template>
    <script src="../js/vue.js">script>
    <script>
        Vue.component("parent-cpn", {
            template: "#parentCpn",
            data() {
                return {
                    message: "我是父组件，嘿嘿"
                }
            },
            components: {
                "child-cpn": {
                    template: "#childCpn",
                    methods: {
                        showParent() {
                            console.log(this.$parent.message);
                        }
                    }
                }
            }
        })

        const app = new Vue({
            el: '#app',
            data: {
                message: '你好啊'
            }
        })
    script>


四、非父子组件通信

  • 非父子组件关系包括多个层级的组件，也包括兄弟组件的关系
  • 在Vue1.x的时候，可以通过$dispatch和$broadcast完成
  • $dispatch用于向上级派发事件
  • $broadcast用于向下级广播事件
  • 但是在Vue2.x都被取消了
  • 在Vue2.x中，有一种方案是通过中央事件总线，也就是一个中介来完成
  • 但是这种方案和直接使用Vuex的状态管理方案还是逊色很多


五、为什么使用slot

  • slot翻译为插槽
  • 在生活中很多地方都有插槽，电脑的USB插槽，插板当中的电源插槽
  • 插槽的目的是让我们原来的设备具备更多的扩展性
  • 比如电脑的USB我们可以插入U盘，硬盘，手机，音响，键盘，鼠标等等
  • 组件的插槽：
  • 组件的插槽也是为了让我们封装的组件更加具有扩展性
  • 让使用者可以决定组件内部的一些内容到底展示什么
  • 例子：移动网站中的导航栏。
  • 导航栏我们必然会封装成一个插件，比如nav-bar组件。
  • 一旦有了这个组件，我们就可以在多个页面中复用了
  • 但是，每个页面的导航是一样的吗？
    vue.js学习笔记七_第1张图片

六、如何封装这类组件呢？

  • 抽取共性，保留不同
  • 最好的封装方式就是将共性抽取到组件中，将不同暴露为插槽
  • 一旦我们预留了插槽，就可以让使用者根据自己的需求，决定插槽中插入什么内容
  • 是搜索框，还是文字，还是菜单。由调用者自己来决定

七、slot基本使用

  • 如何使用slot？
  • 在子组件中，使用特殊的元素就可以为子组件开启一个插槽
  • 该插槽插入什么内容取决父组件如何使用
  • 我们通过一个简单的例子，来给子组件定义一个插槽：
  • 中的内容表示，如果没有在该组件中插入任何其他内容，就默认显示该内容
  • 有了这个插槽后，父组件如何使用呢？
<body>
    <div id="app">
        <my-cpn>my-cpn>
        <my-cpn>
            <h2>我是替换插槽的内容h2>
            <p>我也是替换插槽的内容p>
        my-cpn>
    div>
    <template id="myCpn">
      <div>
        <slot>我是一个插槽中的默认内容slot>
      div>
    template>
    <script src="../js/vue.js">script>
    <script>
        Vue.component("my-cpn", {
            template: "#myCpn"
        })
        let app = new Vue({
            el: "#app"
        })
    script>
body>

vue.js学习笔记七_第2张图片

八、具名插槽slot

  • 当子组件的功能复杂时，子组件的插槽可能并非是一个
  • 比如我们封装一个导航栏的子组件，可能就需要三个插槽，分别代表左边、中间、右边
  • 那么，外面在给插槽插入内容时，如何区分插入的是哪一个呢？
  • 这个时候，我们就需要给插槽起一个名字了
  • 如何使用具名插槽呢？
  • 只要给slot元素一个name属性即可
  • 下面这个例子，我们先不对导航组件做非常复杂的封装，先了解具名插槽的用法
<body>
    <div id="app">
        
        <my-cpn>my-cpn>
        
        <my-cpn>
            <span slot="left">我是返回span>
        my-cpn>
        
        <my-cpn>
            <span slot="left">我是返回span>
            <span slot="center">我是标题span>
            <span slot="right">我是菜单span>
        my-cpn>
    div>
    <template id="myCpn">
      <div>
        <slot name="left">我是左侧slot>
        <slot name="center">我是中间slot>
        <slot name="right">我是右侧slot>
      div>
      template>
    <script src="../js/vue.js">script>
    <script>
        Vue.component("my-cpn", {
            template: "#myCpn"
        })
        let app = new Vue({
            el: "#app"
        })
    script>
body>

九、编译作用域

<div id="app">
        <my-cpn v-show="isShow">my-cpn>
    div>
    <template id="myCpn">
      <h2>我能不能显示出来呢h2>
    template>
    <script src="../js/vue.js">script>
    <script>
        Vue.component("my-cpn", {
            template: "#myCpn",
            data() {
                return {
                    isShow: false
                }
            }
        })
        let app = new Vue({
            el: "#app",
            data: {
                isShow: true
            }
        })
    script>
  • my-cpn v-show=“isShow”>中，我们使用了isShow属性。
  • isShow属性包含在组件中，也包含在Vue实例中。
  • 答案：最终可以渲染出来，也就是使用的是Vue实例的属性。

  • 父组件模板的所有东西都会在父级作用域内编译：子组件模板的所有东西都会在子级作用域内编译
  • 而我们在使用的时候，整个组件的使用过程是相当宇在父组件中出现的
  • 那么他的作用域就是父组件，使用的属性也是属于父组件的属性
  • 因此，isShow使用的是Vue实例中的属性，而不是子组件的属性

    <div id="app">
        <cpn v-show="isShow">cpn>
        <cpn v-for="item in names">cpn>
    div>


    <template id="cpn">
    <div>
      <h2>我是子组件h2>
      <p>我是内容，哈哈哈p>
      <button v-show="isShow">按钮button>
    div>
  template>

    <script src="../js/vue.js">script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message: "你好啊",
                isShow: true
            },
            components: {
                cpn: {
                    template: "#cpn",
                    data() {
                        return {
                            isShow: false
                        }
                    }
                }
            }
        })
    script>

十、作用域插槽：准备

  • 父组件替换插槽的标签，但是内容由子组件来提供
  • 我们先提一个需求：
  • 子组件中包括一组数据，比如：pLanguages: ['JavaScript', 'Python', 'Swift', 'Go', 'C++']
  • 需要在多个界面进行展示
  • 某些界面是以水平方向一一展示的，
  • 某些界面是以列表形式展示的，
  • 某些界面直接展示一个数组
  • 内容在子组件，希望父组件告诉我们如何展示，怎么办呢？
  • 利用slot作用域插槽就可以了

十一、作用域插槽：使用

  • 在父组件使用我们的子组件时，从子组件中拿到数据：
  • 我们通过获取到slotProps属性
  • 在通过slotProps.data就可以获取到刚才我们传入的data了
  <div id="app">
        <cpn>cpn>
        <cpn>
            
            <template slot-score="slot">
              
              <span>{{slot.data.join("-")}}span>
          template>
        cpn>
        <cpn>
            <template slot-score="slot">
               
            <span>{{slot.data.join("-")}}span>
          template>
        cpn>
    div>

    <template id="cpn">
      <div>
          <slot :data="pLanguages">
            <ul>
              <li v-for="item in pLanguages">{{item}}li>
            ul>
          slot>
      div>
    template>
    <script src="../js/vue.js">script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message: "你好啊"
            },
            components: {
                cpn: {
                    template: "#cpn",
                    data() {
                        return {
                            pLanguages: ['JavaScript', 'C++', 'Java', 'C#', 'Python', 'Go', 'Swift']
                        }
                    }
                }
            }
        })
    script>

你可能感兴趣的:(JavaScript,vue,学习笔记)

  • 112：vue+cesium 设置镜头光晕效果 还是大剑师兰特 #cesium综合教程200+大剑师cesium教程cesium示例cesium高级CesiumAPI
    作者：还是大剑师兰特，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。查看本专栏目录-本文是第:112`篇文章文章目录一、示例效果图:二、示例介绍三、配置说明四、示例源代码（共171行）五、核心方法
  • Tinyflow AI 工作流编排框架 v0.0.7 发布 自不量力的A同学 人工智能
    目前没有关于TinyflowAI工作流编排框架v0.0.7发布的相关具体信息。Tinyflow是一个轻量的AI智能体流程编排解决方案，其设计理念是“简单、灵活、无侵入性”。它基于WebComponent开发，前端支持与React、Vue等任何框架集成，后端支持Java、Node.js、Python等语言，助力传统应用快速AI转型。该框架代码库轻量，学习成本低，能轻松应对简单任务编排和复杂多模态推理
  • Linux内核学习之 -- epoll()一族系统调用分析笔记 lagransun linux学习笔记
    背景linux4.19epoll()也是一种I/O多路复用的技术，但是完全不同于select()/poll()。更加高效，高效的原因其他博客也都提到了，这篇笔记主要是从源码的角度来分析一下实现过程。作为自己的学习笔记，分析都在代码注释中，后续回顾的时候看注释好一点。相关链接：Linux内核学习之–ARMv8架构的系统调用笔记Linux内核学习之–系统调用open()和write()的实现笔记Lin
  • 【保姆级】阿里云codeup配置Git的CI/CD步骤 CodeCaptain 阿里云GitLabDevOps阿里云gitci/cd
    以下是通过阿里云CodeUp的Git仓库进行CI/CD配置的详细步骤，涵盖前端（Vue3）和后端（SpringBoot）项目的自动化打包，并将前端打包结果嵌入到Nginx的Docker镜像中，以及将后端打包的JAR文件拷贝至Docker指定目录的完整流程：前提条件阿里云账号：已注册并登录阿里云CodeUp。项目代码：前端（Vue3）和后端（SpringBoot）项目代码已托管到CodeUp仓库。D
  • vue的绑定 哥谭居民0001 vue.js前端javascript
    一个组件就是一个对象或一个方法，在对象里创建的属性。肯定属于对象的内部字段，说白了只有这个对象去记他的属性的内存地址，在这个角度上去想父子组件的传值，传的不就是地址，也就是字段的引用父组A对象，在父组件里定义一个变量a，内存上就出现了a这个变量，而且只能通过A记录了q的地址，现在有一个弹出框组件B，我们把它抽成了组件，他也就成了个对象，B里面有个b变量，A不知到b的地址，肯定不能操作b，同样，B不
  • 一个普通的vue权限管理方案-菜单权限控制 han_hanker vue.js前端javascript
    渲染左侧菜单0&&sidebar.name!==sidebar.children[0].name">{{sidebar.meta.title}}0">{{child1.meta.title}}{{child.name}}{{child1.name}}{{sidebar.name}}import{getUserFuncPerm}from'@/api/user'exportdefault{name:'
  • Vue3-笔记002-Ref与Reactive ·焱· vue3学习笔记笔记vue.jsjavascript
    002-Ref与Reactive-目录Refref案例ref与RefifRefshallowReftriggerRefcustomRefdom元素的refReactive与ref的共同点与ref的不同点数组的异步赋值问题readonlyshallowReactivetoReftoRefstoRawRef接受一个内部值并返回一个响应式且可变的ref对象。ref对象仅有一个.valueproperty
  • Vue3-day3-Ref-Reactive 金串串 vue.jsjavascript前端
    Ref：创建基本类型的响应式数据作用：定义响应式变量语法：letxxx=ref(初始值)返回值：一个RefImpl的实例对象，简称ref对象或者ref，ref对象的value属性是响应式的注意点：js中操作数据需要：xxx.value，但模板中不需要.value，直接使用即可。对于letname=ref('张三')来说，name不是响应式的，name.value是响应式的。代码段姓名：{{name
  • vue3 v-for循环子组件上绑定ref并且取值 华山令狐虫 javascript前端vuevue3
    vue3v-for循环子组件上绑定ref并且取值//要循环的变量constviews=ref([])//数组存所有refdomconstitemsRef=ref([])constrefresh=(index)=>{//取出refdom子组件并且调用其方法itemsRef.value[index].initChart()}(itemsRef[index]=el)">
  • 【JavaScript】11-JS高阶技巧 beibeibeiooo JavaScript【已完结】javascript前端ecmascriptes6
    本文介绍JS中的一些高阶技巧。目录1.深浅拷贝1.1浅拷贝1.2深拷贝1.2.1通过递归实现1.2.2lodash/cloneDeep1.2.3JSON.stringify()2.异常处理2.1throw抛异常2.2try/catch捕获异常2.3debugger3.处理this3.1this指向3.1.1普通函数this3.1.2箭头函数的this3.2改变this3.2.1call方法改变3.
  • vue使用el-select下拉框匹配不到值的优化方案，el-select显示，当选择框的选项无法与选择框的value值匹配时，不显示value值的处理办法 Kingsaj 项目实操vue.jselementuijavascript
    问题描述：新建表单数据，下拉框选项一般从接口获取的数据列表，比如后期某个数据关停了，这条数据就会被删除，导致我们取不到这条数据。就会出现el-select下拉框匹配不到值的情况。所以我们要处理这种情况的。复现步骤：数据字典新增一条【数据项】新添加一条工单数据绑定这个新增的【数据项】，提交保存操作。保存成功后，删除数据字典新增的【数据项】。然后点击当前新添加的工单数据编辑，操作，查看工单数据字典这一
  • VUE中的组件加载方式 catino vue.js前端javascript
    加载方式有哪些，及如何进行选择常规的静态引入是在组件初始化时就加载所有依赖的组件，而懒加载则是等到组件需要被渲染的时候才加载。对于大型应用，可能会有很多组件，如果一开始都加载，可能会影响首屏加载时间。如果某些组件在首屏不需要，比如弹窗或者标签页里的内容，那么懒加载会更好，减少初始加载时间，实现时使用动态导入和异步组件，同时注意处理加载状态和错误处理。。反之，如果组件在页面初始化时就必须显示，那么静
  • 如何用PHP开发一个api数据接口 幽蓝计划 php
    对于一个iOS开发者来说，我一直觉得会写接口是一件很酷的事情，因为它可以实时修改前台数据，而不像App一样需要更新版本和接受审核。更重要的是，它意味着你的技术完成了一个闭环，可以独自完成一整个项目的开发。PHP是我接触的第一个脚本语言，使用之后更是感觉PHP功能强大，开发过程非常友好方便，虽然之后也学习过Python、JavaScript等语言，但现在还是习惯使用PHP，下面就来介绍一下如何用PH
  • COMP 315: Cloud Computing for E-Commerce 后端
    Assignment1:JavascriptCOMP315:CloudComputingforE-CommerceFebruary20251IntroductionAcommontaskwhenbackendprogrammingisdatacleaning,whichistheprocessoftakinganinitialdatasetthatmaycontainerroneousorinco
  • vue中根据html动态渲染内容 今天吃了嘛o vue.jshtmljavascript
    需求：根据数据中的html，因为我是在做填空，所以是需要将html中的_____替换成input，由于具体需求我使用的是元素contenteditable代替的可编辑的inputhtml部分js部分//这个是为了保证输入的时候光标保持在最后constmoveCursorToEnd=(element:HTMLElement)=>{constrange=document.createRange();c
  • uniapp特有生命周期钩子 浪裡遊 uniappuni-appvue.js前端
    生命周期钩子在UniApp中，页面的生命周期与Vue的生命周期钩子紧密相关，并且针对小程序平台，UniApp还扩展了一些额外的生命周期钩子。以下是重要的页面生命周期钩子及其简要说明：基础的Vue生命周期钩子beforeCreate在实例初始化之后，数据观测(dataobserver)和event/watcher事件配置之前被调用。created实例已经创建完成之后被调用。此时已完成数据观测，属性和
  • cesium 文字避让 花归去 cesiumjavascript前端vue.js
    token记得换成您自己的！！！申请cesium的token官网【Cesium:ThePlatformfor3DGeospatial】>import*asCesiumfrom'cesium';import{onMounted,reactive,ref,computed,nextTick}from'vue';//地图实例letviewer:any;constshowText=()=>{viewer.
  • emit作用 肉肉不吃 肉 vue.jsjavascript前端
    emit是Vue3中用于子组件向父组件传递事件和数据的机制。它允许子组件触发一个自定义事件，父组件可以监听这个事件并执行相应的逻辑。emit的作用子组件向父组件通信：子组件通过emit触发一个自定义事件，父组件监听这个事件并执行相应的逻辑。传递数据：子组件可以通过emit向父组件传递数据，父组件可以在事件处理函数中接收这些数据。解耦组件逻辑：子组件不需要知道父组件的具体实现，只需要触发事件，父组件
  • Linux内核srio驱动,Zynq—Linux移植学习笔记（十四）：RapidIO驱动开发 weixin_39942572 Linux内核srio驱动
    #defineDRIVER_NAME"xiic-rio"#defineSRIO_ZYNQ_BASEADDR0x40000000#defineSRIO_ZYNQ_NODE_BASEADDR0x10100#defineSRIO_ZYNQ_MAX_HOPCOUNT13structxiic_rio{structmutexlock;u8*data;};/*Weneedglobalvarriableforma
  • 探究Three.js中模型移动与旋转的交互逻辑 Front_Yue 3D技术实践指南javascriptthree.js3d
    前言Three.js作为一个功能强大的JavaScript3D库，极大地简化了在网页上创建和展示3D图形的过程。它在游戏开发、产品展示、虚拟现实等众多领域都被广泛应用。通过Three.js，开发者能够轻松创建出复杂的三维场景和交互性强的3D应用，为用户带来沉浸式的体验。一、模型移动的交互逻辑实现（一）键盘控制模型移动利用键盘事件来控制模型在三维空间中的位置移动，是一种常见且便捷的交互方式。以下为具
  • 从零开始：使用原生JS打造简易飞机大战游戏 西域情歌
    本文还有配套的精品资源，点击获取简介：在本教程中，我们将探讨如何利用原生JavaScript的特性，包括事件处理、DOM操作、定时器和音频处理，来构建一个基础的“飞机大战”游戏。该游戏的核心元素包括玩家飞机、敌机、子弹和碰撞检测，它们通过HTML和CSS展现在页面上。通过编写JavaScript脚本，我们实现游戏对象的创建与状态管理，响应用户的键盘和点击事件，更新游戏内容，并通过定时器维护游戏循环
  • Kubernetes学习笔记-移除Nacos迁移至K8s 人生偌只如初见 KubernetesJ2EEkubernetesk8sjava
    项目服务的配置管理和服务注册发现由原先的Nacos全面迁移到Kubernetes上。一、移除Nacos移除Nacos组件依赖。com.alibaba.cloudspring-cloud-starter-alibaba-nacos-discoverycom.alibaba.cloudspring-cloud-starter-alibaba-nacos-configorg.springframewor
  • React 18 如何定义变量，及赋值 与渲染 痴心阿文 Reactreact.jsjavascript前端
    React18中，定义变量、赋值和渲染的方式因变量的用途和作用域不同而有所差异，下面为你详细介绍不同场景下的实现方法。1.函数组件内定义普通变量在函数组件里，你可以像在普通JavaScript函数中一样定义变量，并且这些变量会在每次组件重新渲染时重新创建。importReactfrom'react';constMyComponent=()=>{//定义普通变量并赋值constmessage='He
  • 使用Three.js渲染器创建炫酷3D场景 Front_Yue 3D技术实践指南javascriptthree.js3d
    引言在当今数字化的时代，3D图形技术正以其独特的魅力在各个领域掀起波澜。从影视制作到游戏开发，从虚拟现实到网页交互，3D场景以其强烈的视觉冲击力和沉浸式的体验，成为了吸引用户、传达信息的重要手段。而Three.js，作为一款功能强大且广受欢迎的JavaScript3D库，为我们提供了便捷、高效的途径来创建令人炫目的3D场景。本文将深入探讨使用Three.js渲染器创建炫酷3D场景的方方面面，带领读
  • 【致100位技术同路人：代码无边界，GIS×编程的双向奔赴！】 喆星时瑜 留言感谢你们的关注
    今天在地理信息科学的坐标系里标记了一个闪亮锚点——我的CSDN粉丝破百啦！✨破百节点亮起的不只是GISer，还有无数程序员伙伴的坐标！感谢你们的关注，是你们的每一次的让这些文章有了生命力，每一次的都化作我深夜调试的动力。作为穿梭在GIS与通用编程之间的开发者，我始终相信：空间算法是经纬度的代码诗，而工程思维是让地理智能落地的坐标系。未来会继续用PostGIS的严谨写空间索引，用React/Vue的
  • 04.文本标签 龙哥带你学编程 #html前端
    一、文本简介1、页面组成元素1）以淘宝购物官网为例，分析网页：在淘宝购物官网的首页上，我们可以看到它是由超链接，文字，图片等元素构成。2）页面组成元素①一个静态页面绝大部分由以下四种元素组成：文本图片超链接音频和视频②思考：符合以下特点的网页是静态还是动态页面？带有音频和视频带有flash动画带有css动画带有JavaScript特效不是。动态页面和静态页面区别在于：是否用到了后端技术，以及是否与
  • 免费界面库 python_一个非常简单好用的Python图形界面库(PysimpleGUI) 不妧 免费界面库python
    前一阵，我在为朋友编写一个源代码监控程序的时候，发现了一个Python领域非常简单好用的图形界面库。说起图形界面库，你可能会想到TkInter、PyQt、PyGUI等流行的图形界面库，我也曾经尝试使用，一个很直观的感受就是，这太难用了。就去网上搜搜，看看有没有一些demo，拿来改改，结果很少有，当时我就放弃了这些图形库的学习，转而使用了vue+flask的形式以浏览器网页作为程序界面，因为我会这个
  • 50个常见的python毕业设计/课程设计（源码+文档） 冷琴1996 Python系统设计python课程设计开发语言
    计算机课程设计/毕业设计指南，为计算机相关专业毕业生提供源码、数据库安装、远程调试等相关服务，提供功能讲解视频。下面是50个基于python/django/vue的毕业设计/课程设计。1.网上商城系统这是一个基于python+vue开发的商城网站，平台采用B/S结构，后端采用主流的Python语言进行开发，前端采用主流的Vue.js进行开发。整个平台包括前台和后台两个部分。前台功能包括：首页、商品
  • 9种JavaScript数组去重的高阶方法 2501_90226133 javascriptjava算法
    给定一个数组[1,2,2,4,null,null,‘3’,‘abc’,3,5,4,1,2,2,4,null,null,‘3’,‘abc’,3,5,4]去除重复项。letarr=[1,2,2,4,null,null,‘3’,‘abc’,3,5,4,1,2,2,4,null,null,‘3’,‘abc’,3,5,4]1、利用对象的key唯一众所周知，对象的key不可重复，否则后者将覆盖前者。利用该特性
  • Ark-TS 语言：鸿蒙生态的高效开发利器，让我们用大白话说一说 harmonyos-next
    Ark-TS（华为专门为鸿蒙系统——就是华为自己的手机、平板、智能设备操作系统——设计的编程语言，基于TypeScript，一种比普通JavaScript更严格、能减少错误的语言）是鸿蒙应用开发的主力工具。它就像给开发者配备了一套趁手的工具包，让写代码又快又稳。简单来说，Ark-TS有几个厉害的地方：静态类型检查（写代码时必须给变量指定类型，比如数字、文字，这样电脑能在运行前就发现类型错误，避免程
  • HQL之投影查询 归来朝歌 HQLHibernate查询语句投影查询
            在HQL查询中，常常面临这样一个场景，对于多表查询，是要将一个表的对象查出来还是要只需要每个表中的几个字段，最后放在一起显示？ 针对上面的场景，如果需要将一个对象查出来： HQL语句写“from 对象”即可 Session session = HibernateUtil.openSession();
  • Spring整合redis bylijinnan redis
    pom.xml <dependencies> <!-- Spring Data - Redis Library --> <dependency> <groupId>org.springframework.data</groupId> <artifactId>spring-data-redi
  • org.hibernate.NonUniqueResultException: query did not return a unique result: 2 0624chenhong Hibernate
    参考：http://blog.csdn.net/qingfeilee/article/details/7052736 org.hibernate.NonUniqueResultException: query did not return a unique result: 2         在项目中出现了org.hiber
  • android动画效果 不懂事的小屁孩 android动画
    前几天弄alertdialog和popupwindow的时候，用到了android的动画效果，今天专门研究了一下关于android的动画效果，列出来，方便以后使用。 Android 平台提供了两类动画。 一类是Tween动画，就是对场景里的对象不断的进行图像变化来产生动画效果（旋转、平移、放缩和渐变）。 第二类就是 Frame动画，即顺序的播放事先做好的图像，与gif图片原理类似。
  • js delete 删除机理以及它的内存泄露问题的解决方案 换个号韩国红果果 JavaScript
    delete删除属性时只是解除了属性与对象的绑定，故当属性值为一个对象时，删除时会造成内存泄露  （其实还未删除） 举例： var person={name:{firstname:'bob'}} var p=person.name delete person.name p.firstname -->'bob' // 依然可以访问p.firstname，存在内存泄露
  • Oracle将零干预分析加入网络即服务计划 蓝儿唯美 oracle
    由Oracle通信技术部门主导的演示项目并没有在本月较早前法国南斯举行的行业集团TM论坛大会中获得嘉奖。但是，Oracle通信官员解雇致力于打造一个支持零干预分配和编制功能的网络即服务（NaaS）平台，帮助企业以更灵活和更适合云的方式实现通信服务提供商（CSP）的连接产品。这个Oracle主导的项目属于TM Forum Live!活动上展示的Catalyst计划的19个项目之一。Catalyst计
  • spring学习——springmvc（二） a-john springMVC
    Spring MVC提供了非常方便的文件上传功能。 1，配置Spring支持文件上传： DispatcherServlet本身并不知道如何处理multipart的表单数据，需要一个multipart解析器把POST请求的multipart数据中抽取出来，这样DispatcherServlet就能将其传递给我们的控制器了。为了在Spring中注册multipart解析器，需要声明一个实现了Mul
  • POJ-2828-Buy Tickets aijuans ACM_POJ
    POJ-2828-Buy Tickets http://poj.org/problem?id=2828 线段树，逆序插入 #include<iostream>#include<cstdio>#include<cstring>#include<cstdlib>using namespace std;#define N 200010struct
  • Java Ant build.xml详解 asia007 build.xml
    1,什么是antant是构建工具2,什么是构建概念到处可查到，形象来说，你要把代码从某个地方拿来，编译，再拷贝到某个地方去等等操作，当然不仅与此，但是主要用来干这个3,ant的好处跨平台   --因为ant是使用java实现的，所以它跨平台使用简单--与ant的兄弟make比起来语法清晰--同样是和make相比功能强大--ant能做的事情很多，可能你用了很久，你仍然不知道它能有
  • android按钮监听器的四种技术 百合不是茶 androidxml配置监听器实现接口
    android开发中经常会用到各种各样的监听器,android监听器的写法与java又有不同的地方;    1,activity中使用内部类实现接口 ,创建内部类实例  使用add方法  与java类似   创建监听器的实例 myLis lis = new myLis();   使用add方法给按钮添加监听器  
  • 软件架构师不等同于资深程序员 bijian1013 程序员架构师架构设计
            本文的作者Armel Nene是ETAPIX Global公司的首席架构师，他居住在伦敦，他参与过的开源项目包括 Apache Lucene,，Apache Nutch， Liferay 和 Pentaho等。         如今很多的公司
  • TeamForge Wiki Syntax & CollabNet User Information Center sunjing TeamForgeHow doAttachementAnchorWiki Syntax
    the CollabNet user information center http://help.collab.net/   How do I create a new Wiki page? A CollabNet TeamForge project can have any number of Wiki pages. All Wiki pages are linked, and
  • 【Redis四】Redis数据类型 bit1129 redis
    概述 Redis是一个高性能的数据结构服务器，称之为数据结构服务器的原因是，它提供了丰富的数据类型以满足不同的应用场景，本文对Redis的数据类型以及对这些类型可能的操作进行总结。 Redis常用的数据类型包括string、set、list、hash以及sorted set.Redis本身是K/V系统，这里的数据类型指的是value的类型，而不是key的类型，key的类型只有一种即string
  • SSH2整合-附源码 白糖_ eclipsespringtomcatHibernateGoogle
    今天用eclipse终于整合出了struts2+hibernate+spring框架。 我创建的是tomcat项目，需要有tomcat插件。导入项目以后，鼠标右键选择属性，然后再找到“tomcat”项，勾选一下“Is a tomcat project”即可。具体方法见源码里的jsp图片，sql也在源码里。     补充1：项目中部分jar包不是最新版的，可能导
  • [转]开源项目代码的学习方法 braveCS 学习方法
    转自： http://blog.sina.com.cn/s/blog_693458530100lk5m.html http://www.cnblogs.com/west-link/archive/2011/06/07/2074466.html   1）阅读features。以此来搞清楚该项目有哪些特性2）思考。想想如果自己来做有这些features的项目该如何构架3）下载并安装d
  • 编程之美-子数组的最大和（二维） bylijinnan 编程之美
    package beautyOfCoding; import java.util.Arrays; import java.util.Random; public class MaxSubArraySum2 { /** * 编程之美 子数组之和的最大值（二维） */ private static final int ROW = 5; private stat
  • 读书笔记-3 chengxuyuancsdn jquery笔记resultMap配置ibatis一对多配置
    1、resultMap配置 2、ibatis一对多配置 3、jquery笔记 1、resultMap配置 当<select resultMap="topic_data"> <resultMap id="topic_data">必须一一对应。 (1)<resultMap class="tblTopic&q
  • [物理与天文]物理学新进展 comsci
          如果我们必须获得某种地球上没有的矿石,才能够进行某些能量输出装置的设计和建造,而要获得这种矿石,又必须首先进行深空探测,而要进行深空探测,又必须获得这种能量输出装置,这个矛盾的循环,会导致地球联盟在与宇宙文明建立关系的时候,陷入困境       怎么办呢?  
  • Oracle 11g新特性:Automatic Diagnostic Repository daizj oracleADR
    Oracle Database 11g的FDI（Fault Diagnosability Infrastructure）是自动化诊断方面的又一增强。 FDI的一个关键组件是自动诊断库（Automatic Diagnostic Repository-ADR）。 在oracle 11g中，alert文件的信息是以xml的文件格式存在的，另外提供了普通文本格式的alert文件。 这两份log文
  • 简单排序:选择排序 dieslrae 选择排序
    public void selectSort(int[] array){ int select; for(int i=0;i<array.length;i++){ select = i; for(int k=i+1;k<array.leng
  • C语言学习六指针的经典程序，互换两个数字 dcj3sjt126com c
    示例程序，swap_1和swap_2都是错误的，推理从1开始推到2，2没完成，推到3就完成了 # include <stdio.h> void swap_1(int, int); void swap_2(int *, int *); void swap_3(int *, int *); int main(void) { int a = 3; int b =
  • php 5.4中php-fpm 的重启、终止操作命令 dcj3sjt126com PHP
    php 5.4中php-fpm 的重启、终止操作命令: 查看php运行目录命令：which php/usr/bin/php 查看php-fpm进程数：ps aux | grep -c php-fpm 查看运行内存/usr/bin/php  -i|grep mem 重启php-fpm/etc/init.d/php-fpm restart 在phpinfo()输出内容可以看到php
  • 线程同步工具类 shuizhaosi888 同步工具类
    同步工具类包括信号量（Semaphore）、栅栏（barrier）、闭锁（CountDownLatch）   闭锁（CountDownLatch） public class RunMain { public long timeTasks(int nThreads, final Runnable task) throws InterruptedException { fin
  • bleeding edge是什么意思 haojinghua DI
    不止一次，看到很多讲技术的文章里面出现过这个词语。今天终于弄懂了——通过朋友给的浏览软件，上了wiki。  我再一次感到，没有辞典能像WiKi一样，给出这样体贴人心、一清二楚的解释了。为了表达我对WiKi的喜爱，只好在此一一中英对照，给大家上次课。   In computer science, bleeding edge is a term that
  • c中实现utf8和gbk的互转 jimmee ciconvutf8&gbk编码
    #include <iconv.h> #include <stdlib.h> #include <stdio.h> #include <unistd.h> #include <fcntl.h> #include <string.h> #include <sys/stat.h> int code_c
  • 大型分布式网站架构设计与实践 lilin530 应用服务器搜索引擎
    1.大型网站软件系统的特点？ a.高并发，大流量。 b.高可用。 c.海量数据。 d.用户分布广泛，网络情况复杂。 e.安全环境恶劣。 f.需求快速变更，发布频繁。 g.渐进式发展。 2.大型网站架构演化发展历程？ a.初始阶段的网站架构。 应用程序，数据库，文件等所有的资源都在一台服务器上。 b.应用服务器和数据服务器分离。 c.使用缓存改善网站性能。 d.使用应用
  • 在代码中获取Android theme中的attr属性值 OliveExcel androidtheme
    Android的Theme是由各种attr组合而成, 每个attr对应了这个属性的一个引用, 这个引用又可以是各种东西.   在某些情况下, 我们需要获取非自定义的主题下某个属性的内容 (比如拿到系统默认的配色colorAccent), 操作方式举例一则: int defaultColor = 0xFF000000; int[] attrsArray = { andorid.r.
  • 基于Zookeeper的分布式共享锁 roadrunners zookeeper分布式共享锁
    首先，说说我们的场景，订单服务是做成集群的，当两个以上结点同时收到一个相同订单的创建指令，这时并发就产生了，系统就会重复创建订单。等等......场景。这时，分布式共享锁就闪亮登场了。   共享锁在同一个进程中是很容易实现的，但在跨进程或者在不同Server之间就不好实现了。Zookeeper就很容易实现。具体的实现原理官网和其它网站也有翻译，这里就不在赘述了。   官
  • 两个容易被忽略的MySQL知识 tomcat_oracle mysql
    1、varchar(5)可以存储多少个汉字，多少个字母数字？ 　　相信有好多人应该跟我一样，对这个已经很熟悉了，根据经验我们能很快的做出决定，比如说用varchar(200)去存储url等等，但是，即使你用了很多次也很熟悉了，也有可能对上面的问题做出错误的回答。 　　这个问题我查了好多资料，有的人说是可以存储5个字符，2.5个汉字（每个汉字占用两个字节的话），有的人说这个要区分版本，5.0
  • zoj 3827 Information Entropy(水题) 阿尔萨斯 format
    题目链接：zoj 3827 Information Entropy 题目大意：三种底，计算和。 解题思路：调用库函数就可以直接算了，不过要注意Pi = 0的时候，不过它题目里居然也讲了。。。limp→0+plogb(p)=0，因为p是logp的高阶。 #include <cstdio> #include <cstring> #include <cmath&
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他