vue2.0 技巧彙總

時間  2019-11-06
標籤 vue2.0 vue 技巧 彙總 简体版
原文   原文鏈接 
/**
 * Created by 
 */
export default {
    trim: (str) => { //刪除左右兩端的空格
        return str.replace(/(^\s*)|(\s*$)/g, "");
    },
//顯示當天的時間，超過一天顯示昨天，大於一天，顯示，星期，年
    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) + '/' 
+ 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 換行的獲取光標的函數：
 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
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) + '/' 
+ sendTime.getDate();
			}
			//
			else {
				showDate = sendTime.getFullYear() + '/' + (sendTime.getMonth() + 1) + '/' + sendTime.getDate();
			}
			return showDate + ' ' + showSendTime;
			// };
		}*/

 

右鍵功能 

@contextmenu.prevent="rightShow()"
v-on:contextmenu.prevent = "事件名稱"

 

數據的json和對象的轉換
一、console.log(JSON.stringify(json));
2.JSON.parse()

 

一、顏色的漸變
background:-webkit-linear-gradient(left, #1290e9,#00d7da );
background: -webkit-linear-gradient(left, #1815e0 20%, #00d7da);
二、模態窗口如何使用

 

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()的回調函數中。緣由是什麼呢，
緣由是在created()鉤子函數執行的時候DOM 其實並未進行任何渲染，而此時進行DOM操做無異於徒勞，
因此此處必定要將DOM操做的js代碼放進Vue.nextTick()的回調函數中。與之對應的就是mounted鉤子函數，
由於該鉤子函數執行時全部的DOM掛載和渲染都已完成，此時在該鉤子函數中進行任何DOM操做都不會有問題 。
在某個動做有可能改變DOM元素結構的時候，對DOM一系列的js操做都要放進Vue.nextTick()的回調函數中

 

功能：vue2.0 實現click點擊當前li，動態切換class
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);
			});
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程