IT_CREATE
IT_CREATE

十一、VUE基础学习篇（组件化component、components）-全局/局部组件、父组件/子组件、动态数据绑定/数据存放问题

码云实时更新学习demo地址：https://gitee.com/dxl96/vuexuexi

VUE基础篇（组件化component、components）

1、组件化的概念

■人面对复杂问题的处理方式
  口任何一个人处理信息的逻辑能力都是有限的
  口所以,当面对一个非常复杂的问题时,我们不太可能一次性搞定一大堆的内容。
  口但是,我们人有一种天生的能力,就是将问题进行拆解。
  口如果将一个复杂的问题,拆分成很多个可以处理的小问题,再将其放在整体当中,你会发现大的问题也会迎刃而解。
■组件化也是类似的思想
  口如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展。
  口但如果，我们讲一个页面拆分成一个个小的功能块每个功能块完成属于自己这部分独立的功能,那么之后整个页面的管理和维护就变得非常容易了。

■组件化是Vue.js中的重要思想
  口它提供了一种抽象,让我们可以开发出一个个独立可复用的小组件来构造我们的应用。
  口任何的应用都会被抽象成一颗组件树。
■组件化思想的应用:
  口有了组件化的思想,我们在之后的开发中就要充分的利用它。
  口尽可能的将页面拆分成一个个小的、可复用的组件。
  口这样让我们的代码更加方便组织和管理,并且扩展性也更强。

2、组件的基本使用

■组件的使用分成三个步骤
  口创建组件构造器
  口注册组件
  口使用组件。
■我们来看看通过代码如何注册组件
■查看运行结果:
  口和直接使用一个div看起来并没有什么区别。
  口但是我们可以设想,如果很多地方都要显示这样的信息,我们是不是就可以直接使用来完成呢？

注：在模板中的标签内容，如果是多个标签内容，必须在标签的最外层包裹一个父类标签，所有的标签都必须放在父类标签中，否则报错 ，不管是在html中还是js中定义绑定标签内容的方式都得遵循多标签内容外部必须包裹一个父类标签，也就是说做外层只能有一个标签作为根标签。
可以看到下面的所有代码组件关联绑定的模板外层都包裹着

这个标签，因为
内部的内容也就是多标签内容了，所以我们要用
包裹起来作为父元素(根元素)，不管外层是什么类型标签，即使是

、等等其他标签作为外部的根标签（父标签）都行


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>组件的基本使用title>
head>
<body>






<div id="app">

  
  <my-div>my-div>
div>

<script src="../js/vue.js">script>
<script>

  // 1、创建组件构造器，extend方法，传入一个对象，对象有个template属性，它的值就是我们要用的模板内容
  const myDiv = Vue.extend({
    template: `
       

         
我是标题

         
我是内容一

         
我是内容二

       
`
  })

  // 2、全局注册组件，component方法，传入两个值，第一个参数为组件的名称，第二个参数为构造的组件对象
  Vue.component('myDiv', myDiv)

  const app = new Vue({
    el: "#app",
    data: {}
  });
script>
body>
html>

效果
十一、VUE基础学习篇（组件化component、components）-全局/局部组件、父组件/子组件、动态数据绑定/数据存放问题_第1张图片

3、全局组件和局部组件

全局组件是可以在所有的vue对象实例对应的标签内使用的，而局部组件只能在局部组件所在的vue对象实例对应的标签中使用
全局组件注册：
Vue.component(组件名, 组件对象)

  // 2、全局注册组件，component方法，传入两个值，第一个参数为组件的名称，第二个参数为构造的组件对象
  Vue.component('myDiv', myDiv)

局部组件注册：
components: {组件名1:组件对象,组件名2:组件对象2…}

  const app2 = new Vue({
    el: "#app2",
    data: {},
    //■【局部组件的注册方式，只在本实例中才会生效】
    // 2、注册组件，components属性，传入对象，对象的属性为组件的名称，值为构造的组件
    components: {
      myDiv2: myDiv
    }
  });

代码示例：


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>全局组件和局部组件title>
head>
<body>
<div id="app">
  
  
  <span style="color: red">全局组件span>
  <my-div>my-div>
  <my-div>my-div>

  
  <span style="color: red">my-div2局部组件不在非注册vue实例中显示span>
  <my-div2>my-div2>
div>
<hr>
<div id="app2">
  
  
  <span style="color: red">全局组件span>
  <my-div>my-div>

  
  <span style="color: red">my-div2局部组件显示(在注册vue实例对象中)span>
  <my-div2>my-div2>
