目录：

1、案例：品牌管理
    2、Vue-devtools的两种安装方式
    3、过滤器，自定义全局或私有过滤器
    4、鼠标按键事件的修饰符
    5、自定义全局指令：让文本框获取焦点
    6、自定义指令，修改元素的样式
    7、自定义指令函数的简写
    8、生命周期函数-组件创建期间的4个钩子函数
    9、生命周期函数-组件运行和销毁阶段的钩子函数
    10、vue-resource发起get、post、jsonp请求
    11、结合Node手写JSONP服务器剖析JSONP原理

1、案例：品牌管理    <--返回目录

　　最终效果：

　　需求1：当点击"添加"按钮，会根据输入框数据新增一条记录，添加到列表

　　　　实现原理：

　　　　1）在vm（vue实例）定义三个属性id、name和userList，并且与上图中表单和列表进行绑定；

　　　　2）由于数据的双向绑定，当表单输入框id和name输入了值，Model中的字段id和name也随着变化，并且等于表单输入的值；

　　　　3）由于数据的双向绑定，当userList增加一个对象，vue会重新渲染；

　　　　4）所以，基于vue的双向绑定，我们只要操作Model层的数据即可（只要关心业务），无需关心DOM操作。

　　需求2：点击"删除"，删除对应的记录

　　　　实现原理：根据对应id，删除Model中的userList的记录

