Vue基础学习笔记Day06_动态组件_插槽_自定义指令

今日目标:

1. 能够了解组件进阶知识
2. 能够掌握自定义指令创建和使用

---

学习内容：

学习目录:

1. 组件进阶
2. 自定义指令
3. 今日总结
4. 面试题

知识点自测

• 组件创建, 注册和使用 - 伸手就来特别熟练
• 指令的作用

1. 组件进阶

1.0 组件进阶 - 动态组件

目标: 多个组件使用同一个挂载点，并动态切换，这就是动态组件

• 需求: 完成一个注册功能页面, 2个按钮切换, 一个填写注册信息, 一个填写用户简介信息

1. 准备被切换的 - UserName.vue / UserInfo.vue 2个组件

#src/components/01/UserInfo.vue
<template>
  <div>
      <div>
          <span>人生格言:</span>
          <input type="text">
      </div>
      <div>
          <span>个人简介:</span>
          <textarea></textarea>
      </div>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

#src/components/01/UserName.vue
<template>
  <div>
      <div>
          <span>用户名:</span>
          <input type="text">
      </div>
      <div>
          <span>密码:</span>
          <input type="password">
      </div>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

2. 引入到01_UseDynamic.vue注册
3. 准备变量来承载要显示的"组件名"
4. 设置挂载点, 使用is属性来设置要显示哪个组件
5. 点击按钮 – 修改comName变量里的"组件名"

#src/views/01_UseDynamic.vue ,这里的vue放到views中而不是components中，只是为了方便大家查阅代码
<template>
  <div>
      <button @click="comName = 'UserName'">账号密码填写</button>
      <button @click="comName = 'UserInfo'">个人信息填写</button>

      <p>下面显示注册组件-动态切换:</p>
      <div style="border: 1px solid red;">
          //PS： 如果comName是UserName，则显示UserName组件，反之则显示UserInfo
          <component :is="comName"></component>
      </div>
  </div>
</template>

<script>
// 目标: 动态组件 - 切换组件显示
// 场景: 同一个挂载点要切换 不同组件 显示
// 1. 创建要被切换的组件 - 标签+样式
// 2. 引入到要展示的vue文件内, 注册
// 3. 变量-承载要显示的组件名
// 4. 设置挂载点<component :is="变量"></component>
// 5. 点击按钮-切换comName的值为要显示的组件名

import UserName from '../components/01/UserName'
import UserInfo from '../components/01/UserInfo'
export default {
    data(){
        return {
            comName: "UserName"
        }
    },
    components: {
        UserName,
        UserInfo
    }
}
</script>

在App.vue - 引入01_UseDynamic.vue并使用显示

总结: vue内置component组件, 配合is属性, 设置要显示的组件名字

1. 什么是动态组件?
   1. 在同一个挂载点, 可以切换显示不同组件
2. 如何使用动态组件?
   1. vue内置的component组件, 配合is属性
3. 如何切换?
   1. 改变is属性的值, 为要显示的组件名即可

1.1 组件进阶 - 组件缓存

目标: 组件切换会导致组件被频繁销毁和重新创建, 性能不高

• 使用Vue内置的keep-alive组件, 可以让包裹的组件保存在内存中不被销毁
• 演示1: 可以先给UserName.vue和UserInfo.vue 注册created和destroyed生命周期事件, 观察创建和销毁过程
• 演示2: 使用keep-alive内置的vue组件, 让动态组件缓存而不是销毁
• 语法:Vue内置的keep-alive组件 包起来要频繁切换的组件

<keep-alive> // keep-alive：保持-活着
    <component :is="xxx"></component>
</keep-alive>

• 具体操作：
  • 01复制一份改为02
  • 复制01_UseDynamic.vue改为02_UseDynamic.vue
• 我们先来演示1的操作：
• 02/UserName.vue代码修改

<template>
  <div>
      <div>
          <span>用户名:</span>
          <input type="text">
      </div>
      <div>
          <span>密码:</span>
          <input type="password">
      </div>
  </div>
</template>

<script>
export default {
    created(){
        console.log("02-UserName-创建");
    },
    destroyed(){
        console.log("02-UserName-销毁");
    },
}
</script>

<style>

</style>

02_UseDynamic.vue

<template>
  <div>
      <button @click="comName = 'UserName'">账号密码填写</button>
      <button @click="comName = 'UserInfo'">个人信息填写</button>

      <p>下面显示注册组件-动态切换:</p>
      <div style="border: 1px solid red;">
          <component :is="comName"></component>
      </div>
  </div>
</template>

<script>
 //修改引入的vue
import UserName from '../components/02/UserName'
import UserInfo from '../components/02/UserInfo'
export default {
    data(){
        return {
            comName: "UserName"
        }
    },
    components: {
        UserName,
        UserInfo
    }
}
</script>

<style>

</style>

• 接下来开始演示2：
• 02_UseDynamic.vue增加keep-alive

 <!-- Vue内置keep-alive组件, 把包起来的组件缓存起来 -->
<keep-alive>
    <component :is="comName"></component>
</keep-alive>

总结: keep-alive可以提高组件的性能, 内部包裹的标签不会被销毁和重新创建, 触发激活和非激活的生命周期方法

1. 如何进行组件缓存?
   1. vue内置的keep-alive组件把要缓存的组件包起来
2. 组件缓存好处?
   1. 不会频繁的创建和销毁组件, 页面更快呈现

1.2 组件进阶 - 激活和非激活

目标: 被缓存的组件不再创建和销毁, 而是激活和非激活

• 补充2个钩子方法名:
  • activated – 激活时触发
  • deactivated – 失去激活状态触发
• UserName.vue增加俩新的生命周期

 // 组件缓存下 - 多了2个钩子函数
    activated(){
        console.log("02-UserName-激活");
    },
    deactivated(){
        console.log("02-UserName-失去激活");
    }

如何知道缓存的组件是出现还是消失了?

1. activated – 获得激活状态
2. deactivated – 失去激活状态

1.3 组件进阶 - 组件插槽

目标: 用于实现组件的内容分发, 通过 slot 标签, 可以接收到写在组件标签内的内容

• 问题1：组件中的数据不确定可以怎么做？
  • 通过props，接收父向子传递的变量
• 问题2：那组件中的标签不确定怎么办？
  • 通过slot标签，组件插槽来实现
  • slot：狭槽，水沟，理解为插槽
• vue提供组件插槽能力, 允许开发者在封装组件时，把不确定的部分定义为插槽
• 如果想更换图片，那么将一个img标签插入，
• 那么再像更换，那么插入另一个img标签即可

需求: 以前折叠面板案例, 想要实现不同内容显示, 我们把折叠面板里的Pannel组件, 添加组件插槽方式

• 但是上边这个案例，我们在第一次使用这个pannel的时候，内容区域（红色部分）想要显示图片和文字