div>

<script src="../js/vue.js">script>
<script>

  // ■【全局组件的方式，可以在多个vue实例使用】
  // 1、创建组件构造器，extend方法，传入一个对象，对象有个template属性，它的值就是我们要用的模板内容
  const myDiv = Vue.extend({
    template: `
       

         
我是标题

         
我是内容一

         
我是内容二

       
`
  })

  // 2、全局注册组件，component方法，传入两个值，第一个参数为组件的名称，第二个参数为构造的组件对象
  Vue.component('myDiv', myDiv)

  // -----------------------------------------------------------------------------------------------


  // vue实例1
  const app = new Vue({
    el: "#app",
    data: {}
  });

  // vue实例2
  const app2 = new Vue({
    el: "#app2",
    data: {},
    //■【局部组件的注册方式，只在本实例中才会生效】
    // 2、注册组件，components属性，传入对象，对象的属性为组件的名称，值为构造的组件
    components: {
      myDiv2: myDiv
    }
  });
script>
body>
html>

效果
十一、VUE基础学习篇（组件化component、components）-全局/局部组件、父组件/子组件、动态数据绑定/数据存放问题_第2张图片

3、父子组件

所谓父子组件就是组件的嵌套，假设：组件2嵌套组件1（也就是组件2中包含组件1），父组件就是组件1，子组件就是组件2


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>父组件和子组件title>
head>
<body>
<div id="app">

  
  
  <my-div2>my-div2>

  
  <my-div1>my-div1>
div>

<script src="../js/vue.js">script>
<script>
  // 1、创建组件构造器,创建一个组件对象
  
  // 【子组件】
  // 创建组件构造器，extend方法，传入一个对象，对象有个template属性，它的值就是我们要用的模板内容
  const myDiv1 = Vue.extend({
    template: `
       

         
我是标题1

         
我是内容1

       
`
  })

  // 【父组件】
  // 嵌套子组件，extend方法传入对象，对象里面的components属性，也是可以将另一个组件对象添加进该组件的，components对应对象的属性名称是组件的名称，属性值是已经创建的组件对象
  // 这里的子组件是上面创建的组件对象
  const myDiv2 = Vue.extend({
    template: `
      

        
我是标题2

        
我是内容2

        
      
`,
    components: {
      myDiv1: myDiv1
    }
  })

  /*------------------------------------------------------------------------------------------------------------------------*/
  
  // root组件
  const app = new Vue({
    el: "#app",
    data: {},
    //■【局部组件的注册方式，只在本实例中才会生效】
    // 2、注册组件，components属性，传入对象，对象的属性为组件的名称，值为构造的组件
    //这里注册组件2即可，组件1已经注册进了组件2，所以使用组件2时就是组件2嵌套组件1的样子
    components: {
      myDiv2: myDiv2
    }
  });
script>
body>
html>

效果
十一、VUE基础学习篇（组件化component、components）-全局/局部组件、父组件/子组件、动态数据绑定/数据存放问题_第3张图片

4、组件语法糖

●在之前注册组件的方式，可能会有些繁琐。
  口Vue为了简化这个过程,提供了注册的语法糖。
  口主要是省去了调用Vue.extend()的步骤,也就是构造组件对象这个步骤，而是可以直接使用一个组件对象来代替。说的再直白点就是将组件的对象的构造和注册合而为一了，在注册组件时，直接传入组件对象即可
  口全局组件对象和局部组件对象的结构是一样的


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>组件语法糖title>
head>
<body>

<div id="app">
  
  <my-div1>my-div1>

  <my-div2>my-div2>
div>

<script src="../js/vue.js">script>
<script>

  /*
    ●在之前注册组件的方式，可能会有些繁琐。
      口Vue为了简化这个过程,提供了注册的语法糖。
      口主要是省去了调用Vue.extend()的步骤,而是可以直接使用一个组件对象来代替。
      口全局组件对象和局部组件对象的结构是一样的
   */

  // ■【注册全局组件的语法糖】
  // 1、全局注册组件，component方法，传入两个值，第一个参数为组件的名称，第二个参数为组件对象，
  // 组件对象有一个template属性，属性值为模板信息
  Vue.component('myDiv1', {
    template: `
            

              
我是标题1

              
我是内容1

            

            `
  })

  //■【注册局部组件的语法糖】
  const app = new Vue({
    el: "#app",
    data: {},
    //■【局部组件的注册方式，只在本实例中才会生效】
    // 1、注册组件，components属性，传入对象，对象的属性为组件的名称，值为构造的组件
    components: {
      //这里相当于将组件的创建与注册整合成了一个方式，注册组件时可以直接绑定对象，对象有个template属性，属性值就是我们的模板信息
      myDiv2: {
        template: `
            

              
我是标题2

              
我是内容2

            

            `
      }
    }
  });