　　代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>标题</title>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <!-- 导入vue的包 -->
  9.     <script type="text/javascript" src="vue2.js"></script>
  10.     <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
  11.     <style type="text/css">
  12.         table td{
  13.             width: 100px;
  14.             padding: 5px;
  15.         }
  16.         td:nth-of-type(3) {
  17.             width: 300px;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22.     <div id="app">
  23.         <input type="button" value="添加" @click="add"><br/><br/>
  24.         id: <input type="text" v-model="id"> &nbsp;&nbsp;
  25.         name: <input type="text" v-model="name"><br/><br/>
  26.         <table border="1" cellspacing='0'>
  27.             <tr v-for="item in userList" :key="item.id">
  28.                 <td>{{item.id}}</td>
  29.                 <td>{{item.name}}</td>
  30.                 <td>{{item.time}}</td>
  31.                 <td><a href="" @click.prevent="del(item.id)">删除</a></td>
  32.             </tr>
  33.         </table>
  34.     </div>
  35.  
  36.     <script type="text/javascript">
  37.         //创建一个vue实例
  38.         var vm = new Vue({
  39.             el: '#app',
  40.             data: {
  41.                 id: '',
  42.                 name: '',
  43.                 time: '',
  44.                 userList: [{id:1,name:'张三',time:new Date()},
  45.                            {id:2,name:'李四',time:new Date()}]
  46.             },
  47.             methods: {
  48.                 // 需求1：当点击"添加"按钮，会根据输入框数据新增一条记录，添加到列表
  49.                 // 由于数据的双向绑定，当表单输入框id和name输入了值，Model中的字段id和name也随着变化，并且等于表单输入的值
  50.                 // 由于数据的双向绑定，当userList增加一个对象，vue会重新渲染
  51.                 add: function () {
  52.                     var newUser = {id:this.id,name:this.name,time:new Date()};
  53.                     this.userList.push(newUser);
  54.                 },
  55.                 // 需求2：点击"删除"，删除对应的记录
  56.                 del: function (id) {
  57.                     // this.userList.some((item, index) => {
  58.                     //     if(item.id == id) {
  59.                     //         this.userList.splice(index, 1);
  60.                     //         return true;
  61.                     //     }
  62.                     // })
  63.                     var index = this.userList.findIndex(item => {
  64.                         if(item.id == id) {
  65.                             return true;
  66.                         }
  67.                     });
  68.                     this.userList.splice(index,  1);
  69.                 }
  70.             }
  71.         });
  72.  
  73.     </script>
  74. </body>
  75. </html>

　　需求3：根据关键字实现数组的过滤

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>标题</title>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <!-- 导入vue的包 -->
  9.     <script type="text/javascript" src="vue2.js"></script>
  10.     <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
  11.     <style type="text/css">
  12.         table td{
  13.             width: 100px;
  14.             padding: 5px;
  15.         }
  16.         td:nth-of-type(3) {
  17.             width: 300px;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22.     <div id="app">
  23.         <input type="button" value="添加" @click="add"><br/><br/>
  24.         id: <input type="text" v-model="id"> &nbsp;&nbsp;
  25.         name: <input type="text" v-model="name">&nbsp;&nbsp;
  26.  
  27.         搜索： <input type="text" placeholder="Search" v-model="keyword"><br/><br/>
  28.  
  29.         <table border="1" cellspacing='0'>
  30.             <!-- <tr v-for="item in userList" :key="item.id"> -->
  31.             <!-- 表格渲染的数据来源：search(keyword) -->
  32.             <tr v-for="item in search(keyword)" :key="item.id">
  33.                 <td>{{item.id}}</td>
  34.                 <td>{{item.name}}</td>
  35.                 <td>{{item.time}}</td>
  36.                 <td><a href="" @click.prevent="del(item.id)">删除</a></td>
  37.             </tr>
  38.         </table>
  39.     </div>
  40.  
  41.     <script type="text/javascript">
  42.         //创建一个vue实例
  43.         var vm = new Vue({
  44.             el: '#app',
  45.             data: {
  46.                 id: '',
  47.                 name: '',
  48.                 time: '',
  49.                 keyword: '', // 搜索框输入的关键字
  50.                 userList: [{id:1,name:'张三',time:new Date()},
  51.                              {id:2,name:'李四',time:new Date()}]
  52.             },
  53.             methods: {
  54.                 // 需求1：当点击"添加"按钮，会根据输入框数据新增一条记录，添加到列表
  55.                 // 由于数据的双向绑定，当表单输入框id和name输入了值，Model中的字段id和name也随着变化，并且等于表单输入的值
  56.                 // 由于数据的双向绑定，当userList增加一个对象，vue会重新渲染
  57.                 add: function () {
  58.                     var newUser = {id:this.id,name:this.name,time:new Date()};
  59.                     this.userList.push(newUser);
  60.                     // 表格渲染的数据来源改为了：search(keyword)
  61.                     //this.search(keyword);
  62.                 },
  63.                 // 需求2：点击"删除"，删除对应的记录
  64.                 del: function (id) {
  65.                     // this.userList.some((item, index) => {
  66.                     //     if(item.id == id) {
  67.                     //         this.userList.splice(index, 1);
  68.                     //         return true;
  69.                     //     }
  70.                     // })
  71.                     var index = this.userList.findIndex(item => {
  72.                         if(item.id == id) {
  73.                             return true;
  74.                         }
  75.                     });
  76.                     this.userList.splice(index,  1);
  77.                 },
  78.                 // 需求3：根据关键字实现数组的过滤
  79.                 search: function () {
  80.  
  81.                     // var newUserList = [];
  82.                     // this.userList.forEach(item => {
  83.                     //     if(item.name.indexOf(this.keyword.trim()) != -1) { // 如果keyword为'',indexOf()结果是0
  84.                     //         newUserList.push(item);
  85.                     //     }
  86.                     // });
  87.                     // return newUserList;
  88.  
  89.                     return this.userList.filter(item => {
  90.                         if(item.name.includes(this.keyword)) {
  91.                             return item;
  92.                         }
  93.                     });
  94.                 }
  95.             }
  96.         });
  97.  
  98.     </script>
  99. </body>
  100. </html>

2、Vue-devtools的两种安装方式    <--返回目录

　　
3、过滤器，自定义全局或私有过滤器    <--返回目录

　　vue.js允许自定义过滤器，用来做一些常见的文本格式化。过滤器可以用在两个地方：差值表达式和v-bind表达式。

　　定义全局过滤器：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>标题</title>
  5.     <meta charset="utf-8">
  6.     <script type="text/javascript" src="vue2.js"></script>
  7. </head>
  8. <body>
  9.     <div id="app">
  10.         {{ msg | msgFormat('abc', '123') }}
  11.     </div>
  12.  
  13.     <script type="text/javascript">
  14.         // 定义全局过滤器的语法
  15.         // Vue.filter('过滤器的名称', function() {});
  16.         // function()的第一个参数：过滤器管道符 "|" 前面传来的数据
  17.         // function()第二个参数及后面参数：调用该过滤器传递的参数
  18.         Vue.filter('msgFormat', function(data, arg1, arg2) {
  19.             return data.replace('学习', 'study').replace(/天/g,'day ')
  20.                 .replace('向上', 'up')
  21.                 .replace(/好/g,'good ')
  22.                 .replace('~', arg1 + arg2);
  23.         });
  24.  
  25.         //创建一个vue实例
  26.         var vm = new Vue({
  27.             el: '#app',
  28.             data: {
  29.                 msg: '好好学习，天天向上 ~'
  30.             },
  31.             methods: {
  32.             }
  33.         });
  34.     </script>
  35. </body>
  36. </html>

　　定义私有过滤器：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>标题</title>
  5.     <meta charset="utf-8">
  6.     <script type="text/javascript" src="vue2.js"></script>
  7. </head>
  8. <body>
  9.     <div id="app">
  10.         {{ msg | msgFormat('abc', '123') }} <br/>
  11.         {{ date | dateFormat }}
  12.     </div>
  13.  
  14.     <script type="text/javascript">
  15.         // 定义全局过滤器
  16.         // Vue.filter('过滤器的名称', function() {});
  17.         // function()的第一个参数：过滤器管道符 "|" 前面传来的数据
  18.         // function()第二个参数及后面参数：调用该过滤器传递的参数
  19.         Vue.filter('msgFormat', function(data, arg1, arg2) {
  20.             return data.replace('学习', 'study').replace(/天/g,'day ')
  21.                 .replace('向上', 'up')
  22.                 .replace(/好/g,'good ')
  23.                 .replace('~', arg1 + arg2);
  24.         });
  25.  
  26.         //创建一个vue实例
  27.         var vm = new Vue({
  28.             el: '#app',
  29.             data: {
  30.                 msg: '好好学习，天天向上 ~',
  31.                 date: new Date()
  32.             },
  33.             methods: {
  34.             },
  35.             filters: {   //定义私有的(局部)过滤器
  36.                 dateFormat: function(data) {
  37.                     var date = new Date(data);
  38.                     var y = date.getFullYear();
  39.                     var m = (date.getMonth() + 1).toString().padStart('2', '0');
  40.                     var d = date.getDate().toString().padStart('2', '0');
  41.                     var hh = date.getHours().toString().padStart('2', '0');
  42.                     var mm = date.getMinutes().toString().padStart('2', '0');
  43.                     var ss = date.getSeconds().toString().padStart('2', '0');
  44.                     return  y + "-" + m + "-" + d + " " +hh + ":" + mm + ":" + ss;
  45.                 }
  46.             }
  47.         });
  48.     </script>
  49. </body>
  50. </html>

4、鼠标按键事件的修饰符    <--返回目录

　　@keyup.enter: 监听键盘"回车键"的弹起事件

　　- vue提供的按键修饰符：.enter、.tab、.delete、.esc、.space、.up、.down、.left、.right

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>标题</title>
  5.     <meta charset="utf-8">
  6.     <script type="text/javascript" src="vue2.js"></script>
  7. </head>
  8. <body>
  9.     <div id="app">
  10.         <p>{{ msg }}</p>
  11.         <!-- @keyup.enter: 监听键盘"回车键"的弹起事件 -->
  12.         <input type="text" name="msg" v-model="msg" @keyup.enter="printMsg">
  13.     </div>
  14.  
  15.     <script type="text/javascript">
  16.         //创建一个vue实例
  17.         var vm = new Vue({
  18.             el: '#app',
  19.             data: {
  20.                 msg: '好好学习，天天向上'
  21.             },
  22.             methods: {
  23.                 printMsg () {
  24.                     alert(this.msg);
  25.                 }
  26.             },
  27.             filters: {   //定义私有的(局部)过滤器
  28.             }
  29.         });
  30.     </script>
  31. </body>
  32. </html>

　　自定义按键修饰符

　　js键盘事件对应的键码：https://www.cnblogs.com/wuhua1/p/6686237.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>标题</title>
  5.     <meta charset="utf-8">
  6.     <script type="text/javascript" src="vue2.js"></script>
  7. </head>
  8. <body>
  9.     <div id="app">
  10.         <p>{{ msg }}</p>
  11.         <!-- @keyup.113: 监听键盘"f2"的弹起事件 -->
  12.         <!-- <input type="text" name="msg" v-model="msg" @keyup.113="printMsg"> -->
  13.         <input type="text" name="msg" v-model="msg" @keyup.f2="printMsg">
  14.  
  15.     </div>
  16.  
  17.     <script type="text/javascript">
  18.         // 自定义全局的键盘修饰符 f2 (给键盘码113定义一个别名,就叫f2)
  19.         Vue.config.keyCodes.f2 = 113;//enter键的键盘码为13，f2为113
  20.         //Vue.directive('on').keyCodes.f2 = 113;//Vue1.X版本使用
  21.  
  22.         //创建一个vue实例
  23.         var vm = new Vue({
  24.             el: '#app',
  25.             data: {
  26.                 msg: '好好学习，天天向上'
  27.             },
  28.             methods: {
  29.                 printMsg () {
  30.                     alert(this.msg);
  31.                 }
  32.             },
  33.             filters: {   //定义私有的(局部)过滤器
  34.             }
  35.         });
  36.     </script>
  37. </body>
  38. </html>

5、自定义全局指令：让文本框获取焦点    <--返回目录

　　js原生代码：document.getElementById("search").focus(); // 让文本框获取焦点

　　现在想自定义一个指令 v-focus ：如果某个input包含了v-focus 属性，就会自动获取焦点

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>标题</title>
  5.     <meta charset="utf-8">
  6.     <script type="text/javascript" src="vue2.js"></script>
  7. </head>
  8. <body>
  9.     <div id="app">
  10.         <input type="text" name="msg" v-model="msg" id="search" v-focus>
  11.     </div>
  12.  
  13.     <script type="text/javascript">
  14.         // 注册一个全局自定义指令 `v-focus`, 定义时"v-"省略
  15.         Vue.directive('focus', {
  16.             // 当被绑定的元素插入到 DOM 中时
  17.             inserted: function (el) {
  18.                 el.focus();// 聚焦元素
  19.           }
  20.         });
  21.  
  22.         //创建一个vue实例
  23.         var vm = new Vue({
  24.             el: '#app',
  25.             data: {
  26.                 msg: '好好学习，天天向上'
  27.             },
  28.             methods: {
  29.                 printMsg () {
  30.                     alert(this.msg);
  31.                 }
  32.             },
  33.             filters: { //定义私有的(局部)过滤器
  34.             }
  35.         });
  36.  
  37.         // document.getElementById("search").focus(); // 让文本框获取焦点
  38.     </script>
  39. </body>
  40. </html>

　　

　　钩子函数：

  1. Vue.directive('focus', {
  2.     // 钩子函数
  3.     bind: function(el) { // 每当指令绑定到元素时，会立即执行这个bind函数，只执行一次
  4.         // el:就是绑定了指令的元素，是元素js对象
  5.         // 元素刚绑定指令时，还没有插入到DOM中。此时调用focus方法没有作用
  6.         // el.focus();
  7.     },
  8.     inserted: function() { // inserted表示元素插入到DOM中的时候，会执行inserted函数（触发一次）
  9.         el.focus();
  10.     },
  11.     updated: function() { // 当VNode更新时，会执行updated,可能会多次触发
  12.     }
  13. });

6、自定义指令，修改元素的样式    <--返回目录

　　自定义全局指定：使用钩子函数的第二个binding参数拿到传递的值

  1. //自定义全局指定，指令名字叫v-fontweight。注意：指令名全部小写
  2. Vue.directive('fontweight',{
  3.     bind: function(el, binding) {
  4.         el.style.fontWeight = binding.value;
  5.     }
  6. });

　　定义私有的指令：使用钩子函数的第二个binding参数拿到传递的值

  1. //定义私有的指令，指令名为v-color
    directives: {
  2.     'color': {  //注意：指令名全部小写
  3.         bind: function(el, binding) {
  4.             el.style.color = binding.value;
  5.         }
  6.     }
  7. }

7、自定义指令函数的简写    <--返回目录

　　大多数情况下，我们可能是想在bind和update钩子上做重复动作，并且不关心其他的钩子函数，可以这样写：

  1. Vue.directive('color-swatch', function(el, binding) {
  2.     el.style.backgroundColor = binding.value;
  3. })
  4. 或
  5. directives: {
  6.     'color': function(el, binding) { //相当于bind和update都写了这个function函数
  7.         el.style.color = binding.value;
  8.     }
  9. }

8、生命周期函数-组件创建期间的4个钩子函数    <--返回目录

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>标题</title>
  5.     <meta charset="utf-8">
  6.     <!-- 导入vue的包 -->
  7.     <script type="text/javascript" src="vue2.js"></script>
  8.     <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
  9.     <style type="text/css"></style>
  10. </head>
  11. <body>
  12.     <div id="app">
  13.         <h2 id="h2">{{ msg }}</h2>
  14.     </div>
  15.     <script type="text/javascript">
  16.         //创建一个vue实例
  17.         var vm = new Vue({
  18.             el: '#app',
  19.             data: {
  20.                 msg: 'helloworld'
  21.             },
  22.             methods: {
  23.                 show: function () {
  24.                     console.log("执行了show方法");
  25.                 }
  26.             },
  27.             beforeCreate() {//第一个生命周期函数，实例完全创建出来之前，会执行它
  28.                 //执行beforeCreate函数时，data和methods中的数据还没有初始化
  29.                 console.log("beforeCreate: " + this.msg);
  30.             },
  31.             created() {
  32.                 //执行created函数时，data和methods中的数据初始化完毕了
  33.                 console.log("created: " + this.msg);
  34.             },
  35.             beforeMount() {
  36.                 //执行该函数时，模板已经在内存总编译完毕，但是尚未把模板渲染到页面中
  37.                 //此时，页面中的元素还没有被替换过来，只是之前写的一些模板字符串
  38.                 console.log("beforeMount: " + document.getElementById("h2").innerText);
  39.             },
  40.             mounted() {
  41.                 //内存中的模板已经挂载到了页面，用户可以看到渲染好的页面了
  42.                 //当执行完该函数，表示实例已经完全创建好了。
  43.                 console.log("mounted: " + document.getElementById("h2").innerText);
  44.             }
  45.         });
  46.     </script>
  47. </body>
  48. </html>

9、生命周期函数-组件运行和销毁阶段的钩子函数    <--返回目录

　　1）如果要通过某些插件操作页面上的DOM节点，最早要在mounted函数中进行
　　2）只有执行完了mounted函数，就表示Vue实例已经完全初始化完毕；此时，组件已经脱离了创建阶段，进入了运行阶段
　　3）组件的运行阶段的生命周期函数有：beforeUpdate() updated()
        　　- when data changes触发这两个函数
        　　- 当执行beforeUpdate()函数时，页面还没有更新，但是data里面的数据更新了
        　　- 当执行updated()函数时，页面更新完毕
　　4）组件销毁阶段的生命周期函数：beforeDestroy()   destroyed()
       　　 - 当执行beforeDestroy()时，组件中的data、methods、过滤器、指令等还可用
        　　- 当执行destroyed()，组件中的ata、methods、过滤器、指令等不可用了

10、vue-resource发起get、post、jsonp请求    <--返回目录

　　除了vue-resource之外，还可以使用axios的第三方包来实现数据的请求

　　vue-resource发起get请求
        - 导包<script src="vue-resource-1.3.4.js"/>
        - vue-resource依赖vue，所以要先导入vue.js
        
        - this.$http.get("url",[options]).then(successcallback,[errorcallback]);
            ** .then说明该方法是用promiss封装的
            ** options选项，该参数可选
            ** errorcallback，该参数可选
            
        - this.$http.get("url").then(function(result) {
            console.log(result.body);//服务器返回的数据，推荐使用body
            console.log(result.data);//服务器返回的数据
        });

　　vue-resource发起post请求    
        - this.$http.post(""url,body,[options]).then();
            ** body传递给服务器的参数
            ** options选项，该参数可选
    
        - this.$http.post("url",{},{emulateJSON:true}).then(result=>{
            console.log(result.body);//服务器返回的数据，推荐使用body
            console.log(result.data);//服务器返回的数据
        });//手动发起的post请求，默认没有表单application/x-www-form-urlencoded格式，有的服务器处理不了

11、结合Node手写JSONP服务器剖析JSONP原理    <--返回目录

vue学习-day02（自定义指令，生命周期）的更多相关文章

  1. VUE自定义指令生命周期，VUE生命周期

    一.自定义指令的生命周期 自定义指令有五个生命周期(也叫钩子函数),分别是 bind,inserted,update,componentUpdated,unbind bind:只调用一次,指令第一次绑 ...

  2. Vue学习系列(四)——理解生命周期和钩子

    前言 在上一篇中,我们对平时进行vue开发中遇到的常用指令进行归类说明讲解,大概已经学会了怎么去实现数据绑定,以及实现动态的实现数据展示功能,运用指令,可以更好更快的进行开发.而在这一篇中,我们将通过 ...

  3. vue学习（五）生命周期 的钩子函数

    生命周期的钩子函数 主要有以下几种 beforeCreate created beforeMount mounted beforeUpdate updated activated deactivate ...

  4. vue 学习八 自定义指令

    vue指令注册有两种方式 1 全局注册 在main.js中 使用vue.directive Vue.directive('alert_w', { inserted(el,bin,vn) { conso ...

  5. Vue 实例详解与生命周期

    Vue 实例详解与生命周期 Vue 的实例是 Vue 框架的入口,其实也就是前端的 ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进 ...

  6. Vue笔记--通过自定义指令实现按钮操作权限

    经常做中后台系统,此类系统的权限是比较重要,拿自己做过的一些项目做个笔记. Vue实现的中后台管理系统.按钮操作权限的空置一般都是通过自定义指令Vue.directive. <el-button ...

  7. vue教程2-07 自定义指令

    vue教程2-07 自定义指令 自定义指令: 一.属性: Vue.directive(指令名称,function(参数){ this.el -> 原生DOM元素 }); <div v-re ...

  8. MAVEN学习笔记之Maven生命周期和插件简介（3）

    MAVEN学习笔记之Maven生命周期和插件简介(3) clean compile site三套生命周期相互独立. clean pre-clean 执行清理前的工作 clean 清理上一次构建生成的所 ...

  9. vue学习04 v-on指令

    vue学习04 v-on指令 v-on的作用是为元素绑定事件,比如click单击,dbclick双击 v-on指令可简写为@ 代码测试 <!DOCTYPE html> <html l ...

  10. vue学习06 v-show指令

    目录 vue学习06 v-show指令 v-show指令是:根据真假切换元素的显示状态 原理是修改元素的display,实现显示隐藏 指令后面的内容,最终都会解析为布尔值(true和false) 练习 ...

随机推荐

  1. docker 安装 gitlab 中文社区版

    docker pull twang2218/gitlab-ce-zh 创建一个docker 目录 /usr/local/docker/gitlab 创建一个 docker-compose.yml ve ...

  2. 基于LVM（逻辑卷管理）的快照原理

    一.为甚么不管多大的逻辑卷进行备份,快照都会在几秒之内完成? 快照在拍摄的一瞬间,系统会记录那个时间点逻辑卷的状态.数据等,此时拍下的快照相当于一张白纸.如图所示 快照做好后,随着时间的推移,源卷里的 ...

  3. C++继承中的同名覆盖

    1,父子间的冲突是由继承带来的,两个类之间存在了继承的关系,必然的会带来一 些问题,本文要讨论的是父子之间成员变量或成员函数的命名问题: 2,思考: 1,子类中是否可以定义父类中的同名成员? 1,可以 ...

  4. Layui数据表格的接口数据请求方式为Get

    Layui数据表格的接口数据请求方式为Get

  5. 使用iwebshop開發實現QQ第三方登錄

    $appid = "101353491"; $appkey = "df4e46ba7da52f787c6e3336d30526e4"; $redirect_ur ...

  6. Codeforces893F_Subtree Minimum Query

    题意 给定一棵树和根,每个点有点权,强制在线询问\(x\)子树里离\(x\)距离不超过\(k\)的最小点权. 分析 权值线段树合并的套路题,dfs,以深度作为下标,点权作为值,对每个点建立一颗权值线段 ...

  7. 02、CDF文件

    有了探针排布图像的基础,我们就可以更好地理解CDF文件了.假如每个探针的位置用一个坐标表示,以左上角为(0,0),那么整张芯片的坐标就如下图(行数n必须等于列数m,这里共有n*m个探针): 0,0 1 ...

  8. 通过SEO可以做什么？

    1.做关键词排名,从而带来大量的客户卖产品和服务.很多大型机械厂家就是这么做的,显然SEO赚取了不少利润.     2.通过SEO带来大量流量,从而投放广告或者跟厂家合作买产品,比如流量站之类.    ...

  9. Laravel - 验证码（captcha）

    首先,登录网址 packagist.org 查找 laravel captcha,找到mews/captcha ,根据 packagist 上的使用方法一步步来实现验证码的安装.配置composer. ...

  10. CentOS7 minimal安装初始化配置

    个人喜好最小化安装系统,需要配置的如下信息 1.更改网络配置为固定ip #vi /etc/sysconfig/network-scripts/ifcfg-eth0BOOTPROTO="sta ...