• 第二次使用的时候，内容区域想要显示四个p

• 那么此时，我们在pannel能固定写使用那些标签么？

• 是不可以的，可以通过slot插槽，动态传递标签过去

• 语法口诀:

  1. 组件内用占位 （在不确定使用什么标签的位置，使用slot占位）
  2. 使用组件时包裹的内容, 传入标签替换slot

• 具体操作：

• 03/Pannel.vue - 组件(直接复制)

<template>
  <div>
    <!-- 按钮标题 -->
    <div class="title">
      <h4>芙蓉楼送辛渐</h4>
      <span class="btn" @click="isShow = !isShow">
        {{ isShow ? "收起" : "展开" }}
      </span>
    </div>
    <!-- 下拉内容 , 这里是不确定的，一会来修改-->
    <div class="container" v-show="isShow">
          <p>寒雨连江夜入吴,</p>
          <p>平明送客楚山孤。</p>
          <p>洛阳亲友如相问，</p>
          <p>一片冰心在玉壶。</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
    };
  },
};
</script>

<style scoped>
h3 {
  text-align: center;
}

.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #ccc;
  padding: 0 1em;
}

.title h4 {
  line-height: 2;
  margin: 0;
}

.container {
  border: 1px solid #ccc;
  padding: 0 1em;
}

.btn {
  /* 鼠标改成手的形状 */
  cursor: pointer;
}

img {
  width: 50%;
}
</style>

views/03_UseSlot.vue - 使用组件(直接复制)

<template>
  <div id="container">
    <div id="app">
      <h3>案例：折叠面板</h3>
        <Pannel></Pannel>
        <Pannel></Pannel>
        <Pannel></Pannel>
    </div>
  </div>
</template>

<script>
export default {
};
</script>

<style>
#app {
  width: 400px;
  margin: 20px auto;
  background-color: #fff;
  border: 4px solid blueviolet;
  border-radius: 1em;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
  padding: 1em 2em 2em;
}
</style>

src/App.vue中使用

<h1>3. 组件-插槽</h1>
<UseSlot></UseSlot>
 导入注册代码省略

views/03_UseSlot.vue - 组件插槽使用

<template>
  <div id="container">
    <div id="app">
      <h3>案例：折叠面板</h3>
      <Pannel>
          <img src="../assets/mm.gif" alt="">
          <span>我是内容</span>
      </Pannel>
      <Pannel>
          <p>寒雨连江夜入吴,</p>
          <p>平明送客楚山孤。</p>
          <p>洛阳亲友如相问，</p>
          <p>一片冰心在玉壶。</p>
      </Pannel>
    </div>
  </div>
</template>

<script>
import Pannel from "../components/03/Pannel";
export default {
  components: {
    Pannel,
  },
};
</script>

• 第一次使用Pannel的时候，会将内部的img和span替换slot
• 第二次使用pannel的时候，会将四个p替换slot

总结: 组件内容分发技术, slot占位, 使用组件时传入替换slot位置的标签

1. 当组件内某一部分标签不确定怎么办?
   1. 用插槽技术
2. 插槽具体如何使用?
   1. 先在组件内用slot占位
   2. 使用组件时, 传入具体标签插入
3. 插槽运行效果?
   1. 传入的标签会替换掉slot显示

1.4 组件进阶 - 插槽默认内容

目标: 如果外面不给传, 想给个默认显示内容

• 口诀: 内放置内容，作为默认显示内容
• 语法：

<slot>默认内容</slot>

• 不给组件传递标签，使用slot默认内容
• 给组件传递标签，则slot被整体替换掉

1. 如何给插槽设置默认显示内容?
   1. slot标签内写好默认要显示内容
2. 什么时候插槽默认内容会显示?
   1. 当使用组件并未给我们传入具体标签或内容时

1.5 组件进阶 - 具名插槽

目标: 当一个组件内有2处以上需要外部传入标签的地方

• 传入的标签可以分别派发给不同的slot位置

• 要求: v-slot一般用跟template标签使用 (template是html5新出标签内容模板元素, 不会渲染到页面上, 一般被vue解析内部标签)

• 具体操作：

• 03复制一份，改名为04

• 03_UseSlot.vue复制一份，改为04_UseSlot.vue

• App.vue注册04_UseSlot.vue名为UseSlot2，并使用

<h1>4. 组件-具名插槽</h1>
<UseSlot2></UseSlot2>

components/04/Pannel.vue - 留下具名slot

<template>
  <div> 
    <div class="title">
       //具名插槽1
      <slot name="title"></slot>
      <span class="btn" @click="isShow = !isShow">
        {{ isShow ? "收起" : "展开" }}
      </span>
    </div>
    <!-- 下拉内容 -->
    <div class="container" v-show="isShow">
     //具名插槽2
     <slot name="content"></slot>
    </div>
  </div>
</template>

views/04_UseSlot.vue使用

<template>
  <div id="container">
    <div id="app">
      <h3>案例：折叠面板</h3>
      <Pannel>
        //将具名插槽的标签放入template，然后给template添加属性: v-slot:插槽名
        <template v-slot:title>
          <h4>芙蓉楼送辛渐</h4>
        </template>
        <template v-slot:content>
          <img src="../assets/mm.gif" alt="">
          <span>我是内容</span>
        </template>
      </Pannel>
      <Pannel>
        <template #title>
          <span style="color: red;">我是标题</span>
        </template>
        <template #content>
          <p>寒雨连江夜入吴,</p>
          <p>平明送客楚山孤。</p>
          <p>洛阳亲友如相问，</p>
          <p>一片冰心在玉壶。</p>
        </template>
      </Pannel>
    </div>
  </div>
</template>

<script>
import Pannel from "../components/04/Pannel";
export default {
  components: {
    Pannel,
  },
};
</script>

• v-slot可以简化成#使用
• v-bind可以省略成: v-on: 可以省略成@ 那么v-slot: 可以简化成#

总结: slot的name属性起插槽名, 使用组件时, template配合#插槽名传入具体标签

1. 组件内多处不确定的标签如何做?
   1. slot占位, 给name属性起名字来区分
   2. template配合v-slot:name分发要替换的标签
2. v-slot: 可以简化成什么?

1.6 组件进阶 - 作用域插槽 ***重难点

目标: 子组件里值, 在给插槽赋值时在父组件环境下使用

• 问题：使用插槽时，如何使用组件内的变量？

  • 使用作用域插槽

• 复习: 插槽内slot中显示默认内容

• 例子: 默认内容在子组件中, 但是父亲在给插槽传值, 想要改变插槽显示的默认内容

• 具体操作：

• 复制04改为05

• 复制04_UseSlot.vue改为05_UseSlot.vue

• 注册05_UseSlot.vue为UseSlot3，并使用

