前端技术 – Lwxyz

npm安装成功，却找不到命令

Lucene — Wed, 05 Sep 2018 13:24:47 +0000

设置一个环境变量

echo -e “export PATH=$(npm prefix -g)/bin:$PATH“ >> ~/.bashrc && source ~/.bashrc

关于Vue实例的生命周期created和mounted的区别

Lucene — Wed, 05 Sep 2018 02:15:33 +0000

转自：https://segmentfault.com/a/1190000008570622

生命周期先上图

什么是生命周期

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。

在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册js方法，可以让我们用自己注册的js方法控制整个大局，在这些事件响应方法中的this直接指向的是vue的实例。

再上图，对生命周期图的标注

特别值得注意的是created钩子函数和mounted钩子函数的区别

每个钩子函数都在啥时间触发

beforeCreate

在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。

created

实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

beforeMount

在挂载开始之前被调用：相关的 render 函数首次被调用。

mounted

el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。

beforeUpdate

数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。

该钩子在服务器端渲染期间不被调用。

beforeDestroy

实例销毁之前调用。在这一步，实例仍然完全可用。

destroyed

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

jquery 选择器，模糊匹配

Lucene — Mon, 26 Feb 2018 05:49:48 +0000

转自：https://www.cnblogs.com/lixiuran/p/5316727.html

jquery 选择器，模糊匹配
按姓名匹配
1,name前缀为aa的所有div的jquery对象

Js代码收藏代码
$(“div[name^=’aa’]”);

2,name后缀为aa的所有div的jquery对象

Js代码收藏代码
$(“div[name$=’aa’]”);

3,name中包含aa的所有div的jquery对象

Js代码收藏代码
$(“div[id*=’aa’]”);

以上返回的都是jquery的集合对象，因此都可以用

Java代码收藏代码
.each(function(i){

});
进行遍历

下面的格式可用于集合，也可以用于匹配单个jquery对象
1,

Js代码收藏代码
$(“tag:type[tagattribute=’xx’]”);

例如:

Js代码收藏代码
$(“input:text[name=’xx’]”)

jQuery DateTimePicker 日期和时间插件

Lucene — Thu, 01 Feb 2018 06:39:42 +0000

转自：https://www.cnblogs.com/linJie1930906722/p/6066071.html

jQuery UI很强大，其中的日期选择插件Datepicker是一个配置灵活的插件，我们可以自定义其展示方式，包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等。

日期选择插件是一个配置灵活的插件，你可以定义它的展示方式，包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等

文档和下载地址：

1、jQuery-Timepicker-Addon的下载地址：https://github.com/trentrichardson/jQuery-Timepicker-Addon

2、jQuery-Timepicker-Addon的的文档地址：http://trentrichardson.com/examples/timepicker/

3、DateTimePicker的演示地址：http://www.helloweba.com/demo/timepicker/

4、JQuery-UI下载地址：http://jqueryui.com/themeroller/

6、JQuery下载地址：http://www.jq22.com/jquery-info122

下面先看效果图：

引入js文件：

1、默认的效果：

关键代码：

$("#defult").datetimepicker();

2、控制到时分秒：

关键代码：

                $('#date').prop("readonly", true).datetimepicker({
                        timeText: '时间',
                        hourText: '小时',
                        minuteText: '分钟',
                        secondText: '秒',
                        currentText: '现在',
                        closeText: '完成',
                        showSecond: true, //显示秒  
                        timeFormat: 'HH:mm:ss' //格式化时间  
                    });

3、控制到年月日

关键代码：

                $("#date_yy-mm-dd").prop("readonly", true).datepicker({
                        changeMonth: true,
                        dateFormat: "yy-mm-dd",
                        onClose: function(selectedDate) {

                        }

                    });

4、开始结束区间

关键代码：

        $("#date_start").prop("readonly", true).datepicker({
                        changeMonth: true,
                        dateFormat: "yy-mm-dd",
                        onClose: function(selectedDate) {
                            $("#date_end").datepicker("option", "minDate", selectedDate);
                        }
                    });

                    $("#date_end").prop("readonly", true).datepicker({
                        changeMonth: true,
                        dateFormat: "yy-mm-dd",
                        onClose: function(selectedDate) {
                            $("#date_start").datepicker("option", "maxDate", selectedDate);
                            $("#date_end").val($(this).val());
                        }
                    });

5、时分秒选择：

关键代码：

                       $('#date_hhmmss').prop("readonly", true).timepicker({
                        timeText: '时间',
                        hourText: '小时',
                        minuteText: '分钟',
                        secondText: '秒',
                        currentText: '现在',
                        closeText: '完成',
                        showSecond: true, //显示秒  
                        timeFormat: 'HH:mm:ss' //格式化时间  
                    });

6、开始结束区间(第二种写法)：

关键代码：

                $.timepicker.dateRange(
                        $("#date_start_1"),
                        $("#date_end_1"), {
                            minInterval: (1000 * 60 * 60 * 24 * 1), // 区间时间间隔时间
                            maxInterval: (1000 * 60 * 60 * 24 * 1), // 1 days 区间时间间隔时间
                            start: {}, // start picker options
                            end: {} // end picker options});
                        }
                    );

完整代码：




    
        
        
        
        
        
        
        
        
        
        
    

    
        
        默认：
        
        

        

        控制到时分秒：
        

        
 控制到年月日：
        
        

        
 开始结束区间：
        

        ~
        

        
 时分秒选择：
        

        
        

        
 开始结束区间(第二种写法)：
        

        ~