vue2.0 技巧汇总

/**
 * Created by 
 */
export default {
    trim: (str) => { //删除左右两端的空格
        return str.replace(/(^\s*)|(\s*$)/g, "");
    },<br>//显示当天的时间，超过一天显示昨天，大于一天，显示，星期，年
    formatMessageTime: (time) => {
        const week = {
            "0": "星期日",
            "1": "星期一",
            "2": "星期二",
            "3": "星期三",
            "4": "星期四",
            "5": "星期五",
            "6": "星期六"
        };
        const oneDay = 24 * 60 * 60 * 1000,
            oneWeek = 6 * 24 * 60 * 60 * 1000,
            oneYear = 365 * 24 * 60 * 60 * 1000;
        // return function (time) {
        if (!time) {
            return '';
        }
        if (typeof (time) === 'string') {
            return time;
        }
        const sendTime = new Date(time),
            currentTime = new Date();
        const yesterdayTime = new Date(currentTime.getFullYear(), currentTime.getMonth(), currentTime.getDate());
 
        let minutes = sendTime.getMinutes();
        let hours = sendTime.getHours();
        minutes = minutes > 9 ? minutes : '0' + minutes;
        hours = hours > 9 ? hours : '0' + hours;
 
        const showSendTime = hours + ':' + minutes;
        let showDate;
        // 今天
        if (sendTime >= yesterdayTime) {
            return showSendTime;
        }
        // 昨天
        else if (sendTime >= yesterdayTime - oneDay) {
            showDate = '昨天';
        }
        // 一周内
        else if (sendTime >= yesterdayTime - oneWeek) {
            showDate = week[sendTime.getDay().toString()];
        }
        // 今年内
        else if (sendTime.getFullYear() == currentTime.getFullYear()) {
            showDate = (sendTime.getMonth() + 1) + '/' + sendTime.getDate();
        }
 
        // 本世纪
        else if (sendTime.getFullYear().toString().slice(0, 2) == currentTime.getFullYear().toString().slice(0, 2)) {
            showDate = sendTime.getFullYear().toString().slice(2) + '/' + (sendTime.getMonth() + 1) + '/' <br>+ sendTime.getDate();
        }
        //
        else {
            showDate = sendTime.getFullYear() + '/' + (sendTime.getMonth() + 1) + '/' + sendTime.getDate();
        }
        return showDate + ' ' + showSendTime;
        // };
    },
    formatTime: (time) => {
        var d = new Date(time);
        var year = d.getFullYear();
        var month = d.getMonth() + 1;
        var day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate();
        var hour = d.getHours();
        var minutes = d.getMinutes();
        var seconds = d.getSeconds();
        // return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds;
        return hour + ':' + minutes;
    }
}

ctrl +enter 换行的获取光标的函数：<br> placeCaretAtEnd(el) {
            el.focus();
            if (typeof window.getSelection != "undefined" &&
                typeof document.createRange != "undefined") {
                var range = document.createRange();
                range.selectNodeContents(el);
                range.collapse(false);
                var sel = window.getSelection();
                sel.removeAllRanges();
                sel.addRange(range);
            } else if (typeof document.body.createTextRange != "undefined") {
                var textRange = document.body.createTextRange();
                textRange.moveToElementText(el);
                textRange.collapse(false);
                textRange.select();
            }
        },

功能：根据id 查找id在数组的索引index<br>indexOfTargetId(id) {
           for (var i = 0; i < this.length; i++) {
               if (this[i].targetId == id) return i;
           } return -1;
       },

/*  formatMsgTime(time) {
            const week = {
                "0": "星期日",
                "1": "星期一",
                "2": "星期二",
                "3": "星期三",
                "4": "星期四",
                "5": "星期五",
                "6": "星期六"
            };
            const oneDay = 24 * 60 * 60 * 1000,
                oneWeek = 6 * 24 * 60 * 60 * 1000,
                oneYear = 365 * 24 * 60 * 60 * 1000;
 
            // return function (time) {
            debugger
            if (!time) {
                return '';
            }
            if (typeof (time) === 'string') {
                return time;
            }
            const sendTime = new Date(time),
                currentTime = new Date();
            const yesterdayTime = new Date(currentTime.getFullYear(), currentTime.getMonth(), currentTime.getDate());
 
            let minutes = sendTime.getMinutes();
            let hours = sendTime.getHours();
            minutes = minutes > 9 ? minutes : '0' + minutes;
            hours = hours > 9 ? hours : '0' + hours;
 
            const showSendTime = hours + ':' + minutes;
            let showDate;
            // 今天
            if (sendTime >= yesterdayTime) {
                return showSendTime;
            }
            // 昨天
            else if (sendTime >= yesterdayTime - oneDay) {
                showDate = '昨天';
            }
            // 一周内
            else if (sendTime >= yesterdayTime - oneWeek) {
                showDate = week[sendTime.getDay().toString()];
            }
            // 今年内
            else if (sendTime.getFullYear() == currentTime.getFullYear()) {
                showDate = (sendTime.getMonth() + 1) + '/' + sendTime.getDate();
            }
 
            // 本世纪
            else if (sendTime.getFullYear().toString().slice(0, 2) == currentTime.getFullYear().toString().slice(0, 2)) {
                showDate = sendTime.getFullYear().toString().slice(2) + '/' + (sendTime.getMonth() + 1) + '/' <br>+ sendTime.getDate();
            }
            //
            else {
                showDate = sendTime.getFullYear() + '/' + (sendTime.getMonth() + 1) + '/' + sendTime.getDate();
            }
            return showDate + ' ' + showSendTime;
            // };
        }*/