<h1>5. 组件-作用域插槽</h1>
<UseSlot3></UseSlot3>

运行，发现报错，说在05_UseSlot.vue中没有定义defaultObj

• 如何解决上边的问题呢？使用作用域插槽
• 口诀:

1. 子组件, 在slot上绑定自定义属性和子组件内的值
2. 使用组件, 用template和v-slot=“自定义变量名比如scope”
3. scope变量名自动绑定slot上所有属性和值

• 具体操作：
• components/05/Pannel.vue - 定义组件, 和具名插槽, 给slot绑定属性和值

<template>
  <div>
    <!-- 按钮标题 -->
    <div class="title">
      <h4>芙蓉楼送辛渐</h4>
      <span class="btn" @click="isShow = !isShow">
        {{ isShow ? "收起" : "展开" }}
      </span>
    </div>
    <!-- 下拉内容 -->
    <div class="container" v-show="isShow">
     <slot :row="defaultObj">{{ defaultObj.defaultOne }}</slot>
    </div>
  </div>
</template>

<script>
// 目标: 作用域插槽
// 场景: 使用插槽, 使用组件内的变量
// 1. slot标签, 自定义属性和内变量关联
// 2. 使用组件, template配合v-slot="变量名"
// 变量名会收集slot身上属性和值形成对象
export default {
  data() {
    return {
      isShow: false,
      defaultObj: {
        defaultOne: "无名氏",
        defaultTwo: "小传同学"
      }
    };
  },
};
</script>

views/05_UseSlot.vue

<template>
  <div id="container">
    <div id="app">
      <h3>案例：折叠面板</h3>
      <Pannel>
        <!-- 需求: 插槽时, 使用组件内变量 -->
        <!-- scope变量: {row: defaultObj} -->
        <template v-slot="scope">
          <p>{{ scope.row.defaultTwo }}</p>
        </template>
      </Pannel>
    </div>
  </div>
</template>

<script>
import Pannel from "../components/05/Pannel";
export default {
  components: {
    Pannel,
  },
};
</script>

总结: 组件内变量绑定在slot上, 然后使用组件v-slot=“变量” 变量上就会绑定slot身上属性和值

1. 作用域插槽什么时候使用?
   1. 使用组件插槽技术时, 需要用到子组件内变量
2. 作用域插槽使用口诀?
   1. 子组件在slot身上添加属性和子组件的值
   2. 使用组件处template配合v-slot=“变量名”（收集slot身上的所有属性和值）

1.7 组件进阶 - 作用域插槽使用场景 ***

目标: 了解作用域插槽使用场景, 自定义组件内标签+内容

• 案例: 封装一个表格组件, 在表格组件内循环产生单元格
• 准备MyTable.vue组件 – 内置表格, 传入数组循环铺设页面, 把对象每个内容显示在单元格里
• 准备UseTable.vue – 准备数据传入给MyTable.vue使用

新建：components/06/MyTable.vue - 模板(直接复制)

<template>
  <div>
      <table border="1">
          <thead>
              <tr>
                  <th>序号</th>
                  <th>姓名</th>
                  <th>年龄</th>
                  <th>头像</th>
              </tr>
          </thead>
          <thead>
              <tr>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
              </tr>
          </thead>
      </table>
  </div>
</template>

<script>
export default {

}
</script>

新建：views/06_UseTable.vue - 准备数据, 引入MyTable，并传递数据

<template>
  <div>
    <MyTable :arr="list"></MyTable>
  </div>
</template>

<script>
import MyTable from "../components/06/MyTable";
export default {
  components: {
    MyTable,
  },
  data() {
    return {
      list: [
        {
          name: "小传同学",
          age: 18,
          headImgUrl:
            "http://yun.itheima.com/Upload/./Images/20210303/603f2d2153241.jpg",
        },
        {
          name: "小黑同学",
          age: 25,
          headImgUrl:
            "http://yun.itheima.com/Upload/./Images/20210304/6040b101a18ef.jpg",
        },
        {
          name: "智慧同学",
          age: 21,
          headImgUrl:
            "http://yun.itheima.com/Upload/./Images/20210302/603e0142e535f.jpg",
        },
      ],
    };
  },
};
</script>

<style>
</style>

MyTable循环显示数据

<template>
  <div>
      <table border="1">
          <thead>
              <tr>
                  <th>序号</th>
                  <th>姓名</th>
                  <th>年龄</th>
                  <th>头像</th>
              </tr>
          </thead>
          <tbody>
              <tr v-for="(obj, index) in arr" :key="index">
                  <td>{{ index + 1 }}</td>
                  <td>{{ obj.name }}</td>
                  <td>{{ obj.age }}</td>
                  <td>
                       {{ obj.headImgUrl }}
                  </td>
              </tr>
          </tbody>
      </table>
  </div>
</template>

<script>
export default {
    props: {
        arr: Array
    }
}
</script>

App.vue注册06_UseTable.vue 并使用

<h1>6. 作用域插槽-使用场景</h1>
<p>组件内标签可以随意定义和数据使用</p>
<UseTable></UseTable>

例子: 我想要给td内显示图片, 需要传入自定义的img标签

• 思路：

• 在MyTable.vue的td中准备占位, 但是外面需要把图片地址赋予给src属性,所以在slot上把obj数据绑定

• 具体操作：

• components/06/MyTable.vue ： 将数据传递出去

<template>
  <div>
      <table border="1">
          <thead>
              <tr>
                  <th>序号</th>
                  <th>姓名</th>
                  <th>年龄</th>
                  <th>头像</th>
              </tr>
          </thead>
          <tbody>
              <tr v-for="(obj, index) in arr" :key="index">
                  <td>{{ index + 1 }}</td>
                  <td>{{ obj.name }}</td>
                  <td>{{ obj.age }}</td>
                  <td>
                      <slot :row="obj">
                          <!-- 默认值给上,如果使用组件不自定义标签显示默认文字 -->
                          {{ obj.headImgUrl}}
                      </slot>
                  </td>
              </tr>
          </tbody>
      </table>
  </div>
</template>

<script>
export default {
    props: {
        arr: Array
    }
}
</script>

在UseTable使用MyTable的时候, template上v-slot绑定变量, 传入img组件设置图片地址

<template>
  <div>
    <MyTable :arr="list"></MyTable>
    <MyTable :arr="list">
        <!-- scope: {row: obj} -->
       <template v-slot="scope">
            <a :href="scope.row.headImgUrl">{{ scope.row.headImgUrl }}</a>
       </template>
    </MyTable>
    <MyTable :arr="list">
       <template v-slot="scope">
            <img style="width: 100px;" :src="scope.row.headImgUrl" alt="">
       </template>
    </MyTable>
  </div>
</template>