script>
body>
html>

效果
十一、VUE基础学习篇（组件化component、components）-全局/局部组件、父组件/子组件、动态数据绑定/数据存放问题_第4张图片

4、组件对象与组件注册的分离

■刚才,我们通过语法糖简化了Vue组件的注册过程,另外还有一个地方的写法比较麻烦,就是template模块写法
■如果我们能将其中的HTML分离出来写,然后挂载到对应的组件上,必然结构会变得非常清晰。
■Vue提供了两种方案来定义HTML模块内容:
  口使用

你可能感兴趣的:(Vue学习)

  • Javaweb学习之Vue模板语法（三） 不要数手指啦 vue.js学习前端
    目录学习资料前情回顾本期介绍（vue模板语法）文本插值Vue的Attribute绑定使用JavaScript表达式综合实例代码：学习资料Vue.js-渐进式JavaScript框架|Vue.js(vuejs.org)前情回顾项目的创建大家可以看这篇文章Vue学习之项目的创建-CSDN博客本期介绍（vue模板语法）首先，找到我们编写代码的地方找到自己项目的src文件夹，打开之后点击component
  • 如何学习前端炙手可热的Vue？Vue学习路线图详解！ 真·skysys 大前端和跨平台技术vue
    总结vue文档从0.11、0.12、1.0、2.x到3.0beta本文章长期更新，持续维护限于博主水平，如有错漏还望各位不吝赐教文章内容可能有争议，欢迎大家理性交流与探讨What’svue：Vue.js是什么？定位设计目标（初心）：通过尽可能简单的API提供响应数据绑定和可组合视图组件灵感来源（创意）：AngularJS，KnockoutJS，Ractive.js和Rivets.js。在简单性和功
  • Vue学习之路04----响应式基础 利刃之灵 #Vue基础vue.js前端
    响应式基础ref()（基本类型的响应式数据）在组合式API中，推荐使用ref()函数来声明响应式状态，ref能定义基本类型的，也能定义对象类型的：import{ref}from'vue'letcount=ref(0)ref()接收参数，并将其包裹在一个带有.value属性的ref对象中返回，在模版中则不需要：{{count}}按钮1按钮2import{ref}from"vue";exportdef
  • vue学习笔记-自用 陌上烟雨寒 vuevuevue.jsjavascriptcsshtml
    /*eslint-disableno-new*/newVue({el:'#app',router,components:{App},template:''})el:'#app',绑定根视图components:{App},加载组件template:''使用组件模板语法插值1.文本数据绑定最常见的形式就是使用“Mustache”语法（双大括号）的文本插值：Message:{{msg}}2.纯HTML
  • VUE学习之------Vue.nextTick 夜跑者 VUE学习
    在项目中最近遇到一种情况：在一个页面中点击快捷键会调出另一个页面，这个页面一个元素是输入框，一个元素是button。刚调出这个页面的时候焦点要在输入框中，这样用户就可以直接进行输入了。从这个需求来看，点击快捷键的时候用v-show=true来进行显示，然后把焦点focus到输入框上，但一直给输入框加不上焦点。之前从网上搜索了一下用Vue.nextTick来进行上焦点，但没有成功。另外同事最后也是用
  • Vue学习之---nextTick 鸡吃丸子 vue.js学习前端
    前言：目前来说，nextTick我们遇到的比较少，至少对我来说是这样的，但是有一些聪明的小朋友早早就注意到这个知识点了。nextTick是前端开发（尤其是Vue生态）中的核心知识点，原理上跟Vue的异步更新有密切关系，对于面试者考察很有区分度，如果能回答的很好，对面试也是很有帮助的，所以我们有必要花费时间来学习一下。一、nextTick是什么我们来看看官方的定义：在下次DOM更新循环结束之后执行延
  • day02 vue学习日记 叫我小神龙� vue学习cssjavascriptvue.js前端html
    day02Vue常用特性表单基本操作获取单选框中的值通过v-model男女newVue({data:{//默认会让当前的value值为2的单选框选中gender:2,},})获取复选框中的值通过v-model和获取单选框中的值一样复选框checkbox这种的组合时data中的hobby我们要定义成数组否则无法实现多选爱好：篮球唱歌写代码newVue({data:{//默认会让当前的value值为2
  • vue组件中插入图片 风兮w 前端vue
    最近在Vue学习交流群里面发现很多小伙伴在想要在vue中显示图片，但是把图片写在data里面作为变量传到模板中的时候却发现图片出不了，以为是图片路径的问题，查了半天还是出不来。解决方法方案1：使用require将图片进入，写法如下logo:require('../asset/admin/logo.png')1然后再模板中：1就可以了。方案2：把图片放在static文件夹中，如下然后再data里面直
  • Vue学习笔记 - 插件 WDeLiang Vuevue.js学习笔记
    介绍插件(Plugins)是一种能为Vue添加全局功能的工具代码import{createApp}from'vue'constapp=createApp({})app.use(myPlugin,{/*可选的选项*/})一个插件可以是一个拥有install()方法的对象，也可以直接是一个安装函数本身。安装函数会接收到安装它的应用实例和传递给app.use()的额外选项作为参数：对象的写法constm
  • vue学习笔记整理 带上耳机世界与我无关 计算机基础个人笔记vue.js学习前端
    文章目录一、前端核心分析1.1、概述1.2、前端三要素1.3、结构层（HTML）1.4、表现层（CSS）1.5、行为层（JavaScript）二、前端发展史2.1、UI框架2.2、JavaScript构建工具2.3、三端同一2.4、后端技术2.5、主流前端框架三、了解前后分离的演变史3.1、后端为主的MVC时代3.2、基于AJAX带来的SPA时代3.3、前端为主的MV*时代3.4、NodeJS带来
  • vue学习笔记 苜小夕 vue.js学习笔记
    应用创建每个Vue应用都是通过createApp函数创建一个新的应用实例：import{createApp}from'vue'//从一个单文件组件中导入根组件importAppfrom'./App.vue'constapp=createApp(App)但应用实例必须在调用了.mount()方法后才会渲染出来。该方法接收一个“容器”参数，可以是一个实际的DOM元素或是一个CSS选择器字符串：app.
  • Vue学习笔记集--父子通讯 Three～stone vue.js学习笔记
    父子通讯在Vue3中，父子组件通信的核心方式与Vue2类似，但CompositionAPI和语法带来了一些新的特性。以下是Vue3父子通信的完整指南：Props向下传递数据（父→子）1.父组件传递数据import{ref}from'vue';importChildfrom'./Child.vue';constparentTitle=ref('父组件标题');constcount=ref(0);2.
  • Vue学习笔记集--生命周期 Three～stone vue.js学习笔记
    生命周期钩子什么是生命周期？生命周期：指的是一个Vue组件从创建→挂载→更新→销毁的完整过程。类比人的一生：出生（组件创建）→上学（挂载到页面）→工作变化（数据更新）→退休（组件销毁）。每个阶段都有特定的任务需要处理（如初始化数据、操作DOM、清理资源等），这就是生命周期的意义。什么是钩子函数？钩子函数（LifecycleHooks）是Vue在生命周期不同阶段自动调用的函数。开发者可以在这些函数中
  • Vue学习笔记集--pnpm包管理器 Three～stone vue.js学习笔记
    pnpm包管理器官网：https://www.pnpm.cn/pnpm简介pnpm全称是performantnpm，意思为“高性能的npm”，它通过硬链接和符号链接共享依赖，提升安装速度并减少存储占用。功能特点节省磁盘空间：依赖包被存放在一个统一的位置，多个项目共享同一份依赖副本，节省大量磁盘空间。安装速度快：安装速度比npm快了近2倍。支持Monorepo：可以使用pnpm-workspace.
  • Vue学习记录之二十 postcss自定义插件及Unocss的使用 LvManBa vue.js学习postcss
    一、实例1使用postCss自定义px转vw插件编写css插件:一、在项目根目录下建立一个plugins文件夹，然后建立一个postcss-px-to-viewport.ts文件。//vite内置了postCss无需安装import{Plugin}from'postcss'//定义一个变量constOptions={viewportWidth:375,//UI设计稿上的宽度，这里我们默认的视口宽度
  • vue学习笔记 export ‘default‘ (imported as ‘Vue‘) was not found in ‘vue‘ xiaoweiwei99 前端htmlvue.js学习javascript
    版本：vue3vue/cli5.0.0做写store时报错importVuefrom"vue";importVuexfrom"vuex";importgettersfrom"./getters";importuserfrom"./modules/user";Vue.use(Vuex);conststore=newVuex.Store({modules:{user,},getters,});expo
  • Vue学习教程-16html标签元素绑定事件 番茄番茄君 vue.js学习前端
    文章目录前言一、表单数据绑定事件二、多媒体元素绑定1.图片img和视频元素video三、容器元素绑定事件前言在Vue中，你可以通过v-on指令（或在Vue2.x中简写为@）来绑定事件。这种方式允许你监听DOM事件，并在触发时执行一些JavaScript代码。常见的元素主要是表单数据元素、多媒体元素和容器元素。一、表单数据绑定事件常见的表单数据元素1.文本输入框元素3.多选框元素4.下拉框元素5.按
  • Vue学习：22.Vue组件库-Vant 星仔如雨 Vue2vue.js学习前端vant
    Vue组件库是一系列预先构建好的、可复用的UI组件集合，它们设计用于加速Vue.js应用程序的开发过程。这些组件通常遵循一定的设计规范，提供统一的外观和交互体验，让开发者能够快速搭建用户界面。组件库举例Vant:专注于移动端的轻量级UI库，提供丰富的基础组件和业务组件，适用于快速构建高性能的移动端页面。ElementUI:针对桌面端Web应用的Vue组件库，包含丰富的表单元素、布局组件、导航组件等
  • Vue学习教程-14内置指令 番茄番茄君 vue.js学习前端
    文章目录前言一、v-text指令二、v-html指令三、v-cloak指令四、v-once指令五、v-pre指令六、其他指令前言Vue.js提供了许多内置指令（Directives），这些指令用于在模板中添加特殊功能。内置指令以v-前缀开始。v-text:更新元素的textContent更新元素的textContent。例如：v-html:更新元素的innerHTML更新元素的innerHTML。
  • Vue学习教程-11数组变化监测 番茄番茄君 vue.js学习javascript
    文章目录前言一、vue侦听响应数组变更方法二、使用Vue.set或者this.$set三、替换数组总结前言在Vue中，数组变化监测是其响应式系统的一个重要特性。Vue2.x版本中，当使用Vue.set或者this.$set，或者在初始化时就声明好数组的每个元素或者调用数组方法，可以确保数组的变更能够被Vue检测到并触发视图的更新。然而，在某些情况下，直接通过索引修改数组元素，例如array[ind
  • Vue学习教程-04数据代理 番茄番茄君 vue.js学习javascript
    文章目录一、什么是数据代理二、数据代理过程三、vue数据代理应用1.数据代理代码2.代理底层逻辑总结一、什么是数据代理数据代理是一种技术，通过代理、拦截对象属性及方法的访问请求，实现与该对象的交互。在Vue中，数据代理是指在Vue实例化一个组件时，Vue会将组件中的data属性中的数据转化为getter/setter，并将这些getter/setter注册到Vue的响应式系统中，在Vue实例中访问
  • Vue学习笔记3 Jyywww121 vue.js学习笔记
    Vue学习笔记一、单页应用程序&路由介绍1、介绍单页应用程序：所有的功能都在一个页面上实现优点：按需更新性能高，开发效率高，用户体验好缺点：学习成本高，首屏加载慢，不利于SEO应用场景：系统类网站、内部网站、文档类网站、移动端站点路由介绍生活中的路由：设备和ip的映射关系Vue中的路由：路径和组件的映射关系2、路由的基本应用VueRouter的介绍：作用：修改地址栏路径时，切换显示匹配的组件路由的
  • Vue学习笔记--＞＞基础篇 丑小鸭变黑天鹅 笔记vue
    Vue学习笔记一、Vue核心1、Vue的基本认识1、官网2、介绍3、特点4、与其它前端JS框架的关联5、vue扩展插件2、Vue的基本使用3、理解Vue的MVVM4、模板语法5、计算属性基本使用6、强制绑定class和style7、条件渲染8、列表渲染维护状态数组更新检测9、列表的搜索与排序10、事件处理11、表单数据的自动收集12、Vue生命周期13、过渡和动画1、css过渡2、css动画3、自
  • Vue学习笔记-条件渲染和列表渲染 printf_________ vue.js学习前端
    条件渲染：v-if，可以搭配v-else-if,v-else但是必须放在一起//可以移除元素v-show//可以隐藏元素v-if可以搭配template使用，用template将多个元素包裹起来列表渲染：
  • Vue学习第31天——编程式路由导航5种方法详解及案例练习（与声明式路由导航对比） 离奇6厘米 vue学习javascriptvue
    目录一、编程式路由导航1、概念2、理解3、用法二、编程式路由导航的5种方法1、push2、replace3、forward4、back5、go三、案例练习四、编程式路由导航与声明式路由导航对比一、编程式路由导航1、概念除了使用创建a标签来定义导航链接，我们还可以借助router的实例方法，通过编写代码来实现。2、理解不借助实现路由跳转3、用法在vue组件中，可以通过$router访问路由实例，因此
  • Vue学习笔记 二 涔溪 vuevue.js学习笔记
    4、Vue基础扩展4.1插槽组件的最大特性就是复用性，而用好插槽能大大提高组件的可复用能力在Vue中插槽是很重要的存在，通过插槽，我们可以把父组件中指定的DOM作用到子组件的任意位置，后面我们坐项目用到的组件库比如element-ui,vant-ui都频繁用到的插槽，Vue的插槽主要有匿名插槽，具名插槽，作用域插槽三种，下面我们分别来认识一下他们。4.1.1匿名插槽★★★★故名思义就是没有名字的插
  • 基于vue.js+element-ui组件开发的博客blog详细步骤 perfect-code-hzy 前端工程师学习笔记vue.jsjavascript
    vue学习笔记一、前端项目初始化步骤1、通过vuecli3创建项目2、配置vue路由3、配置element-ui组件库4、配置axios库5、初始化git远程仓库6、将本地项目托管到GitHub或码云上二、接口API1、调试工具三、登录和退出功能完成登录组件提交到git--合并分支一、前端项目初始化步骤1、通过vuecli3创建项目通过vueui命令进行可视化创建项目选择创建的路径->自定义配置项
  • vue学习总结
    一、transition和transition-group的区别：transition：针对的是一个元素，比如v-if,v-showtransition-group：针对是多个元素，比如使用v-for二、transition动画过渡的时候什么时候生效？1.v-if2.v-show3.动态组件4.组建根节点三、vue创建项目有两种方法：1.vueinitwebpack项目名称2.vuecreate项
  • vue学习笔记——关于对Vue3 ref(), toRef(), toRefs(), unref(), isRef(), reactive()方法的理解。 chen_sir_sh vue学习笔记javascript前端vue
    VUE3出现了很多新的API，下面是自己的一些理解进行的总结。欢迎大家一起交流补充。ref()使用ref创建一个数据类型，ref有value这个属性constname1={age:"14",name:"bob1"};constname2=ref({name:"bob2"});//使用ref创建一个数据类型相对于reactive，ref有value属性name2.value="bob3"consol
  • 第五天Vue学习 余心不忍 vue.js学习elementui
    v-for的相关使用1.v-for的基本使用循环遍历，值，索引值，key都可以一般需要使用索引值。{{index+":"+item}}index表示索引，item表示当前遍历的元素。{{item}}{{key+'----'+i}}varapp=newVue({el:'#app',data:{books:['化学','物理','英语','数学','语文'],person:{name:'张三',age
  • 矩阵求逆（JAVA）初等行变换 qiuwanchi 矩阵求逆（JAVA）
    package gaodai.matrix; import gaodai.determinant.DeterminantCalculation; import java.util.ArrayList; import java.util.List; import java.util.Scanner; /** * 矩阵求逆(初等行变换) * @author 邱万迟 *
  • JDK timer antlove javajdkschedulecodetimer
    1.java.util.Timer.schedule(TimerTask task, long delay)：多长时间（毫秒）后执行任务 2.java.util.Timer.schedule(TimerTask task, Date time)：设定某个时间执行任务 3.java.util.Timer.schedule(TimerTask task, long delay,longperiod
  • JVM调优总结 -Xms -Xmx -Xmn -Xss coder_xpf jvm应用服务器
    堆大小设置JVM 中最大堆大小有三方面限制：相关操作系统的数据模型（32-bt还是64-bit）限制；系统的可用虚拟内存限制；系统的可用物理内存限制。32位系统下，一般限制在1.5G~2G；64为操作系统对内存无限制。我在Windows Server 2003 系统，3.5G物理内存，JDK5.0下测试，最大可设置为1478m。 典型设置： java -Xmx
  • JDBC连接数据库 Array_06 jdbc
    package Util; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; public class JDBCUtil { //完
  • Unsupported major.minor version 51.0（jdk版本错误） oloz java
    java.lang.UnsupportedClassVersionError: cn/support/cache/CacheType : Unsupported major.minor version 51.0 (unable to load class cn.support.cache.CacheType) at org.apache.catalina.loader.WebappClassL
  • 用多个线程处理1个List集合 362217990 多线程threadlist集合
      昨天发了一个提问，启动5个线程将一个List中的内容，然后将5个线程的内容拼接起来，由于时间比较急迫，自己就写了一个Demo，希望对菜鸟有参考意义。。 import java.util.ArrayList; import java.util.List; import java.util.concurrent.CountDownLatch; public c
  • JSP简单访问数据库 香水浓 sqlmysqljsp
    学习使用javaBean，代码很烂，仅为留个脚印 public class DBHelper { private String driverName; private String url; private String user; private String password; private Connection connection; privat
  • Flex4中使用组件添加柱状图、饼状图等图表 AdyZhang Flex
    1.添加一个最简单的柱状图 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <?xml version= "1.0"&n
  • Android 5.0 - ProgressBar 进度条无法展示到按钮的前面 aijuans android
    在低于SDK < 21 的版本中，ProgressBar 可以展示到按钮前面，并且为之在按钮的中间，但是切换到android 5.0后进度条ProgressBar 展示顺序变化了，按钮再前面，ProgressBar 在后面了我的xml配置文件如下：   [html]  view plain copy   <RelativeLa
  • 查询汇总的sql baalwolf sql
    select   list.listname, list.createtime,listcount from dream_list as list ,   (select listid,count(listid) as listcount  from dream_list_user  group by listid  order by count(
  • Linux du命令和df命令区别 BigBird2012 linux
            1，两者区别             du，disk usage,是通过搜索文件来计算每个文件的大小然后累加，du能看到的文件只是一些当前存在的，没有被删除的。他计算的大小就是当前他认为存在的所有文件大小的累加和。        
  • AngularJS中的$apply，用还是不用？ bijian1013 JavaScriptAngularJS$apply
            在AngularJS开发中，何时应该调用$scope.$apply()，何时不应该调用。下面我们透彻地解释这个问题。         但是首先，让我们把$apply转换成一种简化的形式。         scope.$apply就像一个懒惰的工人。它需要按照命
  • [Zookeeper学习笔记十]Zookeeper源代码分析之ClientCnxn数据序列化和反序列化 bit1129 zookeeper
    ClientCnxn是Zookeeper客户端和Zookeeper服务器端进行通信和事件通知处理的主要类，它内部包含两个类，1. SendThread 2. EventThread， SendThread负责客户端和服务器端的数据通信，也包括事件信息的传输，EventThread主要在客户端回调注册的Watchers进行通知处理   ClientCnxn构造方法   &
  • 【Java命令一】jmap bit1129 Java命令
    jmap命令的用法：   [hadoop@hadoop sbin]$ jmap Usage: jmap [option] <pid> (to connect to running process) jmap [option] <executable <core> (to connect to a
  • Apache 服务器安全防护及实战 ronin47
    此文转自IBM. Apache 服务简介 Web 服务器也称为 WWW 服务器或 HTTP 服务器 (HTTP Server)，它是 Internet 上最常见也是使用最频繁的服务器之一，Web 服务器能够为用户提供网页浏览、论坛访问等等服务。 由于用户在通过 Web 浏览器访问信息资源的过程中，无须再关心一些技术性的细节，而且界面非常友好，因而 Web 在 Internet 上一推出就得到
  • unity 3d实例化位置出现布置？ brotherlamp unity教程unityunity资料unity视频unity自学
    问：unity 3d实例化位置出现布置？ 答：实例化的同时就可以指定被实例化的物体的位置,即 position  Instantiate (original : Object, position : Vector3, rotation : Quaternion) : Object 这样你不需要再用Transform.Position了,   如果你省略了第二个参数(
  • 《重构，改善现有代码的设计》第八章 Duplicate Observed Data bylijinnan java重构
    import java.awt.Color; import java.awt.Container; import java.awt.FlowLayout; import java.awt.Label; import java.awt.TextField; import java.awt.event.FocusAdapter; import java.awt.event.FocusE
  • struts2更改struts.xml配置目录 chiangfai struts.xml
    struts2默认是读取classes目录下的配置文件，要更改配置文件目录，比如放在WEB-INF下，路径应该写成../struts.xml(非/WEB-INF/struts.xml) web.xml文件修改如下：   <filter> <filter-name>struts2</filter-name> <filter-class&g
  • redis做缓存时的一点优化 chenchao051 redishadooppipeline
            最近集群上有个job，其中需要短时间内频繁访问缓存，大概7亿多次。我这边的缓存是使用redis来做的，问题就来了。       首先，redis中存的是普通kv，没有考虑使用hash等解结构，那么以为着这个job需要访问7亿多次redis，导致效率低，且出现很多redi
  • mysql导出数据不输出标题行 daizj mysql数据导出去掉第一行去掉标题
    当想使用数据库中的某些数据，想将其导入到文件中，而想去掉第一行的标题是可以加上-N参数 如通过下面命令导出数据： mysql -uuserName -ppasswd -hhost -Pport -Ddatabase -e " select * from tableName"  > exportResult.txt 结果为： studentid
  • phpexcel导出excel表简单入门示例 dcj3sjt126com PHPExcelphpexcel
    先下载PHPEXCEL类文件，放在class目录下面，然后新建一个index.php文件，内容如下 <?php error_reporting(E_ALL); ini_set('display_errors', TRUE); ini_set('display_startup_errors', TRUE);   if (PHP_SAPI == 'cli') die('
  • 爱情格言 dcj3sjt126com 格言
     1) I love you not because of who you are, but because of who I am when I am with you. 　　 我爱你，不是因为你是一个怎样的人，而是因为我喜欢与你在一起时的感觉。 　　2) No man or woman is worth your tears, and the one who is, won‘t
  • 转 Activity 详解——Activity文档翻译 e200702084 androidUIsqlite配置管理网络应用
    activity 展现在用户面前的经常是全屏窗口，你也可以将 activity 作为浮动窗口来使用（使用设置了 windowIsFloating 的主题），或者嵌入到其他的 activity （使用 ActivityGroup ）中。 当用户离开 activity 时你可以在 onPause() 进行相应的操作 。更重要的是，用户做的任何改变都应该在该点上提交 ( 经常提交到 ContentPro
  • win7安装MongoDB服务 geeksun mongodb
    1.  下载MongoDB的windows版本：mongodb-win32-x86_64-2008plus-ssl-3.0.4.zip，Linux版本也在这里下载，下载地址： http://www.mongodb.org/downloads   2.  解压MongoDB在D:\server\mongodb, 在D:\server\mongodb下创建d
  • Javascript魔法方法:__defineGetter__,__defineSetter__ hongtoushizi js
    转载自： http://www.blackglory.me/javascript-magic-method-definegetter-definesetter/ 在javascript的类中,可以用defineGetter和defineSetter_控制成员变量的Get和Set行为 例如,在一个图书类中,我们自动为Book加上书名符号: function Book(name){
  • 错误的日期格式可能导致走nginx proxy cache时不能进行304响应 jinnianshilongnian cache
    昨天在整合某些系统的nginx配置时，出现了当使用nginx cache时无法返回304响应的情况，出问题的响应头： Content-Type:text/html; charset=gb2312 Date:Mon, 05 Jan 2015 01:58:05 GMT Expires:Mon , 05 Jan 15 02:03:00 GMT Last-Modified:Mon, 05
  • 数据源架构模式之行数据入口 home198979 PHP架构行数据入口
    注：看不懂的请勿踩，此文章非针对java，java爱好者可直接略过。   一、概念 行数据入口（Row Data Gateway）：充当数据源中单条记录入口的对象，每行一个实例。   二、简单实现行数据入口 为了方便理解，还是先简单实现： <?php /** * 行数据入口类 */ class OrderGateway { /*定义元数
  • Linux各个目录的作用及内容 pda158 linux脚本
    1）根目录“/” 　　根目录位于目录结构的最顶层，用斜线（/）表示，类似于 Windows 操作系统的“C:\“，包含Fedora操作系统中所有的目录和文件。 　　2）/bin 　　/bin 　　目录又称为二进制目录，包含了那些供系统管理员和普通用户使用的重要 linux命令的二进制映像。该目录存放的内容包括各种可执行文件，还有某些可执行文件的符号连接。常用的命令有：cp、d
  • ubuntu12.04上编译openjdk7 ol_beta HotSpotjvmjdkOpenJDK
    获取源码 从openjdk代码仓库获取(比较慢) 安装mercurial Mercurial是一个版本管理工具。 sudo apt-get install mercurial 将以下内容添加到$HOME/.hgrc文件中，如果没有则自己创建一个： [extensions] forest=/home/lichengwu/hgforest-crew/forest.py fe
  • 将数据库字段转换成设计文档所需的字段 vipbooks 设计模式工作正则表达式
            哈哈，出差这么久终于回来了，回家的感觉真好！         PowerDesigner的物理数据库一出来，设计文档中要改的字段就多得不计其数，如果要把PowerDesigner中的字段一个个Copy到设计文档中，那将会是一件非常痛苦的事情。