右键功能 
 
@contextmenu.prevent="rightShow()"
v-on:contextmenu.prevent = "事件名称"

1 2	`数据的json和对象的转换<br>1、console.log(JSON.stringify(json));` `2.JSON.parse()`

1 2	`1、颜色的渐变` `background:-webkit-linear-gradient(left, #1290e9,#00d7da );background: -webkit-linear-gradient(left, #1815e0 20%, #00d7da);2、模态窗口如何使用`

JavaScript 获取当前时间戳：
第一种方法：
var timestamp = Date.parse(new Date());
 
结果：1280977330000
第二种方法：
var timestamp = (new Date()).valueOf();
 
结果：1280977330748
 
第三种方法：
var timestamp=new Date().getTime()；
 
结果：1280977330748
 
第一种：获取的时间戳是把毫秒改成000显示，
 
第二种和第三种是获取了当前毫秒的时间戳。

如何给tab栏添加点击样式；
vue更新数据是异步的
1.0 中确实是通过 v-el:xxx 标记 dom 然后在组件里通过 this.$els.xxx 就可以获得这个 dom 对象了
$nextTick(() => {}) 与DOM相关操作写在该函数回调中，确保DOM已渲染
 
什么是Vue.nextTick()
官方文档解释如下：
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码，
什么时候需要用的Vue.nextTick()
你在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。原因是什么呢，<br>原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，<br>所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数，<br>因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题 。
在某个动作有可能改变DOM元素结构的时候，对DOM一系列的js操作都要放进Vue.nextTick()的回调函数中

功能：<a id="cb_post_title_url" class="postTitle2" href="http://www.cnblogs.com/pearl07/p/6307509.html">vue2.0 实现click点击当前li，动态切换class</a><br>addBagStyle(item, index) {
            console.log('this is addBagStyle click')
            this.$nextTick(function () {
                this.conList.forEach(function (item) {
                    Vue.set(item, 'active', false);
                });
                Vue.set(item, 'active', true);
            });
        }
 
    },
html代码
<li :class="{'active':item.active}"
@contextmenu.prevent="rightShow()"
contextmenu="supermenu"
 v-for="(item,index) in conList"
 v-if="item.conversationType===1"
 @click.stop="addBagStyle(item,index)"
 ref="li">

使用this.$router.push()
 
[javascript] view plain copy
 
    this.$router.push({name: '你路由的名字', query: {id: '可以是变量'}})  
 
 
获取的方法为
 
[javascript] view plain copy
 
    this.$route.query.id  
 
 
文档中提到
 
[html] view plain copy
 
    提醒一下，当使用路由参数时，例如从 /user/foo 导航到 user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。  
       
    复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch（监测变化） $route 对象：  
 
[html] view plain copy
 
    <pre name="code" class="javascript">watch: {  
        '$route' (to, from) {  
          // 对路由变化作出响应...  
        }  
      }</pre><p></p>  
    <pre></pre>  
    <br>  
    <p></p>  
    <p><span style="font-size:18px">也就是说当你把参数绑定到节点里后</span></p>  
    <p><span style="font-size:18px"></span></p><pre name="code" class="html"><p>{{params}}</p></pre><p></p>  
    <p><span style="font-size:18px"></span></p><pre name="code" class="html">data () {  
          return {  
            params: this.$route.query.id  
          }  
        }</pre>当参数发生变化时，你需要<p></p>  
    <p><span style="font-size:18px"></span></p><pre name="code" class="javascript">watch: {  
          '$route' (to, from) {  
            this.params = this.$route.query.id  
          }  
        }</pre><p></p>  
    <p><span style="font-size:18px">不然p标签里的值不会发生改变</span></p>  
    <br>  
    <br>  

数组对象里添加属性
// for (let i = 0; i < this.conList.length; i++) {
        //  var els = this.conList[i];
        //      els.active = false;
        //      console.log(this.conList[i])
        // }
 
this.$nextTick(function () {
                this.conList.forEach(function (item) {
                    Vue.set(item, 'active', false);
                });
                Vue.set(item, 'active', true);
            });