<script>
import MyTable from "../components/06/MyTable";
export default {
  components: {
    MyTable,
  },
  data() {
    return {
      list: [
        {
          name: "小传同学",
          age: 18,
          headImgUrl:
            "http://yun.itheima.com/Upload/./Images/20210303/603f2d2153241.jpg",
        },
        {
          name: "小黑同学",
          age: 25,
          headImgUrl:
            "http://yun.itheima.com/Upload/./Images/20210304/6040b101a18ef.jpg",
        },
        {
          name: "智慧同学",
          age: 21,
          headImgUrl:
            "http://yun.itheima.com/Upload/./Images/20210302/603e0142e535f.jpg",
        },
      ],
    };
  },
};
</script>

<style>
</style>

总结: 插槽可以自定义标签, 作用域插槽可以把组件内的值取出来自定义内容

理解：

• 数据在子组件中，为啥要传递给父组件，然后再回传回来再用呢？
• 其实主要是因为子组件，如果直接显示数据，那用啥表情显示呢？用img？用a？写死了不好
• 所以由使用者（父组件），来确定这一块用哪个标签显示，只不过他没有数据，需要子组件传递过去

我们为什么要使用作用域插槽?

1. 可以让组件更加灵活的适用于不同的场景和项目

2. 自定义指令

• 除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令： v-xxx
• Vue提供的内置指令，无法满足咱们的需求，那么就可以自定义指令
• 自定义指令文档

2.0 自定义指令-注册

• 局部注册：新建views/07_UseDirective.vue

<template>
  <div>
      <!-- <input type="text" v-gfocus> 这个是全局的指令 -->
      <input type="text" v-focus>
      
  </div>
</template>

<script>
// 目标: 创建 "自定义指令", 让输入框自动聚焦
// 1. 创建自定义指令
// 全局 / 局部
// 2. 在标签上使用自定义指令  v-指令名
export default {
    data(){
        return {
            colorStr: 'red'
        }
    },
    directives: {
        focus: {
            inserted(el){//el：代表使用当前指令的元素对象
                el.focus()
            }
        }
    }
}
</script>

<style>

</style>

全局注册：在main.js用 Vue.directive()方法来进行注册, 以后随便哪个.vue文件里都可以直接用v-fofo指令

// 全局指令 - 到处"直接"使用
Vue.directive("gfocus", {
  inserted(el) {
    el.focus() // 触发标签的事件方法
  }
})

总结: 全局注册自定义指令, 哪里都能用, 局部注册, 只能在当前vue文件里用

我们为什么要自定义指令?

1. 在Vue内置指令满足不了需求时, 可以自己定义使用

2.1 自定义指令-传值

目标: 使用自定义指令, 传入一个值

• 需求: 定义color指令-传入一个颜色, 给标签设置文字颜色
• main.js定义处修改一下

// 目标: 自定义指令传值
Vue.directive('color', {
  inserted(el, binding) { //binding里边存储了指令的很多信息，binding.value存储的是指令传递过来的数据，比如下边的colorStr变量
    el.style.color = binding.value
  },
	// 注意:
	// inserted方法 - 指令所在标签, 被插入到网页上触发(一次)
	// update方法 - 指令对应数据/标签更新时, 此方法执行
  update(el, binding) { //数据更新时，执行此方法（如果不写这个方法，那么colorStr变量改变值，颜色不会发生改变）
    el.style.color = binding.value
  }
})

07_UseDirective.vue处更改一下

<p v-color="colorStr" @click="changeColor">修改文字颜色</p>

<script>
  data() {
    return {
      theColor: "red",
    };
  },
  methods: {
    changeColor() {
      this.theColor = 'blue';
    },
  },
</script>

总结: v-xxx, 自定义指令, 获取原生DOM, 自定义操作

1. 指令如何传值?
   1. v-指令名=“值”
2. 指令值变化触发什么方法?
   1. 自定义指令的update方法而非inserted方法

今日总结

1. 动态组件的使用步骤
2. 组件缓存使用步骤和作用
3. 组件插槽默认使用
4. 插槽默认显示的内容
5. 多个插槽时, 具名插槽如何使用
6. 作用域插槽如何使用以及目的
7. 自定义命令如何使用

面试题

1. vue中solt的使用方式，以及solt作用域插槽的用法

使用方式：当组件当做标签进行使用的时候，用slot可以用来接受组件标签包裹的内容，当给solt标签添加name属性的 时候，可以调换响应的位置
(高级用法) 插槽作用域： 当传递的不是单一的标签, 例如需要循环时, 把要循环的标签传入, 组件内使用v-for在slot标签上, 内部可以v-bind:把值传出来, 再外面把值赋予进去, 看示例

<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>

// current-user组件, user属性和值, 绑定给slotProps上
<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>

扩展阅读: https://cn.vuejs.org/v2/guide/components-slots.html (了解即可, 一般用不上)

2. 跟keep-alive有关的生命周期是哪些？（必会）

1**）前言：**在开发Vue项目的时候，大部分组件是没必要多次渲染的，所以Vue提供了一个内置组件keep-alive来缓存组件内部状态，避免重新渲染，在开发Vue项目的时候，大部分组件是没必要多次渲染的，所以Vue提供了一个内置组件keep-alive来缓存组件内部状态，避免重新渲染

2**）生命周期函数：**在被keep-alive包含的组件/路由中，会多出两个生命周期的钩子:activated 与 deactivated。

   1**、activated钩子：**在在组件第一次渲染时会被调用，之后在每次缓存组件被激活时调用。

   2**、Activated钩子调用时机：** 第一次进入缓存路由/组件，在mounted后面，beforeRouteEnter守卫传给 next 的回调函数之前调用，并且给因为组件被缓存了，再次进入缓存路由、组件时，不会触发这些钩子函数，beforeCreate created beforeMount mounted 都不会触发

   1**、deactivated钩子：**组件被停用（离开路由）时调用。

   2**、deactivated钩子调用时机**：使用keep-alive就不会调用beforeDestroy(组件销毁前钩子)和destroyed(组件销毁)，因为组件没被销毁，被缓存起来了，这个钩子可以看作beforeDestroy的替代，如果你缓存了组件，要在组件销毁的的时候做一些事情，可以放在这个钩子里，组件内的离开当前路由钩子beforeRouteLeave => 路由前置守卫 beforeEach =>全局后置钩子afterEach => deactivated 离开缓存组件 => activated 进入缓存组件(如果你进入的也是缓存路由)

3. 自定义指令(v-check、v-focus)的方法有哪些?它有哪些钩子函数?还有哪些钩子函数参数?（必会）

全局定义指令：在vue对象的directive方法里面有两个参数，一个是指令名称，另外一个是函数。组件内定义指令：directives

钩子函数：bind(绑定事件触发)、inserted(节点插入的时候触发)、update(组件内相关更新)

钩子函数参数：el、binding

4. is这个特性你有用过吗？主要用在哪些方面？（高薪常问）

1**）动态组件**

， componentName可以是在本页面已经注册的局部组件名和全局组件名,也可以是一个组件的选项对象。 当控制componentName改变时就可以动态切换选择组件。

2**）is的用法**

有些HTML元素，诸如 
、
、和，对于哪些元素可以出现在其内部是有严格限制的。

而有些HTML元素，诸如 
、 和 ，只能出现在其它某些特定的元素内部。



  



所以上面会被作为无效的内容提升到外部，并导致最终渲染结果出错。应该这么写：



  


 
 
  
附加练习_1.注册组件复用
 
  
目的: 封装一个复用的组件, 可以动态的插入标签, 来作为注册页的一块项
 
  
<div id="app">
    <child-com :title="'姓名'">
        <input type='text'/>
    </child-com>
    <child-com :title="'密码'">
        <input type='password' />
    </child-com>
    <child-com :title="'性别'">
        <input type='radio' name="sex" value="男"/>男
        <input type='radio' name="sex" value="女"/>女
    </child-com>
    <child-com :title="'爱好'">
        <input type='checkbox' value="抽烟" />抽烟
        <input type='checkbox' value="喝酒" />喝酒
        <input type='checkbox' value="烫头" />烫头
    </child-com>
    <child-com :title="'来自于'">
        <select>
            <option value="北京">北京</option>
            <option value="天津">天津</option>
            <option value="南京">南京</option>
        </select>
    </child-com>

</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        components: {
            childCom: { // 组件名字
                props: {
                    title: {
                        type: String
                    }
                },
                template: `<div style="border: 1px solid black;">
<p>{{title}}</p>
<slot></slot>
    </div>`
            }
        }
    })
</script>
 
  

                            
                        
                    
                    
                    

                    
                    
                    

                
                

                    

                        
                        

                            
 
                        
                        
                        

                            

                        
                        
                        

                            

                        
                    
                
            
        
    
    

        
你可能感兴趣的:(学习,vue.js,前端,javascript,bootstrap)
        

            

                

                    
情绪觉察日记第37天
                        露露_e800

                        
今天是家庭关系规划师的第二阶最后一天，慧萍老师帮我做了个案，帮我处理了埋在心底好多年的一份恐惧，并给了我深深的力量！这几天出来学习，爸妈过来婆家帮我带小孩，妈妈出于爱帮我收拾东西，并跟我先生和婆婆产生矛盾，妈妈觉得他们没有照顾好我…。今晚回家见到妈妈，我很欣赏她并赞扬她，妈妈说今晚要跟我睡我说好，当我们俩躺在床上准备睡觉的时候，我握着妈妈的手对她说:妈妈这几天辛苦你了，你看你多利害把我们的家收拾得
                    
                    
机器学习与深度学习间关系与区别
                        ℒℴѵℯ心·动ꦿ໊ོ꫞
人工智能学习深度学习python
                        
一、机器学习概述定义机器学习（MachineLearning,ML）是一种通过数据驱动的方法，利用统计学和计算算法来训练模型，使计算机能够从数据中学习并自动进行预测或决策。机器学习通过分析大量数据样本，识别其中的模式和规律，从而对新的数据进行判断。其核心在于通过训练过程，让模型不断优化和提升其预测准确性。主要类型1.监督学习（SupervisedLearning）监督学习是指在训练数据集中包含输入
                    
                    
铭刻于星（四十二）
                        随风至

                        
69夜晚，绍敏同学做完功课后，看了眼房外，没听到动静才敢从书包的夹层里拿出那个心形纸团。折痕压得很深，都有些旧了，想来是已经写好很久了。绍敏同学慢慢地、轻轻地捏开折叠处，待到全部拆开后，又反复抚平纸张，然后仔细地一字字默看。只是开头的三个字是第一次看到，让她心漏跳了几拍。“亲爱的绍敏：从四年级的时候，我就喜欢你了，但是我一直不敢说，怕影响你学习。六年级的时候听说有人跟你表白，你接受了，我很难过，但
                    
                    
UI学习——cell的复用和自定义cell
                        Magnetic_h
ui学习
                        
目录cell的复用手动（非注册）自动（注册）自定义cellcell的复用在iOS开发中，单元格复用是一种提高表格（UITableView）和集合视图（UICollectionView）滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时，如果没有可复用的单元格，则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕，它就不会被销毁。相反，它被添
                    
                    
element实现动态路由+面包屑
                        软件技术NINI
vue案例vue.js前端
                        
el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
                    
                    
学点心理知识，呵护孩子健康
                        静候花开_7090

                        
昨天听了华中师范大学教育管理学系副教授张玲老师的《哪里才是学生心理健康的最后庇护所，超越教育与技术的思考》的讲座。今天又重新学习了一遍，收获匪浅。张玲博士也注意到了当今社会上的孩子由于心理问题导致的自残、自杀及伤害他人等恶性事件。她向我们普及了一个重要的命题，她说心理健康的一些基本命题，我们与我们通常的一些教育命题是不同的，她还举了几个例子，让我们明白我们原来以为的健康并非心理学上的健康。比如如果
                    
                    
Long类型前后端数据不一致
                        igotyback
前端
                        
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
                    
                    
ArcGIS栅格计算器常见公式（赋值、0和空值的转换、补充栅格空值）
                        研学随笔
arcgis经验分享
                        
我们在使用ArcGIS时通常经常用到栅格计算器，今天主要给大家介绍我日常中经常用到的几个公式，供大家参考学习。将特定值（-9999）赋值为0，例如-9999.Con("raster"==-9999,0,"raster")2.给空值赋予特定的值（如0）Con(IsNull("raster"),0,"raster")3.将特定的栅格值(如1)赋值为空值，其他保留原值SetNull("raster"==
                    
                    
【一起学Rust | 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数
                        广龙宇
一起学Rust#Rust设计模式rust设计模式开发语言
                        
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、使用借用类型作为参数二、格式化拼接字符串三、使用构造函数总结前言Rust不是传统的面向对象编程语言，它的所有特性，使其独一无二。因此，学习特定于Rust的设计模式是必要的。本系列文章为作者学习《Rust设计模式》的学习笔记以及自己的见解。因此，本系列文章的结构也与此书的结构相同（后续可能会调成结构），基本上分为三个部分
                    
                    
回溯 Leetcode 332 重新安排行程
                        mmaerd
Leetcode刷题学习记录leetcode算法职场和发展
                        
重新安排行程Leetcode332学习记录自代码随想录给你一份航线列表tickets，其中tickets[i]=[fromi,toi]表示飞机出发和降落的机场地点。请你对该行程进行重新规划排序。所有这些机票都属于一个从JFK（肯尼迪国际机场）出发的先生，所以该行程必须从JFK开始。如果存在多种有效的行程，请你按字典排序返回最小的行程组合。例如，行程[“JFK”,“LGA”]与[“JFK”,“LGB
                    
                    
Python数据分析与可视化实战指南
                        William数据分析
pythonpython数据
                        
在数据驱动的时代，Python因其简洁的语法、强大的库生态系统以及活跃的社区，成为了数据分析与可视化的首选语言。本文将通过一个详细的案例，带领大家学习如何使用Python进行数据分析，并通过可视化来直观呈现分析结果。一、环境准备1.1安装必要库在开始数据分析和可视化之前，我们需要安装一些常用的库。主要包括pandas、numpy、matplotlib和seaborn等。这些库分别用于数据处理、数学
                    
                    
2019-12-22-22:30
                        涓涓1016

                        
今天是冬至，写下我的日更，是因为这两天的学习真的是能量的满满，让我看到了自己，未来另外一种可能性，也让我看到了这两年这几年的过程中我所接受那些痛苦的来源。一切的根源和痛苦都来自于人生，家庭，而你的原生家庭，你的爸爸和妈妈，是因为你这个灵魂在那一刻选择他们作为你的爸爸和妈妈来的，所以你得接受他，你得接纳他，他就是因为他的存在而给你的学习和成长带来这些痛苦，那其实是你必然要经历的这个过程，当你去接纳的
                    
                    
将cmd中命令输出保存为txt文本文件
                        落难Coder
Windowscmdwindow
                        
最近深度学习本地的训练中我们常常要在命令行中运行自己的代码，无可厚非，我们有必要保存我们的炼丹结果，但是复制命令行输出到txt是非常麻烦的，其实Windows下的命令行为我们提供了相应的操作。其基本的调用格式就是：运行指令>输出到的文件名称或者具体保存路径测试下，我打开cmd并且ping一下百度：pingwww.baidu.com>./data.txt看下相同目录下data.txt的输出：如果你再
                    
                    
四章-32-点要素的聚合
                        彩云飘过

                        
本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
                    
                    
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理
                        STU学生网页设计
网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
                        
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
                    
                    
【加密社】Solidity 中的事件机制及其应用
                        加密社
闲侃区块链智能合约区块链
                        
加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
                    
                    
GitHub上克隆项目
                        bigbig猩猩
github
                        
从GitHub上克隆项目是一个简单且直接的过程，它允许你将远程仓库中的项目复制到你的本地计算机上，以便进行进一步的开发、测试或学习。以下是一个详细的步骤指南，帮助你从GitHub上克隆项目。一、准备工作1.安装Git在克隆GitHub项目之前，你需要在你的计算机上安装Git工具。Git是一个开源的分布式版本控制系统，用于跟踪和管理代码变更。你可以从Git的官方网站（https://git-scm.
                    
                    
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript
                        二挡起步
web前端期末大作业javascripthtmlcss旅游风景
                        
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
                    
                    
HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动
                        二挡起步
web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
                        
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
                    
                    
Day1笔记-Python简介&标识符和关键字&输入输出
                        ~在杰难逃~
Pythonpython开发语言大数据数据分析数据挖掘
                        
大家好，从今天开始呢，杰哥开展一个新的专栏，当然，数据分析部分也会不定时更新的，这个新的专栏主要是讲解一些Python的基础语法和知识，帮助0基础的小伙伴入门和学习Python，感兴趣的小伙伴可以开始认真学习啦！一、Python简介【了解】1.计算机工作原理编程语言就是用来定义计算机程序的形式语言。我们通过编程语言来编写程序代码，再通过语言处理程序执行向计算机发送指令，让计算机完成对应的工作，编程
                    
                    
人工智能时代，程序员如何保持核心竞争力？
                        jmoych
人工智能
                        
随着AIGC（如chatgpt、midjourney、claude等）大语言模型接二连三的涌现，AI辅助编程工具日益普及，程序员的工作方式正在发生深刻变革。有人担心AI可能取代部分编程工作，也有人认为AI是提高效率的得力助手。面对这一趋势,程序员应该如何应对?是专注于某个领域深耕细作，还是广泛学习以适应快速变化的技术环境?又或者，我们是否应该将重点转向AI无法轻易替代的软技能？让我们一起探讨程序员
                    
                    
node.js学习
                        小猿L
node.jsnode.js学习vim
                        
node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
                    
                    
阶段总结反思
                        轻争

                        
马上就要进入10月份了，今天做一下前段时间的总结和反思。前段时间，日更、英语、健身、护肤坚持的比较好。阅读、书法坚持的不好。1.中间被迫停更半个多月，其余时间一直在坚持日更挑战。偶尔也有不想写的时候，就做一下摘抄。因为阅读（输入）没跟上来，所以写作（输出）质量有待进一步加强。2.英语做到了一周至少学习5天，每次不少于30分钟，但是小班课没有跟上更新速度，下一步要争取利用零碎时间补听小班课。3.减肥
                    
                    
ARM驱动学习之基础小知识
                        JT灬新一
ARM嵌入式arm开发学习
                        
ARM驱动学习之基础小知识•sch原理图工程师工作内容–方案–元器件选型–采购（能不能买到，价格）–原理图（涉及到稳定性）•layout画板工程师–layout（封装、布局，布线，log）（涉及到稳定性）–焊接的一部分工作（调试阶段板子的焊接）•驱动工程师–驱动，原理图，layout三部分的交集容易发生矛盾•PCB研发流程介绍–方案，原理图(网表)–layout工程师（gerber文件）–PCB板
                    
                    
ARM驱动学习之5 LEDS驱动
                        JT灬新一
嵌入式C底层arm开发学习单片机
                        
ARM驱动学习之5LEDS驱动知识点：•linuxGPIO申请函数和赋值函数–gpio_request–gpio_set_value•三星平台配置GPIO函数–s3c_gpio_cfgpin•GPIO配置输出模式的宏变量–S3C_GPIO_OUTPUT注意点：DRIVER_NAME和DEVICE_NAME匹配。实现步骤：1.加入需要的头文件：//Linux平台的gpio头文件#include//三
                    
                    
ARM驱动学习之4小结
                        JT灬新一
嵌入式C++arm开发学习linux
                        
ARM驱动学习之4小结#include#include#include#include#include#defineDEVICE_NAME"hello_ctl123"MODULE_LICENSE("DualBSD/GPL");MODULE_AUTHOR("TOPEET");staticlonghello_ioctl(structfile*file,unsignedintcmd,unsignedlo
                    
                    
展现思维导图魅力，不断挖掘人生宝藏
                        思维导图讲师Mandy

                        
第13期最强思维导图训练营已经结束一周了，但是我依旧是感觉所有学员还在努力的学习，这些学员中有教师、学生、白领、公务员、宝妈等等，只要你努力，只要你想改变自己，任何行业，任何岗位都可以参与进来，28天足以让你见成效，在这28天中，我们的学员不仅仅是收获了一枚毕业证，最重要的是让自己的思维方式得到升级，今天的你为自己投资，明天的你就会感谢你今天的付出，我们来听一听来自13期最强思维导图训练营优秀学员
                    
                    
2019-3-23晨间日记
                        红红火火小耳朵

                        
今天是什么日子起床：7点40就寝：23点半天气：有太阳，不过一会儿出来一会儿进去特别清爽的凉意，还蛮舒服的心情：小激动要给女朋友过生日啦纪念日：田田女士过生日任务清单昨日完成的任务，最重要的三件事：1.英语一对一2.运动计划3.认真护肤习惯养成：调整状态周目标·完成进度英语七天打卡（5/7）轻课阅读（87/180）音标课（25/30）读书（福尔摩斯一章）学习·信息·阅读#英语课#Cookingte
                    
                    
【华为OD技术面试真题精选 - 非技术题】 -HR面，综合面_华为od hr面
                        一个射手座的程序媛
程序员华为od面试职场和发展
                        
最后的话最近很多小伙伴找我要Linux学习资料，于是我翻箱倒柜，整理了一些优质资源，涵盖视频、电子书、PPT等共享给大家！资料预览给大家整理的视频资料：给大家整理的电子书资料：如果本文对你有帮助，欢迎点赞、收藏、转发给朋友，让我有持续创作的动力！网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以点击这里获
                    
                    
教育
                        用心灵温暖心灵

                        
@陈春丽长期学习班冯倩。今天一早就听到说高职合并，取消中专教育的教育信息。感觉是虽然知道，再听还是吓一跳。国家重视职业教育为何还要取消中专技术学校的教育？再听高中就要进行技术教育了，一部分人学习好继续努力学习考大学，一部分人在高中就可以进行职业教育接受职业教育了还要中专技术教育学校干什么呢！a有些职业教育学校转型升级快，不是孩子上完给找工作，而是学校帮孩子创业，我觉得是不错的方向！新闻新你得实时更
                    
                                
java杨辉三角
                                    3213213333332132
java基础
                                    

package com.algorithm;

/**
 * @Description 杨辉三角
 * @author FuJianyong
 * 2015-1-22上午10:10:59
 */
public class YangHui {
	public static void main(String[] args) {
		//初始化二维数组长度
		int[][] y
                                
                                
《大话重构》之大布局的辛酸历史
                                    白糖_
重构
                                    
《大话重构》中提到“大布局你伤不起”，如果企图重构一个陈旧的大型系统是有非常大的风险，重构不是想象中那么简单。我目前所在公司正好对产品做了一次“大布局重构”，下面我就分享这个“大布局”项目经验给大家。 
  
 
 背景 
 
        公司专注于企业级管理产品软件，企业有大中小之分，在2000年初公司用JSP/Servlet开发了一套针对中
                                
                                
电驴链接在线视频播放源码
                                    dubinwei
源码电驴播放器视频ed2k
                                    
本项目是个搜索电驴（ed2k）链接的应用,借助于磁力视频播放器（官网： 
http://loveandroid.duapp.com/ 开放平台），可以实现在线播放视频，也可以用迅雷或者其他下载工具下载。 
项目源码： 
http://git.oschina.net/svo/Emule,动态更新。也可从附件中下载。 
项目源码依赖于两个库项目，库项目一链接： 
http://git.oschina.
                                
                                
Javascript中函数的toString()方法
                                    周凡杨
JavaScriptjstoStringfunctionobject
                                    
简述 
    The toString() method returns a string representing the source code of the function. 
    简译之，Javascript的toString()方法返回一个代表函数源代码的字符串。 
句法 
    function.
                                
                                
struts处理自定义异常
                                    g21121
struts
                                    
很多时候我们会用到自定义异常来表示特定的错误情况，自定义异常比较简单，只要分清是运行时异常还是非运行时异常即可，运行时异常不需要捕获，继承自RuntimeException，是由容器自己抛出，例如空指针异常。 
非运行时异常继承自Exception，在抛出后需要捕获，例如文件未找到异常。 
此处我们用的是非运行时异常，首先定义一个异常LoginException: 
/**
 * 类描述：登录相
                                
                                
Linux中find常见用法示例
                                    510888780
linux
                                    
Linux中find常见用法示例 
 
·find   path   -option   [   -print ]   [ -exec   -ok   command ]   {} \; 
 
 
 
 
find命令的参数；
                                
                                
SpringMVC的各种参数绑定方式
                                    Harry642
springMVC绑定表单
                                    
1. 基本数据类型(以int为例，其他类似)： 
Controller代码： 
 

    @RequestMapping("saysth.do")
    public void test(int count) {
    }
 
表单代码： 
 

<form action="saysth.do" method="post&q
                                
                                
Java 获取Oracle ROWID
                                    aijuans
javaoracle
                                    
  
A ROWID is an identification tag unique for each row of an Oracle Database table. The ROWID can be thought of as a virtual column, containing the ID for each row. 
The oracle.sql.ROWID class i
                                
                                
java获取方法的参数名
                                    antlove
javajdkparametermethodreflect
                                    
reflect.ClassInformationUtil.java 
package reflect;

import javassist.ClassPool;
import javassist.CtClass;
import javassist.CtMethod;
import javassist.Modifier;
import javassist.bytecode.CodeAtt
                                
                                
JAVA正则表达式匹配 查找 替换 提取操作
                                    百合不是茶
java正则表达式替换提取查找
                                    
正则表达式的查找;主要是用到String类中的split(); 
      String str; 
     str.split();方法中传入按照什么规则截取,返回一个String数组 
  
常见的截取规则: 
str.split("\\.")按照.来截取

str.
                                
                                
Java中equals()与hashCode()方法详解
                                    bijian1013
javasetequals()hashCode()
                                    
一.equals()方法详解 
    equals()方法在object类中定义如下：  
public boolean equals(Object obj) {
    return (this == obj);
}
 
   很明显是对两个对象的地址值进行的比较（即比较引用是否相同）。但是我们知道，String 、Math、I
                                
                                
精通Oracle10编程SQL(4)使用SQL语句
                                    bijian1013
oracle数据库plsql
                                    
--工资级别表
create table SALGRADE
(
  GRADE    NUMBER(10),
  LOSAL    NUMBER(10,2),
  HISAL    NUMBER(10,2)
)

insert into SALGRADE values(1,0,100);
insert into SALGRADE values(2,100,200);
inser
                                
                                
【Nginx二】Nginx作为静态文件HTTP服务器
                                    bit1129
HTTP服务器
                                    
 Nginx作为静态文件HTTP服务器 
 
  在本地系统中创建/data/www目录，存放html文件(包括index.html) 
 创建/data/images目录，存放imags图片 
 在主配置文件中添加http指令 
 
  
http {
    server {
        listen       80;
        server_name  
                                
                                
kafka获得最新partition offset
                                    blackproof
kafkapartitionoffset最新
                                    
kafka获得partition下标，需要用到kafka的simpleconsumer 
  
import java.util.ArrayList;
import java.util.Collections;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.
                                
                                
centos 7安装docker两种方式
                                    ronin47

                                    
      第一种是采用yum 方式 
             yum install -y docker 
          
                                
                                
java-60-在O(1)时间删除链表结点
                                    bylijinnan
java
                                    


public class DeleteNode_O1_Time {

	/**
	 * Q 60 在O(1)时间删除链表结点
	 * 给定链表的头指针和一个结点指针(!!)，在O(1)时间删除该结点
	 * 
	 * Assume the list is:
	 * head->...->nodeToDelete->mNode->nNode->..
                                
                                
nginx利用proxy_cache来缓存文件
                                    cfyme
cache
                                    
user  zhangy users;
worker_processes 10;
error_log  /var/vlogs/nginx_error.log  crit;
pid        /var/vlogs/nginx.pid;
#Specifies the value for ma
                                
                                
[JWFD开源工作流]JWFD嵌入式语法分析器负号的使用问题
                                    comsci
嵌入式
                                    
 
    假如我们需要用JWFD的语法分析模块定义一个带负号的方程式，直接在方程式之前添加负号是不正确的，而必须这样做： 
 
    string str01 = "a=3.14;b=2.71;c=0;c-((a*a)+(b*b))" 
 
    定义一个0整数c,然后用这个整数c去
                                
                                
如何集成支付宝官方文档
                                    dai_lm
android
                                    
官方文档下载地址 
 
https://b.alipay.com/order/productDetail.htm?productId=2012120700377310&tabId=4#ps-tabinfo-hash 
 
集成的必要条件 
1. 需要有自己的Server接收支付宝的消息 
2. 需要先制作app，然后提交支付宝审核，通过后才能集成 
 
调试的时候估计会真的扣款，请注意 

                                
                                
应该在什么时候使用Hadoop
                                    datamachine
hadoop
                                    
原帖地址：http://blog.chinaunix.net/uid-301743-id-3925358.html 
 
存档，某些观点与我不谋而合，过度技术化不可取，且hadoop并非万能。 
 
--------------------------------------------万能的分割线-------------------------------- 
有人问我，“你在大数据和Hado
                                
                                
在GridView中对于有外键的字段使用关联模型进行搜索和排序
                                    dcj3sjt126com
yii
                                    
在GridView中使用关联模型进行搜索和排序 
首先我们有两个模型它们直接有关联:   
class Author extends CActiveRecord {
...
}
 
class Post extends CActiveRecord {
...
    function relations() {
        return array(
            '
                                
                                
使用NSString 的格式化大全
                                    dcj3sjt126com
Objective-C
                                    
格式定义The format specifiers supported by the NSString formatting methods and CFString formatting functions follow the IEEE printf specification; the specifiers are summarized in Table 1. Note that you c
                                
                                
使用activeX插件对象object滚动有重影
                                    蕃薯耀
activeX插件滚动有重影
                                    
    
使用activeX插件对象object滚动有重影       <object style="width:0;" id="abc" classid="CLSID:D3E3970F-2927-9680-BBB4-5D0889909DF6" codebase="activex/OAX339.CAB#
                                
                                
SpringMVC4零配置
                                    hanqunfeng
springmvc4
                                    
基于Servlet3.0规范和SpringMVC4注解式配置方式，实现零xml配置，弄了个小demo，供交流讨论。 
  
  
项目说明如下： 
1.db.sql是项目中用到的表，数据库使用的是oracle11g 
2.该项目使用mvn进行管理，私服为自搭建nexus,项目只用到一个第三方 jar，就是oracle的驱动； 
3.默认项目为零配置启动，如果需要更改启动方式，请
                                
                                
《开源框架那点事儿16》：缓存相关代码的演变
                                    j2eetop
开源框架
                                    
问题引入 
上次我参与某个大型项目的优化工作，由于系统要求有比较高的TPS，因此就免不了要使用缓冲。 
该项目中用的缓冲比较多，有MemCache，有Redis，有的还需要提供二级缓冲，也就是说应用服务器这层也可以设置一些缓冲。 
当然去看相关实现代代码的时候，大致是下面的样子。    
[java] 
view plain 
copy 
print 
?   
 
 public vo
                                
                                
AngularJS浅析
                                    kvhur
JavaScript
                                    
概念 
 
 AngularJS is a structural framework for dynamic web apps. 
 了解更多详情请见原文链接：http://www.gbtags.com/gb/share/5726.htm 
 Directive 
扩展html，给html添加声明语句，以便实现自己的需求。对于页面中html元素以ng为前缀的属性名称，ng是angular的命名空间
                                
                                
架构师之jdk的bug排查(一)---------------split的点号陷阱
                                    nannan408
split
                                    
1.前言. 
   jdk1.6的lang包的split方法是有bug的,它不能有效识别A.b.c这种类型,导致截取长度始终是0.而对于其他字符,则无此问题.不知道官方有没有修复这个bug. 
2.代码 
 

String[] paths = "object.object2.prop11".split("'");
System.ou
                                
                                
如何对10亿数据量级的mongoDB作高效的全表扫描
                                    quentinXXZ
mongodb
                                    
  本文链接: 
http://quentinXXZ.iteye.com/blog/2149440  
一、正常情况下，不应该有这种需求 
首先，大家应该有个概念，标题中的这个问题，在大多情况下是一个伪命题，不应该被提出来。要知道，对于一般较大数据量的数据库，全表查询，这种操作一般情况下是不应该出现的，在做正常查询的时候，如果是范围查询，你至少应该要加上limit。 
说一下，
                                
                                
C语言算法之水仙花数
                                    qiufeihu
c算法
                                    
/**
* 水仙花数
*/
#include <stdio.h>
#define N 10
int main()
{
    int x,y,z;
    for(x=1;x<=N;x++)
    	for(y=0;y<=N;y++)
    		for(z=0;z<=N;z++)
    			if(x*100+y*10+z == x*x*x
                                
                                
JSP指令
                                    wyzuomumu
jsp
                                    
 
 jsp指令的一般语法格式： <%@ 指令名 属性 =”值 ” %> 
  常用的三种指令： page,include,taglib 
 page指令语法形式： <%@ page 属性 1=”值 1” 属性 2=”值 2”%> 
 include指令语法形式： <%@include file=”relative url”%> (jsp可以通过 include
                                
                
            
        
    


    

        

            按字母分类：
            ABCDEFGHIJKLMNOPQRSTUVWXYZ其他
        
    


    

        

            首页 -
            关于我们 -
            站内搜索 -
            Sitemap -
            侵权投诉
        
        
版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.